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

August 28, 2016

BioWorks IPM/Sustainable Practices Scholarship Goes To Alexander Schaller

Schaller, a senior at the University of Arizona in the Plant Sciences Department, is interested in ornamental and floriculture crop breeding and crop physiology.

Read More
Next Generation

August 27, 2016

Australia Launches Initiative To Ignite A New Generation Of Growers

Hort Innovation Chief Executive John Lloyd says the goal is to identify and build future industry leaders at all stages of their career through investment in a host of new initiatives.

Read More
Albert Grimm, Jefferys Greenhouses

August 25, 2016

7 Ways Albert Grimm Strives To Be An Effective Leader

Grimm, Greenhouse Grower's 2016 Head Grower Of The Year, tries to live by the "Seven Habits Of Highly Effective People” from author Stephen R. Covey.

Read More
Latest Stories

August 28, 2016

BioWorks IPM/Sustainable Practices Scholarship Goes To …

Schaller, a senior at the University of Arizona in the Plant Sciences Department, is interested in ornamental and floriculture crop breeding and crop physiology.

Read More
Next Generation

August 27, 2016

Australia Launches Initiative To Ignite A New Generatio…

Hort Innovation Chief Executive John Lloyd says the goal is to identify and build future industry leaders at all stages of their career through investment in a host of new initiatives.

Read More
Albert Grimm, Jefferys Greenhouses

August 25, 2016

7 Ways Albert Grimm Strives To Be An Effective Leader

Grimm, Greenhouse Grower's 2016 Head Grower Of The Year, tries to live by the "Seven Habits Of Highly Effective People” from author Stephen R. Covey.

Read More
Tidal Creek Growers

August 25, 2016

Maryland-Based SunMed Growers Nabs Cannabis License

The company was one of 15 licensees selected by the commission out of a pool of 145 grower applicants to receive one of the license pre-approvals.

Read More
Albert Grimm GOY feature

August 25, 2016

Up Close And Personal With Head Grower Of The Year Albe…

According to Grimm, Greenhouse Grower’s 2016 Head Grower Of The Year, the key to being a successful grower is educating and inspiring yourself, your staff, your customers, and the next generation of growers.

Read More
Penn State Plant Bud

August 23, 2016

AmericanHort Is Helping Plant Importers Adjust To New R…

A report from Craig Regelbrugge at AmericanHort says the government is implementing a streamlined system for imports, in which all required data will be submitted electronically through a single window.

Read More
LuxFlora - feature

August 22, 2016

Check Out Luxflora’s International Adventures In Europe

A new, women-led professional organization provides its members the opportunity to gain insight, develop ideas, and build connections on its annual international trip.

Read More
MasterTag booth at Cultivate'16

August 17, 2016

5 Nuggets Of Wisdom From Cultivate’16

Here are five sweet pieces from the movers and shakers at Cultivate'16 to help improve your greenhouse business.

Read More
Cannabis ForwardGro

August 16, 2016

ForwardGro Receives License From Maryland Medical Canna…

The company, comprised of expert nursery growers, medical experts, business leaders, and patient advocates, says it can now apply its greenhouse growing experience, medical knowledge, and business expertise to effectively grow quality and consistent medical cannabis.

Read More
GreenhouseConnect 2015 Grower Supplier Meeting

August 16, 2016

5 Reasons You Need To Attend GreenhouseConnect

Greenhouse Grower’s annual event, which will take place Oct. 11-14 in Park City, UT, offers large-scale growing operations the chance to meet one on one with suppliers who can directly address your business needs.

Read More
Farwest Show Floor

August 14, 2016

Mobile App Now Available For 2016 Farwest Show

The app, available as a free download, can help attendees plan for everything from educational sessions to the New Varieties Showcase and Grower Showcase.

Read More

August 13, 2016

Plants Sales Are Up For Fourth Straight Year, According…

Growers declared spring 2016 to be a success in Greenhouse Grower’s 2016 State Of The Industry: Spring Crops Recap Survey.

Read More
Echinacea ‘Butterfly Rainbow Marcella’

August 12, 2016

IR-4 Project Receives Federal Funding For Pollinator An…

Grants from the Specialty Crop Research Initiative will fund IR-4 projects on protecting pollinators through ornamental horticulture, and downy mildew management strategies.

Read More
Emily Teng

August 11, 2016

American Floral Endowment Announces Its 2016 Scholarshi…

This year, thanks to the generosity of several donors, AFE awarded more than $35,000 to 17 students pursuing careers in horticulture.

Read More
Laura Drotleff

August 10, 2016

Customers Need Hand-Holding And TLC [Opinion]

If we want customers to use our plants, we need to provide basic information about the plants we produce.

Read More
Plug Connection Assortment

August 9, 2016

AmericanHort’s Plug And Cutting Conference Will Feature…

This year’s conference, which takes place Sept. 19-21 in Carlsbad, CA, features discussions on water, pest and disease control, and production inputs, as well as a biocontrols workshop and tour of local cuttings facilities.

Read More
Jim Nordlie

August 9, 2016

AFE Establishes Memorial Tribute For Long-Time Rose Gro…

Kennicott Brothers Company, Nordlie Inc., and The Pete Garcia Company established the Jim Nordlie Memorial Tribute through American Floral Endowment in honor of James “Jim” Nordlie, who passed away on July 1 at the age of 93.

Read More
Josh Henry, North Carolina State University

August 8, 2016

Get To Know Joshua Henry, Winner Of The 2016 Richard T.…

Henry, a graduate student at North Carolina State University, is pursuing a Master’s degree in horticultural sciences, with a focus on crop nutrition in bedding plants and flowering potted plants.

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