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...

January 10, 2017

5 Can’t-Miss Events and Activities at TPIE

The Florida Nursery, Growers and Landscape Association’s Tropical Plant Industry Exposition (TPIE) is fast approaching. As you plan your trip, here are five can’t-miss highlights from this year’s show.

Read More
sakata-tour-de-fresh-salad-bar-donation

January 8, 2017

Sakata’s Participation in Tour de Fresh Race Results in New Elementary School Salad Bar

On the heels of riding in the Tour de Fresh Race in July, Allen Satterlee of Sakata Seed America celebrated by presenting a new salad bar to Galt Elementary School in California.

Read More
griffin-aurora-colorado-branch

January 6, 2017

Griffin Opening New Hard-Goods-Focused Distribution Center in Colorado

The planned February opening of the 18,500 square-foot facility is part of the company’s continued expansion into the Western U.S.

Read More
Latest Stories

January 10, 2017

5 Can’t-Miss Events and Activities at TPIE

The Florida Nursery, Growers and Landscape Association’s Tropical Plant Industry Exposition (TPIE) is fast approaching. As you plan your trip, here are five can’t-miss highlights from this year’s show.

Read More
sakata-tour-de-fresh-salad-bar-donation

January 8, 2017

Sakata’s Participation in Tour de Fresh Race Results in…

On the heels of riding in the Tour de Fresh Race in July, Allen Satterlee of Sakata Seed America celebrated by presenting a new salad bar to Galt Elementary School in California.

Read More
griffin-aurora-colorado-branch

January 6, 2017

Griffin Opening New Hard-Goods-Focused Distribution Cen…

The planned February opening of the 18,500 square-foot facility is part of the company’s continued expansion into the Western U.S.

Read More
gg-january-2017-cover-arizonaeast-feature

January 5, 2017

Why ArizonaEast Is Expanding Its Succulent Production T…

In Greenhouse Grower's January cover story, learn how Brian and Joe Vitale of ArizonaEast saw a chance to expand and diversify their New Jersey-based succulent operation, and why they jumped at the opportunity.

Read More
Moana plant yard

January 4, 2017

Green Industry Poised for Continued Economic Growth in …

Positive economic indicators point to 2017 being a year of modest growth for the green industry, according to economist Charlie Hall.

Read More

January 3, 2017

Growing Optimism for the Horticulture Industry in 2017

With a new administration and a new Congress, AmericanHort's Craig Regelbrugge says the horticulture industry has reason to be cautiously optimistic that regulatory relief could be on the horizon.

Read More
2016-student-competition-award-winners

January 3, 2017

Southern Nursery Association Research Conference Procee…

On the heels of presenting awards to students in the horticulture industry, the Southern Nursery Association has compiled and published its conference research proceedings.

Read More
Farwest Show Floor

December 31, 2016

Farwest Show 2017 Will Feature New Days and Hours

The 2017 Farwest Show will take place Wednesday, Aug. 23 through Friday, Aug. 25, to allow attendees more time to visit local hot spots.

Read More
kelly-norris

December 29, 2016

Kelly Norris: 4 Ways We’re Leaving Growth Opportunities…

Horticulture is a multi-million dollar industry with lots to offer, yet we’re still overlooking several avenues for growth.

Read More
Top 100 Breakfast Panel for 2016

December 27, 2016

You Said It: The Best Quotes From 2016

Some of the industry’s leading growers and educators had strong things to say this year. Here’s a look at some of the most memorable quotes from 2016.

Read More

December 27, 2016

5 Photo Galleries You Didn’t Dare Miss in 2016

Whether it was industry event and trade show highlights or new developments in technology, these images not only spoke more than a thousand words; they drew thousands of clicks, as well.

Read More

December 27, 2016

Check Out the Top 5 Most-Read News Stories on Greenhous…

From pest outbreaks to overtime rule changes, here are the headlines that grabbed your attention in 2016.

Read More
Grow Summit 2016 group shot

December 20, 2016

Less Talk, More Action At Greenhouse Grower’s GRO…

Investing in technology, developing new marketing solutions, and recruiting young growers were just a few of the issues covered at GROW Summit 2016.

Read More
Workers are required to wear uniforms and use tools restricted to the section of the facility where they work, and street clothes are prohibited

December 16, 2016

House Failure To Address H-2B Exemption Could Affect Sp…

Despite efforts by AmericanHort and others in the industry, the House of Representatives failed to renew the Returning Worker Exemption, a policy that helps ensure that small and seasonal businesses have an adequate workforce for the peak spring season.

Read More
americanhort-hort-scholars

December 15, 2016

HortScholars Program Is Open For 2017 Applications

Presented by AmericanHort, the program is open to students in a horticulture-related degree program, and recipients will have exclusive opportunities for in-depth discussions with industry leaders at Cultivate’17.

Read More
North Creek Nurseries Bright Young Talent

December 13, 2016

Emergent Networking Event On Deck At MANTS 2017

Emergent, the collective group of young horticulture professionals who represent the next generation of growing, will host a reception on Wednesday, Jan. 11, after the MANTS tradeshow floor closes.

Read More
bailey-nurseries-veterans-workforce

December 13, 2016

How Bailey Nurseries Navigates The H-2A Program

Joe Bailey, Human Resources Director at Bailey Nurseries says each operation has to analyze their situation and decide for themselves if the H-2A program is right for them.

Read More
Bees on flowers

December 12, 2016

Pollinator Habitats Get The Spotlight In New, Multi-Mil…

The five-year, $4 million commitment from Xerces Society, General Mills, and USDA will offer technical assistance to growers to plant and protect pollinator habitats.

Read More