Responsive Web Design Planning: Why Developers Hate You

Responsive websites have quickly become the new standard in web design and web development, but there is a huge disconnect in the perception of scope and time needed for responsive web design planning and execution.

Designing, programming and cross browser testing a responsive web design today is much more involved than what went into creating a desktop version just 8-10 years ago. At the time of me coming up with this blog / presentation (circa 2012-2013) there were tons of great frameworks and boiler plates, but the process still took a great deal of time. Many legacy browsers (like IE7 & IE8) were still very prevalent and you had to do quite a bit of hacking for the website to degrade gracefully in those older browsers.

The entire premise of this rant / presentation was built upon my experience trying to put responsive websites in production for companies with users who still used legacy browsers during this shift. Many of the points still apply today, and I do my best to keep the resources updated. At some point I will do a new version.

I ended up presenting the topic at Pubcon Vegas and put the points and resources from my presentation into a blog format. That is what this is.

Responsive Web Design Planning Set Up

Whether you are agency side or in-house, we’ve all been there. Boss man comes out of a board meeting (motivated by declining mobile numbers and / or competitors more than likely) wanting to suddenly go all “mobile first” on that ass.

Really?! Now you want to get your mobile and tablet / phablet house in order? You didn’t see the 30+ reports I’ve sent you since 2010 that this is important stuff and we need to take time to plan?! Now, in 2013, you want to do a Chinese fire drill at the last minute and expect any major improvements or success to come from a rushed project?

All web design projects need planning to execute correctly, especially large scale responsive sites.Click To Tweet
The next question you ask the chief delegator at hand goes something like this… “Do we have a coherent content strategy? We have 10,000+ pages you know?”

Then you get something along the lines of “Uh, yeah… our strategy is to go live next month”.

Bill Lumbergh

Next month?! Next MONTH?!! Well, you know how the rest goes. Its not pretty. What is born from this lack of planning is exactly what is wrong with the web. We have continually built on top of shite, one generation of web designers after another and we have accepted that this is just the way it is.

Call outs need to be X because some guy who built a well known crappy website 10 years ago said it works in his book from 7 years ago. Well that’s great, but what worked for that guy, in those browsers with that technology is not the same beast we are grappling with today. Developers need adequate time to plan, code and test if you expect your responsive website to support all your users consistently and provide the best experience possible.

5 Ways To Make Your Developers Hate You

There are actually a lot of things you can do to make your developers hate you, but there are some cardinal sins that will put you at the very pinnacle of their shit list if you do any of the following:

  1. Rush a project with 10 (or more) layouts
    There is no way to correctly vet 8,9,10 or more complex responsive layouts quickly, it just takes time. Don’t rush a project that you know calls for many complicated layouts, it will not end well.
  2. Demand desktop functionality on mobile
    We know you want that 10 image flash carousel to work on your iPhone but I’m telling you buddy, it just aint happening. Let’s go try to cram an Atari 2600 game into a Playstation 4 and see if that works out.
  3. Do not plan for adaptive content
    I keep hearing people say “Responsive Content”. I thought we all agreed responsive content is not a thing. Oh well. If you are not embracing an adaptive approach to your content, you are cursed to revisit, redo and reformat your content again and again and again, etc… with each time you re-platform. You would be well served to investigate the Create Once Publish Everywhere approach to content.
  4. Have no clear content strategy in place
    A content strategy isn’t a technology, process or platform. It’s about a vision. It’s about aligning your values and customer needs with the content you create and publish. By having a”leave it up to IT / Marketing” attitude toward your content, you are leaving money on the table. Content is a business asset and it should be treated as such. Picture yourself leaving that big investor presentation to the new intern to handle. Still, to this day, this is how many organizations treat their content. Get a coherent content strategy, yesterday.
  5. Ask for tons of non-semetrical images
    If you want rectangular images on your blog and a 100% responsive site, find a middle ground before you cause your web designer an aneurism. It’s not worth it, move on.

Conversely, there are a handful of really simple ways going into the planning phases of a responsive project that will make your web developers praise you with all the glory you deserve.

5 Ways To Make Your Developers Love You

  1. Provide a content strategy
    Do this and watch the team rejoice. Clear IA documents, content inventories, wireframes, content flow diagrams, personas, 301 redirects, content governance model and key messages will provide clarity for your team and they will all sing happy birthday. I suggest using the Super Awesome Content Strategy Worksheet.
  2. Provide content templates & diagrams
    Providing an overview of the purpose of at least each top level page can work wonders. I suggest using the Omnigraffle Content Flow Diagrams by David Gillis.
  3. Desktop, tablet & mobile wireframes
    All too often you go through a few desktop wireframes and think you have the IA nailed down, then run as fast as we can into the design phase. As the project progresses it becomes apparent a lot of stuff wasn’t very well thought out for mobile or tablet. This could be avoided if you had gone through desktop, mobile and tablet wireframes. Here are some free Omnigraffle responsive wireframe templates to get you started.
  4. Don’t ask them to support ie6 & ie7
    Considering IE7 accounts for less than 1% of web traffic at this point, I think it’s safe to say, let it go. If you say you need to support IE6, then don’t do a responsive web design. Let’s break out the tables and a copy of Frontpage and get weird.
  5. Give them 3 times the norm to code
    What is hard to understand about responsive websites often taking longer than a regular desktop website? You are essentially designing for 3 (even 4) screen sizes and it takes a great deal more testing to get those to all look right. Back off your web developers and give them adequate time to program your site for all those other browsers you don’t care about.

Cool Stuff Your Developers Should Use (If They Don’t Already)

Responsive web design planning and execution is hard, but not as hard as it use to be just a few years ago. There are now tons of resources to get your project going much faster than the manual media query back and forth of 2009-2010. Tell your developers about these tools (if they aren’t already using them).

Bootstrap

Bootstrap has quickly become the defacto responsive web design boilerplate / framework of choice. Although it is heavily used, you can still customize the UI to fit the style of your design easily and much quicker than writing out all those CSS classes for every button, form, heading, etc… by hand. If you aren’t customizing Bootstrap, you are polluting the web with clones. Don’t do that.

VISIT WEBSITE




Zurb Foundation

Zurb’s Foundation framework is full of awesome and touts itself as “The Most Advanced Front-End Framework in The World” – which it is in spades. So advanced in fact that it doesn’t provide support or play well with most older browsers. Not a framework for newbs, be prepared to get your hands dirty.

VISIT WEBSITE




Jetstrap

Jetstrap is a Bootstrap interface builder that aims to speed up the process of building out a Bootstrap based theme for your website. This is a great resource for beginners who are new to responsive web design but mid-level front-end devs could find value in the time it saves to compile your baseline styles.

VISIT WEBSITE




Wrap Bootstrap

This site has tons of customized UI kits and front-end frameworks for just about any web app you would ever want to build. A great starting point for any graph / data heavy web application you are tasked with building on short notice. Beware of bloat, just like any other theme – be sure to inspect the quality / consistency, you may cause yourself some headaches if you don’t.

VISIT WEBSITE




Style Tiles

Style Tiles are a compilation of colors, fonts and interfaces that help communicate the general direction of a brand’s design. Think of using Style Tiles for your moodboards during the planning phases of your project, before any mockups are even created. Thank me later.

VISIT WEBSITE




Pears

Ever wanted to test and experiment with various collections of interface pattern pairings of HTML & CSS? Are you a WordPress addict? Pears is for you. Pears is a kick ass open source theme for WordPress, enabling front-end monkeys the world over to get their own pattern library up and running with a quickness.

VISIT WEBSITE




Fitvids

Getting video to be responsive can be a pain, but not with Fitvids. Fitvids is a super light easy to use JQuery plugin for fluid width video embeds. We use this on our own mobile site and I highly recommend it.

VISIT WEBSITE




SASS

If you think you have the minerals, SASS is a major time saver and pretty much the only way you want to code a responsive website these days. LESS and others deliver similar features, but SASS is by far the most mature and supported of the lot.

VISIT WEBSITE




MQ Test

Have you ever wanted to see how all those media queries you are running will perform on the carious devices you coded them for? MQ Test will allow you to do just that and can be a huge time saver in identifying potential problems before they end up back on your desk.

VISIT WEBSITE




Browserstack

I can’t tell you how much I love Browserstack. It has it’s flaws, but for the price and feature set, you just can’t beat it. If you develop locally, it offers a way to tunnel in and test your designs locally before you ever even push them to a dev server.

VISIT WEBSITE




Mobitest

Don’t have any coin to throw down on another subscription service? Mobitest is a great free tool to created by  Akamai to test your websites mobile performance on a range of mobile devices. Use it to optimize the load times and

VISIT WEBSITE




W3C MobileOK Checker

W3C also offers a great way to test how well your website fairs against the most optimum mobile standards. I wouldn’t take everything they suggest as an end all, but rather a great starting point for things you can do to provide the best mobile experience for the widest range of devices across the widest range of networks.

VISIT WEBSITE




PB Responsive Images

This nifty little WordPress plugin can automagically reformat all your WordPress images in the post content into a format similar to the picture tag proposed by the Responsive Images Community Group on w3.org. If you don’t want to manually go through and change the class names of all your images in posts, use this plugin, it will save you a lot of time.

VISIT WEBSITE




Responsive-content

Responsive-content is a great jQuery plugin by Stephan Fowler that helps you serve up different content to specific devices. There are a number of reasons you would need to do this, but avoid duplicate content if at all possible.  It can be particularly useful in loading smaller image sizes for different devices to conserve load times on all those severely limited mobile networks with horrible bandwidth at conferences in the United States… cough, cough.

VISIT WEBSITE




ResponseJS

ResponseJS is a popular jQuery plugin with a variety of tools to build highly optimized, mobile-first responsive websites that perform well across all devices. Beware of potential conflicts with other Javascript libraries you may be using.

VISIT WEBSITE




Omnigraffle

Omnigraffle is one of the main planning tools we use for IA here at AXZM and I stand by it. If you are not using it, I highly suggest you do, it will make your life easier trying to communicate wireframes, moodboards, branding guides, etc… Plus it’s super cheap compared to similar software on the market, definitely worth checking out if you don’t already use it.

VISIT WEBSITE




Google PageSpeed Insights

This is the hidden gem of my post. If you are not relying on what Google is telling you to change about your website, don’t get mad when it doesn’t perform. Some of the recommendations are pretty hard to implement and you have to laugh of the irony of Google penalizing you for loading their own javascript, but try to get this to turn Green on desktop and mobile if you can – it will help you and your users.

VISIT WEBSITE




Please Don’t Do This Sh*t

There are some things you just shouldn’t do as it will either cause your developers and / or potentially your business major problems. If you want to keep everything on the up and up, please don’t do this kind of stuff:

  1. Don’t use third party “mobilizer” services
    Any site that claims to make your website mobile friendly by redirecting mobile user agents to their own URL you should stay far away from. Aside from a potential duplicate content penalty I have seen cases where mobile rankings were attributed to the 3rd party services URL – NOT yours. Be sure to steer clear of this kind of 3rd party service, it’s just not worth it in most cases.
  2. Don’t hide huge blocks of content
    If you have a huge amount of content on your desktop version, don’t hide a bunch of it on mobile / tablet. As a general rule Google doesn’t like hidden content or links of any kind.
  3. Don’t use an uneven number of columns (unless you have to)
    If you ask for things that involve uneven numbers, don’t be surprised when your developers don’t want to talk to you for a while. Yes, it can be done (and in some cases has to be done this way for the design), it just adds another layer of complexity that is seldom really necessary. Go with the least path of resistance if you can, don’t be afraid to strip away complexity – your users will thank you.
  4. Don’t use too much crap
    This is the #1 reason mobile websites fail. Be mindful of the file size (and total number) of all images / scripts, etc… to enhance the load times and overall speed of your mobile website for those accessing it. Cellular internet connections are considerably slower than the one you have at home on your laptop / desktop / tablet. Keep it stripped down to the bare essentials if at all possible.
  5. Don’t over use social share buttons
    This is slowly getting worked out, but generally speaking, try to just load the social share buttons that matter most to your audience. Confirm this through analytics and code accordingly. Also, be sure to load the scripts asynchronously and try to present them in a non obtrusive way to your content. Don’t be the guy with a massive social sharing bar covering up the content people are trying to read, you look like a goober.

Lastly, if you like this post be sure to check out the full presentation I did at Pubcon Vegas below. There are loads of killer resources at the end I did not include in my post if you are looking for more information on responsive design.

Download the Planning For Responsive Omnigraffle template here:

GET IT NOW

 

You must be pretty smart because you're here. We like your style. You can have all of our latest tools, tactics and growth strategies FREE, in your inbox, every month or so. 

You're one step closer to greatness! Confirm your email so we can start sending you awesome stuff.

Analytics & AdWords certified growth engineer with over a decade experience in making businesses successful. I own and operate AXZM and often speak at top national industry conferences on the topics of strategy, design and marketing technology. Work with me or learn more about me here. Follow me @nawlready

5 Comments

Leave Comment

 

    • Rj
    • January 8, 2014
    Reply

    Is Twiter Bootstrap layouts SEO friendly like WordPress? Which do you prefer? I just learned how to make websites using Word Press and now I’m kinda interested learning to Bootstrap as well because I noticed that Bootsrap websites are good and they’re increasing.

    • Reply

      Twitter Bootstrap can be compiled with just the elements you need to use for your website, which will allow you to cut down on the page load time – in that regard, there could be some small potential SEO benefits (maybe). Twitter Bootstrap is a front-end boiler plate for responsive / mobile friendly websites.

      WordPress is a Content Management System that provides a means for website owners to easily edit and manage web pages without having to dig into a bunch of code.

      They are Apples and Oranges. Some WordPress themes make use of Bootstrap, and there are completely custom HTML themes available created with Bootstrap that are independent of WordPress.

      Focus on blogging, starting relevant and engaging discussions on Google+, LinkedIn, Twitter and Facebook, high quality citations and in-content links. The rest is worthless or could do more harm then good as far as SEO.

    • Aidan Foster
    • December 21, 2013
    Reply

    Hi Steve,

    Thx for the great post. I run into these challenges often when doing a Responsive site with a new team. Responsive design isn’t a layer of paint for a site. Repeating some of your points early and often during a project will help prepare stakeholders to shift their expectations and understand the complexities responsive design creates.

    • Bob Minteer
    • December 12, 2013
    Reply

    Hi Steve! One of my favorite articles that I have seen from you. I am in the process of developing a new web portal. Mobile first!

    You present an awesome list of great resources here.

    By the way, I am torn between Foundation and Twitter Bootstrap. I am leaning toward Foundation since I use CodeKit and SASS. Although…. I have seen some pretty good looking templates for BootStrap. We shall see. 🙂

    • Reply

      Bob,

      Thanks for the kind words, I’m glad this was able to serve as a resource for your project.

      I would definitely stick with Bootstrap for the time being. I know your industry and the browsers most people are using in those stores are just not there for Foundation, whereas Bootstrap has more support for older browsers (generally speaking) baked right in. You may check your Google Analytics account and verify the most common browsers your visitors are using against the ones Bootstrap supports – http://getbootstrap.com/getting-started/#browsers – Basically, there is a work around for most things you will run across, this isn’t always the case with Foundation. That isn’t to say it can’t be done, just not as quickly as you can move through stuff in Bootstrap, at least in my personal experience.

      I know you often have limited time / resources so any additional coding you have to do defeats the purpose of leveraging a framework.

      I highly recommend checking out this port of Bootstrap from Less to Sass by John W. Long – https://github.com/jlong/sass-bootstrap If you already use composer for dependency management, you can install it with a simple command…

      composer.phar require jlong/sass-bootstrap:x.y.z

      One of the other strengths of Bootstrap is it’s community and resources for themes / UI kits.

      Design Modo has a great variation to the default Twitter Bootstrap styles with Flat UI – http://designmodo.github.io/Flat-UI/

      Bootswatch also has some good stuff – http://bootswatch.com/

      You might also comb through Themeforest for the occasional gem – http://themeforest.net/collections/2712342-bootstrap-templates

      Ultimately, it really depends on what you are trying to do. I actually would prefer to use Zurb most times, but all to often I find myself coming back to Bootstrap as the safe bet.

      I feel your pain brother. I hope all is well, have a safe and happy holiday!