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 Management...
SNA Logo

June 19, 2017

SNA, MANTS Plan to Co-Locate Their Events in 2018

There is crossover appeal for participants of both events, according to show organizers, and this cooperation will bring value and potential new business opportunities for both audiences.

Read More
Heat Safety App

June 18, 2017

Protect Your Employees from Heat-Related Illnesses with This Updated App

The National Institute for Occupational Safety and Health and the Occupational Safety and Health Administration have released an updated app for smart phones that can help workers stay safe when working outdoors in hot weather.

Read More

June 1, 2017

Reimagining a Brand: How Did We Do With Greenhouse Grower?

Changing the design and content strategy of a brand isn't easy, but we think the new Greenhouse Grower will help carry our innovative industry forward and allow us to better serve your information needs.

Read More
Latest Stories
SNA Logo

June 19, 2017

SNA, MANTS Plan to Co-Locate Their Events in 2018

There is crossover appeal for participants of both events, according to show organizers, and this cooperation will bring value and potential new business opportunities for both audiences.

Read More
Heat Safety App

June 18, 2017

Protect Your Employees from Heat-Related Illnesses with…

The National Institute for Occupational Safety and Health and the Occupational Safety and Health Administration have released an updated app for smart phones that can help workers stay safe when working outdoors in hot weather.

Read More

June 1, 2017

Reimagining a Brand: How Did We Do With Greenhouse Grow…

Changing the design and content strategy of a brand isn't easy, but we think the new Greenhouse Grower will help carry our innovative industry forward and allow us to better serve your information needs.

Read More
June 2017 Cover feature Image

June 1, 2017

Greenhouse Grower is Evolving With You

For 33 years, Greenhouse Grower has been the most trusted, independent resource for our industry and your operation. We’ll keep evolving to remain an indispensable partner for you in the months and years to come.

Read More

May 31, 2017

Customers Come First at Prides Corner Farms

This people-focused grower serves a diverse set of customers, successfully giving each one individual attention without sacrificing efficiency.

Read More
Art VanWingerden

May 31, 2017

Art VanWingerden on the Importance of Investing in Your…

When it comes to reinvesting in structures, Art VanWingerden of Metrolina Greenhouses says it's important maintain the longevity of the building so it will last to the next generation and the generation after that.

Read More
Stepables Tough-Ten Tags

May 25, 2017

Jury Awards Damages in Stepables Photo Copyright Case, …

According to a press release from Under A Foot Plant, Co,, a jury awarded Under A Foot Plant (which owns the Stepables product line) $900,000 in actual damages for The Perennial Farm’s use of Stepables’ copyrighted photographs.

Read More

May 25, 2017

AmericanHort Hosting Advocacy Visit to Capitol Hill in …

AmericanHort has announced it will be hosting Impact Washington, an inaugural advocacy and policy summit, in Washington, DC, Sept. 12-13.

Read More

May 23, 2017

USDA-APHIS Bulletin on Unauthorized Distribution of Gen…

On May 2, 2017, USDA-APHIS was informed that an orange petunia variety was potentially genetically engineered and had been imported and moved interstate without required authorization by APHIS. This led to testing of numerous petunia varieties, which confirmed this particular variety and several others are genetically engineered, and meet the regulatory definition of a regulated article under APHIS regulations. APHIS continues to work with the industry to ensure unauthorized GE petunias are not distributed in the United States.

Read More

May 23, 2017

6 Simple Ways to Acquire New Customers

Even the most successful brands need new customers if they want to grow their business, or stay profitable.

Read More
Dr. P. Allen Hammer, Dummen Orange

May 22, 2017

New Dümmen Orange Scholarship Honors Legacy of Dr. P. A…

“Our industry’s future depends on attracting and supporting bright, hard-working students into horticulture programs across North America, and the support of Dümmen Orange will aid that effort,” Hammer says.

Read More
The Greenhouse and Hoophouse growers handbook

May 19, 2017

New Book Highlights the Benefits of Growing Vegetables …

Andrew Mefferd’s new book, “The Greenhouse and Hoophouse Grower’s Handbook: Organic Vegetable Production Using Protected Culture,” covers the many benefits of protected culture food production, from being first to market, to more effective pest control.

Read More
MedMen New Facility

May 18, 2017

MedMen Cannabis Production Facility in Nevada Nearly Co…

Construction is expected to be completed this summer on the facility, which will include a 26,000-square-foot greenhouse and a 19,000-square-foot extraction and production wing.

Read More
New Frontier Cannabis Industry Annual Report

May 18, 2017

New Frontier Publishes Annual Report on the Cannabis In…

The 2017 Cannabis Industry Annual Report provides an up-to-date perspective on the growth and transformation of the legal cannabis industry, and what it means for each segment of the market, including producers.

Read More
ISO Cutting Machine

May 16, 2017

The Top 100 Growers are Investing in More Technology to…

Labor has traditionally been among growers’ most significant costs, but the continued rising costs and lack of available labor are currently two very heavy burdens that growers have to bear. As the labor supply dwindles, the Top 100 Growers discuss their next steps toward investing in technology to streamline efficiency at their respective operations.

Read More
Flores El Capiro, AIPH Grower of the Year 2017

May 16, 2017

Entries Now Open for International Grower of the Year A…

The International Association of Horticultural Producers’ International Grower of the Year Awards, sponsored by Royal Flora Holland, will take place at IPM Essen 2018 in Essen, Germany.

Read More
Cannabis Crop Protection

May 14, 2017

2017 Cannabis Regulatory Outlook: A Game of Wait and Se…

Medical and adult use legalization measures are on the legislative agenda in a total of 37 states in 2017 — and there's a sentiment gaining steam that the new administration may not be so scary after all.

Read More
2016 Top 100 Growers List

May 12, 2017

How the Top 100 Greenhouse Growers Tackle Managing Cost…

The country’s largest growers continue to strive to maintain a balance with price and costs while making sure they stand out from the competition.

Read More