Responsive Design

Digital Dexterity Responsive designWhat is Responsive Design?

 
Nowadays, there’s no real distinction between mobile and desktop as there’s now a plethora of devices blurring the boundary in between. Therefore “responsive” as opposed to a “mobile version" is the way forward so a site displays well on any device.
 
So we take the standard desktop design and allow it reflow to display on smaller screens.
 

Generally this means:

Text stays the same size but reflows to fill available width. A reasonable size of 16px is recommended by Google.
Columns/grid are proportional width (e.g. 1/3 of page) rather than fixed. In effect, most horizontal measurements become percentage of screen width rather than pixels.
Columns/grid change to best suit width - e.g. 6 columns desktop reduces to 3 for iPad portrait, down to 1 column for smartphones. 
Bandwidth as well as screen size considerations may mean some content should be omitted on smaller sizes
A hamburger menu will work better on smaller devices replacing the standard menu. LInks should be well spaced for touch devices.

Responsive images: 

  • For the most part, images will scale to the page or the column width they are in - so make image at least width of largest size they will be fitting to.
  • Maximum screen with is 1200px, and columns will often flow into 500px wide single column on smartphonesPhotos scale well as JPEG but any images that contain graphics or text scale much better as PNG
  • Photos scale well as JPEG but any images that contain graphics or text scale much better as PNG
  • Consider saving important graphics (except photos) at twice maximum width to display well on retina screens (e.g. logo)

Responsive tables:

As tables are, in general, not considered responsive, styling tweaks need to make these work on responsive sites. The most common method is to make all tables will now break up into one column for mobile devices. This is a method we have built in to Full Bhuna.

One thing to bear in mind that content is always left-right top-bottom, so a table like:

123
456

Will become on mobiles:

1
2
3
4
5
6

Also its now important you make widths % rather than px. If you create a 3-column table by default this will be 33% per column but just bear in mind to remove any pixel measurements you may have added in the past.  You can make the table itself an actual width if you need and this will shrink to maximum page width if required.

There are issues:

Although not crucial, the best results are if the overall design is created with responsiveness in mind
Editing pages in the CMS often requires knowledge of how the grid on that page works.
Unequal width columns, e.g. 2/3 and 1/3 will not scale vertically equally (if you want equal height columns)
Images are best left to scale to column width or might look odd on some sizes.