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...
cannabis-planted-in-a-greenhouse

September 29, 2016

The 10 Most Common Misconceptions About Greenhouse Cannabis Production

In an emerging market such as cannabis, there can be a lot of bad information out there. One greenhouse supplier points out some common myths.

Read More

September 28, 2016

Pennsylvania Greenhouse Grower Applying For Cannabis License

Allen Wagner of Wagner’s Greenhouse in Grandview, PA, hopes to become one of 25 applicants — among as many as 150 — chosen for a grower-processor license.

Read More
The-Capitol

September 28, 2016

How The November Election Might Affect The Legalization Of Cannabis

National polls indicate Americans are largely divided on the topic, while this year’s presidential candidates generally feel it’s a state issue.

Read More
Latest Stories
cannabis-planted-in-a-greenhouse

September 29, 2016

The 10 Most Common Misconceptions About Greenhouse Cann…

In an emerging market such as cannabis, there can be a lot of bad information out there. One greenhouse supplier points out some common myths.

Read More

September 28, 2016

Pennsylvania Greenhouse Grower Applying For Cannabis Li…

Allen Wagner of Wagner’s Greenhouse in Grandview, PA, hopes to become one of 25 applicants — among as many as 150 — chosen for a grower-processor license.

Read More
The-Capitol

September 28, 2016

How The November Election Might Affect The Legalization…

National polls indicate Americans are largely divided on the topic, while this year’s presidential candidates generally feel it’s a state issue.

Read More
Vogel Alcove NGB Therapeutic Grant Winner

September 27, 2016

National Garden Bureau Announces Horticulture Therapy G…

The NGB’s annual grant program, Growing for Futures, recently selected three therapeutic gardens that will receive grants totaling $5,000.

Read More
cuttings-facility

September 27, 2016

How Global Suppliers Of Unrooted Cuttings Are Working T…

The world’s top vegetative producers discuss how they continue to evolve to overcome challenges and embrace opportunities to help growers and the varieties supply chain.

Read More
Employees separate the plants by stem count, bud development and height. “This process allows us to respond more quickly to specific requests from customers,” Van Wingerden says

September 22, 2016

AmericanHort Hosting Webinar On Overtime Rule Complianc…

The webinar takes place on Thursday, Sept. 29. AmericanHort is also throwing its support behind the Overtime Reform and Enhancement Act.

Read More
customer-base

September 21, 2016

6 Creative Ways To Expand Your Business

Marketing experts offer tips to help you catch the attention of new customers and grow your business.

Read More
OSU ATI Greenhouse

September 21, 2016

Your Support Is Essential For Current And Future Studen…

September is back to school time, and that means renewed opportunity to support the young people who are electing to pursue careers in horticulture. I continue to hear from growers of all sizes, from all over the country, that there just are not enough qualified graduates of two- or four-year horticulture programs. We also need to be active in promoting careers in horticulture to those who are not aware of the opportunities available. There have been some great success stories in this area recently. At University of Florida (UF) last fall, Anna Ball and Dr. Marvin Miller of Ball Horticultural Co. joined UF’s Dr. David Clark in an introductory environmental horticulture couse that’s open to any major. After the class, the line of students waiting to talk with Ball, Miller, and Clark was out the door. It is so important, Ball says, for each of us, individually and collectively to […]

Read More
Pansy ‘Cool Wave Blue Skies’ (Wave)

September 20, 2016

PanAmerican Seed Settles Alleged Trade Sanction Violati…

PanAmerican Seed, a division of Ball Horticultural Co., has been charged with violating trade sanctions to Iran over a number of years. According to a release from the U.S. Treasury department, PanAmerican Seed made 48 indirect sales of seeds to two Iranian distributors. The company shipped the seed to consignees based in countries in Europe and the Middle East. PanAmerican Seed’s customers then arranged for the re-exportation of the seeds to Iran. The release states that the Office of Foreign Assets Control (OFAC) determined PanAmerican Seed did not voluntarily self-disclose the alleged violations to OFAC, constituting an egregious case. “We believe that the settlement was extreme; however the alternative was to litigate with the U.S. government, which would take months, if not years,” says Todd Billings, Chief Financial Officer for Ball Horticultural Co. When asked what Ball Horticultural Co. has done to ensure that violations to trade sanctions do not […]

Read More
young-plants

September 20, 2016

The Top Young Plant Growers, And Four Critical Challeng…

In Greenhouse Grower’s 2016 Top Young Plant Growers Survey, growers discuss the latest challenges and opportunities in fulfillment, shipping, labor, and crop protection.

Read More
Dual Income No Kids (DINK) Young Couple

September 16, 2016

What You Need To Know About DINKs

DINKs (Dual Income, No Kids) are quickly becoming one of the fastest-growing demographics that marketers are targeting.

Read More
MANTS

September 15, 2016

Registration Is Now Open For MANTS 2017 In Baltimore

The 2017 Mid-Atlantic Nursery Trade Show takes place Jan. 11-13 in Baltimore, MD, and will feature more than 1,000 exhibitors from the green industry.

Read More
farwest-2016-photobooth

September 14, 2016

Farwest 2016 Marked By Expert Discussions On Green Indu…

Attendance at the 2016 Farwest Show in Portland was up 6% from last year, as visitors sought to learn more about emergent market opportunities.

Read More
Workers at Golden State Bulb Growers clean Calla tubers and select the best quality bulbs, placing them on conveyors to be graded, counted and sorted in the new system

September 13, 2016

Newly Signed California Law Expands Overtime To Farmwor…

The new law, which will be phased in beginning in 2019, is the first of its kind in the nation to end the 80-year-old practice of applying separate labor rules to agricultural laborers.

Read More
RISE New Governing Board 2016

September 11, 2016

RISE Appoints New Leadership, Hands Out Awards During 2…

“Our members’ enthusiasm is high, and we had great engagement as we work together to set objectives for 2017 and beyond,” said Aaron Hobbs, RISE President. “Our work ensures a vibrant future for our industry, so we can continue to deliver cutting-edge solutions to solve people’s pest and plant health problems.”

Read More
Workers at The Farm at Green Village

September 10, 2016

Now Is The Best Time To Demand Federal H-2B Program Sup…

Congress is expected to pass a continuing resolution spending bill in the near future, and whether or not that measure includes an H-2B returning worker exemption could impact your labor supply for 2017.

Read More
Cavicchio Greenhouses

September 6, 2016

Cavicchio Greenhouses Wins Inaugural Sustainability Awa…

The Sudbury, MA, growing operation sustains more than 250 acres of annuals, perennials, and nursery stock, with a number of practices to mitigate its impact on the environment.

Read More
Charlie Hall Feature Image

September 6, 2016

10 Insights From Charlie Hall’s Green Industry Economic…

With the uncertain current economic climate, Texas A&M economist Charlie Hall says now may be the perfect time to invest — as long as you do it smartly.

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