Retrofitting sites with responsive design with Ben Callahan

Ben is from Sparkbox, a kick ass little studio that has produced some cool stuff.

So what is retrofitting? It’s the fastest and lowest risk approach to providing an exiting site and content to users across multiple devices.

There are two things to remember

  1. How do you do it, and
  2. How to manage your client through the journey.

To do nothing at all for mobile means that people are loading large images on their mobile anyway.

..performance is important, but access is more important. Mobile later is better than mobile never

….@klayon (mobilizing websites, awesome book resource)

The first thing you do when retrofitting a site is get into the browser. Get in, inspect element. Ben often just jumps in and starts playing with the styles.

Find the containing div and if it’s set to a fixed width then change it to 100%. You will often find that goes a long way to improving the responsiveness.

Using the * selector add

* {box-sizing: border-box}

this makes the borders and padding included in the 100% width. You don’t need to push the boundaries, make it add up to less than 100% and stay safe.

Some heights might play up with inputs, change the height from fixed percentages to :auto;

With a few minor changes you find that you can make some massive gains with a small amount of time.

Semantic Grids – Semantic.gs

This requires a CSS precompiler but it allows you to set the column widths and allows you to commit to proportional widths.

Check out the test file on the images/index.html for the inline image styles.

Tim Kadlec also wrote a great article on when background images are pulled down and how to hide them.

Retrofitting Tables

Ben had a client approach Sparkbox and say they needed 1 css file that made their fixed width site become mobile. Everything worked until a Table came along (in a modal window no less).

Tables do some flexing, but the more columns you have the less flexible it becomes.

PRO TIP: Throw in a background-color:red; to show when your media query is activated.

* {box-sizing: border-box;}
table {width: 100%;float:left; border:1px;}
th, td {display: block; float:left; border:0; border-bottom: 1px solid #aaa;}
th {width: 100%;background-color:#000;color:#fff;}
td {width: 25%; min-height:3em;}
thead {display:none;}

At the large resolution the thead is showing when the payment dates are required. You can use td:nth-child(1):before {content:”Month”;}

This isn’t dynamic, nor can it be within the CSS, but it does allow you to keep the table semantic for screen readers and also work on the smaller screens.

You can also use some HTML attributes as well, th:before { content: attr(data-mobile-label); }

Retrofitting with media queries

Small Resolution First

  • server the original css to large viewports
  • serve mobile first to smaller viewports
  • no changes to the original css

Other Considerations

Touch Target

44x44px based on non retina display (apple). Use padding instead of margin on your links. Consider increasing your fonts-size on smaller layouts.

Hover States

A great way to over ride hover styles using modernizr again….

.no-touch a:hover {
 /* :hover styles */
 }

Prioritisation

mobilism.nl has prioritisation. Tickets and programme are the most important elements and you can see why.
Display:none; is set to the elements on larger screens and shown on the mobile because they wanted to focus on those tasks.

Client interaction during retrofitting

Big companies are slow to react. They have no mobile presence, triple digit growth which means there are desperate clients.

Evaluate the project

  • solid UX at large widths (if not, you should just start again)
  • Is the markup semantic? (semantic markup is easier to retrofit)
  • Can’t start over? (they just launched and can not go through a redesign)
  • Is it an immediate requirement?
  • Is this going to benefit the user?

retrofitting is a step in the right direction.

Make sure you’re capturing analytics. This will allow you to gather data to further the work after the retrofit.

Checkout the retrofitting github on sparkbox. Apples site is now responsive. You can add more to the GitHub repository.

If your clients are looking to ONLY make the site look better on smaller devices then you can use the max-device-width

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

3 Responses to “Retrofitting sites with responsive design with Ben Callahan”

  1. Joe G.

    Great post. I’ll be retrofitting a small e-commerce site soon to be optimized for ios devices. I’ll be using this as a reference during the transition. Thanks RDW!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>