4 Pitfalls To Avoid With Responsive Web Design

Suzanne McKee
Suzanne McKee

Responsive web design, mobile-first, Google algorithms — the list of technology that you need to stay current seems unending, and it can get a bit overwhelming trying to stay at the forefront of it all. Tech words aside, the end result is a simple concept — create an online presence where you can connect with customers and prospects from their device of choice.

In order to stay relevant, your company needs to be available and accessible where your customers are looking, whether it be on a full-sized desktop, a tablet, or a phone. Not only is responsive design critical for your customers, but Google has all but made it a requirement if you want your company to appear in their search results.

When moving from a static web design to responsive design, here are four pitfalls to avoid from a project management standpoint.

Pitfall #1: Phasing It In

In theory, it sounds like a good idea to focus on certain parts of your site first and then move on to others and approach the project in phases. In practice, going from a static design to a responsive design changes everything, so it is best to be prepared to tackle it all to prevent surprises and roadblocks along the way.

Think of static design like a fishbowl. The glass container creates a definite border that holds in the water, fish, and rocks. If you take away the container (responsive design) and the water can take any shape, the fish are flopping and the rocks are everywhere. In other words, when the contents can take any shape it changes more than just the look and feel of it, but the entire structure around your website, as well.

Instead, start off the project by detailing out every section and design element that will be affected, and make a plan before you dive in to the redesign.

A few of the big elements to make sure you consider:
• Header/navigation design
• Footer design
• Internal page layouts: Try to create a package of templates instead of having a unique design for every single page
• Images: Be sure to keep aspect ratios and maximum sizes of images in mind to prevent stretching and image distortion.

Pitfall #2: Creating Your Desktop Design First

This is where mobile-first thinking comes in. It is so much easier to give something small more room than it is to cram something big into a tiny space. With that in mind, create a site that is appealing and user friendly at that smallest screen size first, and then build the design out so it works on larger screens, as well.

There are almost as many device sizes as there are people viewing them. Pick the size breaks (i.e., mobile phone, tablet, laptop, desktop) that will impact your customers most and then build out your designs utilizing those media sizes.

Pitfall #3: Going It Alone

It is critical to hire a web designer who is proficient in both UI (user-interface) concepts and coding best practices. You need someone on your team who truly understands how all of the responsive design elements interact with each other and who knows how to make a site that is both visually appealing and easy to navigate for your customers.

Between media queries, CSS, HTML, and JavaScript,etc., it is critical to have an expert working for you to achieve a website that looks great and functions even better.

Pitfall #4: Testing Only On Your Device Of Choice

Testing your site needs to be inherent throughout the entire process to make sure that your perfect site is truly perfect for everyone. Different browsers interpret code differently, and some really innovative coding options are not compatible with all browsers.

You can’t just test on your own computer and phone and assume that it will work the same for everyone. You will need to enlist a team of people using all different kinds of technologies to make sure that your site is working like it is supposed to for everyone.

There are different developer tools available on every browser that can help to simulate the experience from different devices, but to thoroughly test, people should be using actual devices to make sure you aren’t missing something.

It may seem too overwhelming to take the plunge into responsive design, but with some good advance planning and getting the right team on board, the project can actually be fun. Most importantly, it will encourage you to dig a little deeper into what your customers need and how to best provide it to them —a win for everyone.

Topics: , ,

Leave a Reply

One comment on “4 Pitfalls To Avoid With Responsive Web Design

  1. […] With modern-day technology improving everyday at a phenomenal rate, it can be overwhelming staying current retaining all the changes. Simply stated, you need to continue creating a strong online presence where you can connect with customers from their device of choice. In order to stay relevant, your company needs to be accessible by whatever mobile device that they are using. Responsive design is critical for your customers. However, Google has all but made it a requirement if you want your company to appear near the top of their search results. When moving to responsive design, here are four snags to avoid from a project management standpoint. Incorporating It In In practice, going from a static design to a responsive design changes everything and may be very different from what you are used to . It is best to be prepared to tackle it all to prevent surprises and obstacles along the way. In essence, static design is like a fishbowl. The glass container creates a definite border that holds in the water and fish. If you take away the container (responsive design), the water can take any shape. When the contents can take any shape, it changes more than just the look and feel of it but the entire structure around your website as well. Instead, start off the project by detailing every section and design element that will be affected. It’s vital to make a plan before you dive in to the redesign. A few of the big elements to consider are the following: • Header/navigation design • Footer design • Internal page layouts – Try to create several templates instead of having a unique design for every single page • Images – Be sure to keep aspect ratios and maximum sizes of images to prevent stretching and image distortion. Create Your Desktop Design First This is where the idea of mobile first comes in. It is so much easier to use something small than it is to cram something big into a tiny space. So, you need to be aware about creating a site that is appealing and user friendly at that smallest screen level, and then build the design so it works on larger screens as well. There are A multitude of device sizes that people are utilizing. Media sizes, such as cell phones, tablets, laptops and desktops, will impact your customers most. You will need to create your designs around these. Going It Alone It is critical to hire a web designer proficient in user-interface (UI) concepts and coding. Your “team” needs to understand how all of the responsive design elements interact with each other. It’s crucial to know how to make a website that is both visually appealing and easy to navigate for your customers. Between all media queries, it is critical to have an expert working for you to achieve a website that looks great and functions even better. Testing Only On Your Device Of Choice Testing your site needs to be perfect and that is truly perfect for everyone. Different browsers interpret code differently, and some really innovative coding options are not compatible with all browsers. You can’t test on your own computer and phone and assume that it will work for everyone. You will need to enlist a team of people proficient in all kinds of technologies to make sure that your site is working like it should be for everyone. There are different developer tools available on every browser that can help to simulate the experience from different devices. However, to thoroughly test, people should be using actual devices to make sure you aren’t missing something. It may seem very overwhelming to take the plunge into responsive design, but with some good advance planning and getting the right team on board, the project can actually be fun. Most importantly, it will encourage you to dig deeper into what your customers need and how to best provide it to them. To me, that’s a win-win scenario for everyone! Based on article by Suzanne McKee Link: http://www.greenhousegrower.com/business-management/4-pitfalls-to-avoid-with-responsive-web-design/ […]

More From Business Management...
North Creek Nurseries lower trials

June 24, 2016

North Creek Nurseries Is A Finalist For 2016 Operation Of The Year

North Creek Nurseries in Landenberg, PA, is one of three finalists for Greenhouse Grower’s 2016 Operation Of The Year award and winner of the Excellence In Sustainable Production award for 2016.

Read More
Vic Frey, Kurt Weiss Greenhouses Feature

June 23, 2016

Vic Frey Named A Finalist For 2016 Head Grower Of The Year

Vic Frey, a finalist for the 2016 Head Grower of the Year and recipient of the 2016 Excellence In Production award, was always willing to trial and experiment with the latest technology. He loved the constant change in this industry, and turned every opportunity into a teaching moment.

Read More
Albert Grimm, Jefferys Greenhouses

June 19, 2016

Albert Grimm Named A Finalist For 2016 Head Grower Of The Year

Grimm, winner of Greenhouse Grower's Excellence in Outreach and Leadership award, is always willing to listen, continuously learn, and improve. He is a role model and empowers his employees to strive for excellence.

Read More
Latest Stories
North Creek Nurseries lower trials

June 24, 2016

North Creek Nurseries Is A Finalist For 2016 Operation …

North Creek Nurseries in Landenberg, PA, is one of three finalists for Greenhouse Grower’s 2016 Operation Of The Year award and winner of the Excellence In Sustainable Production award for 2016.

Read More
Vic Frey, Kurt Weiss Greenhouses Feature

June 23, 2016

Vic Frey Named A Finalist For 2016 Head Grower Of The Y…

Vic Frey, a finalist for the 2016 Head Grower of the Year and recipient of the 2016 Excellence In Production award, was always willing to trial and experiment with the latest technology. He loved the constant change in this industry, and turned every opportunity into a teaching moment.

Read More
Albert Grimm, Jefferys Greenhouses

June 19, 2016

Albert Grimm Named A Finalist For 2016 Head Grower Of T…

Grimm, winner of Greenhouse Grower's Excellence in Outreach and Leadership award, is always willing to listen, continuously learn, and improve. He is a role model and empowers his employees to strive for excellence.

Read More
Practical Software Grower Vertical

June 18, 2016

Practical Software Solutions Increases Accessibility, E…

Practical Software will demonstrate Grower Vertical, its customizable and scalable enterprise management system for the horticulture industry, at Cultivate’16 in July.

Read More
Ornamental kale field at Sunlet Nursery

June 17, 2016

Sunlet Nursery Named As Finalist For 2016 Operation Of …

Sunlet Nursery in Fallbrook, CA, is one of three finalists for Greenhouse Grower’s 2016 Operation Of The Year award and winner of the Excellence In Community Leadership award for 2016.

Read More
The-Capitol

June 14, 2016

Fate Of H-2B Program A Hot Topic On Capitol Hill This W…

Following a Senate hearing on the economic impact of the H-2B Program, the House Appropriations Committee was scheduled to take up its own version of a funding bill this week.

Read More
Battlefield Farms Company shot

June 14, 2016

Battlefield Farms Is A Finalist For 2016 Operation Of T…

Battlefield Farms in Rapidan, VA, is one of three finalists for Greenhouse Grower’s 2016 Operation Of The Year award and winner of the Excellence In Innovation award for 2016.

Read More
Mike Goyette, Pleasant View Gardens

June 14, 2016

Mike Goyette Named A Finalist For 2016 Head Grower Of T…

Goyette, winner of Greenhouse Grower's Excellence In Quality Award, is never satisfied with the status quo and is constantly looking for improvements in procedures, plant quality, employee organization, and the bottom line.

Read More
North American greenhouse 1

June 8, 2016

University Of Arkansas Offering Online Greenhouse Manag…

The course, which can be taken 24 hours a day, will cover basic greenhouse designs and construction materials, benching systems, glazing materials, lighting, heating systems, and much more.

Read More

June 7, 2016

Ball Seed Offers Full Mobile Ordering Capabilities With…

The latest update for Ball Seed’s WebTrack To Go mobile app now includes full ordering capabilities for the industry’s largest assortment of seeds and plants. App users can also complete order fulfillment via seed count or package size, find product substitutions, get personalized “contact us” information, request plant tags, and more. “Upgrading WebTrack To Go to the full suite of ordering and management tools is where we’ve always wanted to be,” says Mark Morris, Director of IT for Ball Seed. “With this new roll-out, we’re keeping up with our customers on-the-go and providing them the information and access they need –- even while away from their desks.” The Ball Seed WebTrack To Go app lets customers: Check order status and shipment tracking 24-7 Access up-to-the-minute product inventory from hundreds of suppliers Place orders by seed count, packet size, and more Find product info, culture and photos when and where they […]

Read More

June 7, 2016

Meet Ken Fisher, AmericanHort’s New President And…

The AmericanHort Board of Directors has named Ken Fisher as the organization’s next President and Chief Executive Officer, effective immediately. Fisher has 20 years of experience leading public and privately-held companies, including iconic consumer brands with The Coleman Company and Elmer’s Products Inc. Fisher’s diverse business experience will further the vision and strategy of AmericanHort, while bringing proven organizational management to achieve the desired results, the AmericanHort Board says. “We know the industry values our advocacy work and educational programs, especially Cultivate. Ken’s expertise will assist us in enhancing existing offerings, while adding new value that will broaden our membership,” says Dale Deppe, AmericanHort Board Chairman. “The pace of change in our industry is rapid, and he has experience successfully leading organizations through both business and regulatory cycles. Ken’s business growth track record is exactly what AmericanHort needs as we enter our next chapter, which I am confident will be […]

Read More
Sakata Birthday Cake Feature

May 28, 2016

10 Creative Marketing Ideas From 2016 California Spring…

Grower-retailers often look to breeders for ideas on how to increase plant sales with smart marketing plans. The California Spring Trials were filled with great concepts to reach customers.

Read More
Costa Farms won International Grower of the Year. Representing the operation, (left to right) were Chuck Zala, Michael Vera, Menachem Ganon, Jose Costa, and Mike Rimland

May 24, 2016

AIPH Seeking Entries For Its International Grower of th…

The International Association of Horticultural Producers (AIPH) is inviting ornamental growers from all around the world to enter the AIPH International Grower of the Year Awards (IGOTY) for 2017. Last year’s big winner was Florida-based Costa Farms.

Read More
Gotham Greens Atrium Style Greenhouse Chicago

May 23, 2016

What’s Good For The Environment Is Good For Business [O…

Investing in technology to become more sustainable “always goes hand in hand,” says Abe VanWingerden, co-CEO of Metrolina Greenhouses. “If it is good for the environment, it normally is good for business over the long term.” That connection was abundantly clear in the responses we received to this year’s Top 100 Growers Survey. VanWingerden points to three investments Metrolina has made as good examples of how technology can reduce an operation’s carbon footprint and pay dividends financially. Its biomass system burns locally sourced waste wood — a renewable resource; its ozone water treatment system cleans irrigation water, reducing the need for fertilizers and pesticides, and improving plant quality and precision growing; and electrostatic sprayers reduce water and chemical use, and provide more targeted chemical applications. Other Top 100 Growers have found VanWingerden’s theory to be true, as well. Costa Farms’ investment in solar energy panels on three buildings at its […]

Read More
Top 100 Drone Image Feature

May 16, 2016

Greenhouse Grower’s Top 100 Growers Talk Technolo…

The Top 100 Growers are already by nature some of the most technologically advanced greenhouse operations, due to their sheer size and need for efficiency. Many of the largest growers also serve big box merchandisers and home improvement chains, where prices are dictated, so producing plants at the lowest possible cost is essential to growers not only staying in business, but also profiting and expanding their operations. This year’s survey focused on the automation and technology the Top 100 Growers are investing in, and how these advancements have improved their operations, as well as how they have affected growers’ labor issues. We also asked growers about how they’re solving labor issues, where they’re recruiting new hires, and how they’re keeping their people committed. Lean management programs and sustainability certifications have become higher priorities in the past several years, due to growers’ needs to run efficiently and focus attention on sustainable […]

Read More
PrairieSplendor_CompactRose Syngenta Flowers March 2016

May 16, 2016

New “Generations Of Flowers” Study Tracks How And Why C…

The Society of American Florists and the American Floral Endowment have released an update and analysis of this study, which first began in 2009.

Read More

May 12, 2016

AmericanHort Is Hosting A Greenhouse Tour In New Jersey…

The Field and Covered Production Tour takes place Sept. 14-15, and features stops at Overdevest Nurseries, Centerton Nursery, and Lucas Greenhouses.

Read More
2016 Top 100 Growers With Drone

May 10, 2016

Reading The 2016 Greenhouse Grower Top 100 Ranki…

Greenhouse Grower’s Top 100 Growers survey reveals continued growth among the nation’s largest operations.

Read More
[gravityform id="35" title="false" description="false"]