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

February 16, 2018

New England GROWS Discontinues After 25 Years

After 25 years, New England GROWS — both the annual event and the organization behind the event — are discontinuing operations.

Read More
Weigela Czechmark (Spring Meadow Nursery)

February 14, 2018

Spring Meadow Nursery Furthers Its Mission of Giving Back to the Industry

The Spring Meadow-Proven Winners Endowment Fund through the Horticultural Research Institute has now topped $800,000, with more scholarships coming in 2018.

Read More
Laura Drotleff

February 13, 2018

Don’t Let Your New Year’s Resolutions Fade Away in 2018

Stuff got real in 2017, and it caused many of us to stop and reflect on the current state of the world, and how we can impact change — or at least improve our own situations. Life is too short, and we work too hard, to not use the annual renewal as an opportunity to take stock of our own personal lives, businesses, and careers, and make the necessary adjustments that will allow us to work smarter and live better. Even if you have already given up on your resolutions, perhaps you can think of January as a trial month and make February the month when you really get to work on your goals. And while I know it’s a difficult month to start on some of these changes, since you’re already immersed in the busy spring season, I promise that if you take some time to evaluate your reality […]

Read More
Latest Stories

February 16, 2018

New England GROWS Discontinues After 25 Years

After 25 years, New England GROWS — both the annual event and the organization behind the event — are discontinuing operations.

Read More
Weigela Czechmark (Spring Meadow Nursery)

February 14, 2018

Spring Meadow Nursery Furthers Its Mission of Giving Ba…

The Spring Meadow-Proven Winners Endowment Fund through the Horticultural Research Institute has now topped $800,000, with more scholarships coming in 2018.

Read More
Laura Drotleff

February 13, 2018

Don’t Let Your New Year’s Resolutions Fade …

Stuff got real in 2017, and it caused many of us to stop and reflect on the current state of the world, and how we can impact change — or at least improve our own situations. Life is too short, and we work too hard, to not use the annual renewal as an opportunity to take stock of our own personal lives, businesses, and careers, and make the necessary adjustments that will allow us to work smarter and live better. Even if you have already given up on your resolutions, perhaps you can think of January as a trial month and make February the month when you really get to work on your goals. And while I know it’s a difficult month to start on some of these changes, since you’re already immersed in the busy spring season, I promise that if you take some time to evaluate your reality […]

Read More

February 12, 2018

Calling All Designers: Enter the International Plantsca…

Applications are being accepted through April 13 for AmericanHort’s International Plantscape Awards, which recognize achievements in interior plantscape design, installation, creativity, renovation, and innovation.

Read More
Dr. P. Allen Hammer, Dummen Orange

February 10, 2018

Applications for Dümmen Orange’s Dr. P. Allen Hammer Sc…

Named for Dr. P. Allen Hammer in acknowledgment of the contributions he has made to the floriculture industry, the scholarship is intended to extend Dr. Hammer’s legacy by supporting the next generation of floriculture students.

Read More
Hand-Crafted Stone Mushrooms (Stone-Age Creations)

February 9, 2018

Garden Retailers at TPIE Highlight Their Favorite Produ…

A team of garden retailers once again participated in the 2018 Tropical Plants Industry Expo Cool Product Awards.

Read More
Amazon-Online-Plant-Store

February 7, 2018

The Latest on Amazon’s Online Plant Store

There is debate throughout the industry over how Amazon’s presence will affect growers who are looking to sell plants online.

Read More
Congressional-Action-Days-2018

February 6, 2018

Congressional Action Days to Feature Pep Talk From Lead…

Rep. Jimmy Panetta, (D, CA), one of the floral industry’s biggest advocates in Congress, will deliver a pep talk to the Society of American Florists’ (SAF) Congressional Action Days participants before they meet with lawmakers on Capitol Hill.

Read More

February 6, 2018

Registration for 2018 IGC Show Now Open

The event takes place Aug. 14-16 in Chicago and features keynote presentations from horticultural economist Charlie Hall and Daymond John from the TV series “Shark Tank.”

Read More
Dendrobium-Orchid-Costa-Farms

February 4, 2018

USDA to Allow Orchid Imports from Taiwan Into U.S.

The USDA Animal and Plant Health Inspection Service has amended its regulations to allow the importation of orchid plants of the genus Dendrobium spp. in growing media from Taiwan into the U.S.

Read More
North Creek Nurseries Head Grower and Owner

February 3, 2018

Be Sure to Take the NICH Industry Survey on Horticultur…

The National Initiative for Consumer Horticulture is asking industry members for their input in a brief survey designed to measure the types of information used to run horticultural businesses.

Read More
Nature-Hills-Nursery-Plant-Shipping-feature

February 2, 2018

How You Can Tackle Online Plant Sales

Selling your products online can open up a new revenue stream, but there are several factors you need to consider along the way.

Read More

January 31, 2018

Online Education Empowers Employees to Succeed

See how UF/IFAS online certificate courses helped employees at Costa Farms get ahead with their jobs.

Read More
Ter-Laak-Orchids-Netherlands

January 30, 2018

Netherlands Orchid Grower Named International Grower of…

Ter Laak Orchids took home the International Association of Horticultural Producers’ top prize at its ceremony at IPM Essen, while Van Belle Nursery in Canada was also a big winner.

Read More
TPIE-2018

January 30, 2018

Color, Décor, and Wellness Were On Display at TPIE

The 2018 Tropical Plant International Expo celebrated its 45th year bringing buyers and sellers of interior plants and related products together in Fort Lauderdale, FL.

Read More
Stuztman-Greenhouse

January 30, 2018

Stutzman Greenhouse Co-Founder Dies at 96

Ervin Stutzman started the Kansas-based family business with his wife, Emma, in 1956.

Read More
Money-feature

January 25, 2018

Why It’s Critical to Understand Your Real Costs o…

It’s time to stop guessing and start calculating when it comes to finding out what your real cost of production is, and pricing products accordingly.\

Read More
Tax-Money

January 23, 2018

Learn How the New Tax Law Will Affect Your Greenhouse B…

AmericanHort will co-host a free “Comprehending the New Tax Law: webinar on Wednesday, Jan. 31, with K-Coe Isom, a national tax consulting leader.

Read More