Adding Responsive Design Features to an Existing Webapp Part 1: Adapting Grid960

A viable alternative to full redesign?

Responsive design

I recently did some work on pingability.com, bakop.com, zonomi.com, inboxharmony.com, 2partsmagic.com and 25mail.st. My aim was to see how easily the layouts could be tweaked to incorporate responsiveness, given that the page structure was not being redesigned at this time.

In the last year or two, the ideas and techniques behind responsive web design have been adopted more and more widely. Handheld web enabled devices have continued to become more widespread and are now able to render web pages with similar quality to desktop machines. Browsers on newer devices continue to get faster Javascript engines and css capabilities. Increasingly, the most important differences between mobile and desktop web experience becomes the physical size of the screen and user input methods. Responsive design can enable smaller devices to access the same content as desktop browsers with optimised layouts for a range of screen sizes without redirections to multiple versions of a web application.

Why not redesign?

The 6 web applications in question had already undergone a design process, each being created or redesigned around 2 years ago. They are not due for another redesign just yet, as are still meeting the needs that they were designed for.
However,  responsive layouts would not only improve the look of these websites for users on smaller screens but might also greatly improve usability of key areas like forms and web application control panel sections.
I wanted to see whether it was feasible and cost effective to have the layouts adapt for touchscreen / mobile user interfaces using minimal client side changes.
All of the apps use an inhouse java framework, Prototype JS and Grid960 css grid system. Grid960 is used in the container_12 mode, to allow the use of 3 equal width columns.

Media queries and Grid960

I chose to limit the list of targeted screen widths to keep things simple. The smaller sizes are taken from ipad and iphone widths as these are relatively standard. There are enough options that other device screen sizes will nearly always fit closely to one of them. I chose to ignore widths less than 320px as I looked into 240px but found that too many page elements would not fit well without system wide changes.
So, using media queries:
960px (existing),
768px (tablet portrait):

@media only screen and (min-width: 768px) and (max-width: 959px) {}

480px (phone landscape):

@media only screen and (min-width: 480px) and (max-width: 767px) {}

320px (phone portrait) note that this targets smaller screens, but I will be designing for 320px wide:

@media only screen and (max-width: 479px) {}

It would be easier to stack columns vertically than to stretch areas to fit a wider size than designed for, so I did not include media queries to enlarge on wider monitors.

768px

Firstly, the container_12 width needs to be altered to fit each size.

@media only screen and (min-width: 768px) and (max-width: 959px) {
   .container_12 {
      width: 768px;
   }
}

Next, we need to decide how each of the column widths will be translated from the full page version to the mobile versions. This will depend on how Grid960 is used on the page.
Normally, the classes grid_1, grid_2, grid_3, … grid_12 give the element a width from 1/12 to full 100% width. So if we want to split into 3 columns, three siblings with class grid_4 are used.
As the screen width gets small, the page remains more useable if these elements are stacked rather than squished together.
So for each screen width, we need to add css rules to make each different grid size to conform to the device.

For the tablet portrait size, 768-959px, I first tried having the grid sizes retain their size in proportion to the page, but this was unsatisfactory as text on narrower columns inside padding became way too tall and the page as a whole too compressed.

After some tests, I found that the most satisfying way to arrange the elements for this size was to allow only 2 grid sizes. Anything below size grid_8 (normally ⅔ page) would be rendered as 50% page width, grid_8 and above as full page width.

@media only screen and (min-width: 768px) and (max-width: 959px) {

   .container_12 {
      width: 768px;
   }
   .container_12 .grid_12,
   .container_12 .grid_11,
   .container_12 .grid_10,
   .container_12 .grid_9,
   .container_12 .grid_8 {
      width: 748px;
   }
   .container_12 .grid_7,
   .container_12 .grid_6,
   .container_12 .grid_5,
   .container_12 .grid_4,
   .container_12 .grid_3,
   .container_12 .grid_2,
   .container_12 .grid_1 {
      width: 364px;
   }
   img {
      max-width: 748px;
   }
}

You might notice that the pixel widths given here are less than 100% and 50% of the page width. This is because each of the grid classes also add a left and right margin of 10px.

So one grid element uses 20px, two use an extra 40px of the page width.

I also added a generic rule to keep images within the bounds of the reduced page area.

A comparison between full width and tablet portrait display:

Compromises have to be made, sometimes a 50% width element will be on its own row, but mostly the layout works better for this slightly narrower screen. In cases where the layout still requires particular width percentages, specific rules had to be created. But these cases turned out to be less common than predicted.

480px

After experimentation with the mobile landscape width, I found that for our websites the best generic grid display is:
grid_4 and over becomes 100% width,
grid_3 (normally ¼ width) and under presented as 50% width.

@media only screen and (min-width: 480px) and (max-width: 767px) {
   .container_12 {
      width: 480px;
   }
   .container_12 .grid_12,
   .container_12 .grid_11,
   .container_12 .grid_10,
   .container_12 .grid_9,
   .container_12 .grid_8,
   .container_12 .grid_7,
   .container_12 .grid_6,
   .container_12 .grid_5,
   .container_12 .grid_4 {
      width: 460px;
   }
   .container_12 .grid_3,
   .container_12 .grid_2,
   .container_12 .grid_1 {
      width: 220px;
   }
   html, body, form, fieldset, p, li, span, input, div, h1, h2, h3, h4 {
      -webkit-text-size-adjust: none;
   }
   body {
      font-size: 13px;
   }
   form, table {
      padding: 10px;
      margin: 0 -10px;
      width: 460px;
      max-width: 460px;
   }
   table {
      border-width: 10px;
   }
   form table {
      margin: 0;
      padding: 0;
      width: 440px;
      max-width: 440px;
   }
   img, input, textarea {
      max-width: 460px;
   }
   .hide_for_width_480 {
      display: none;
   }
}

Some extra type rules target iphones in particular. Mobile safari enlarges text when in landscape mode. This did not seem helpful, so setting the font size and -webkit-text-size-adjust to none conteracts this.

I also include some css to render tables, forms and form elements differently at this screen resolution. For these websites, forms and tables usually have padding and margin to give them breathing space on the page. However at narrower resolutions, we make the form or table full page width and margins are handled differently.

A form on full width:

Vs. on a 480px screen:

Finally we have a hide_for_width_480 class. Some page contents simply do not make sense on smaller screens. A show_for_width_480 class might be used on a different hidden element to swap content.Note that for crisp images on retina display devices, we need to use images at double the dimensions that it takes on the page. This is essential for key graphics on the page such as organisation name and logo.

320px

This one was simple. Everything as for 480px, with appropriate pixel sizes, except all grid sizes are made to be full screen width.

Looking at individual elements

For our applications, there were a few cases where layouts were more complex or did not use Grid960. This commonly happened on home pages where the design had required differently positioned images and text. Also in a few other cases.
These corner cases took more time to get right. Redesigning would have been simpler, as the page structure could be better set up for different layout permutations.
As it was, the process required a lot of testing for each screen width after css alterations.
An example, where the background image and text required different sizing and positioning for the layout to work at each alternate scale.

960px:

768px, 480px and 320px:

View the web applications discussed here:

http://25mail.st

http://25mail.st

http://2partsmagic.com

http://2partsmagic.com

http://bakop.com

http://bakop.com

http://inboxharmony.com

http://inboxharmony.com

http://pingability.com

http://pingability.com

http://zonomi.com

http://zonomi.com

For help making your web site responsive, or any other development work, contact 2 Parts Magic.

In the next post, I want to discuss adapting the designs to cater for touch interactions, also issues with displaying wide tables effectively on narrower displays.

Part 2

This entry was posted in All and tagged , . Bookmark the permalink. Both comments and trackbacks are currently closed.