Mindless Philosophy






How does a mobile friendly website work?

by Darren Street

Created on: Monday September 30, 2013

1 comments

Mobile friendly or responsive websites dynamically scale their text and graphics to give the visitor the best view of the website. This is in contrast to a typical website that is usually around 960 pixels wide and centered on the screen.

cogs

So how can you maintain continuity of design BUT maintain reading font sizes, scale pictures and opt out of data hungry movies for visitors connecting over a slow GSM network.

The answer is media queries.

Media queries were introduced in version 3.0 of CSS and is used to set the scope when specific styling should be applied.

In a responsive website we use this construct to test for an attribute to be “true”. The syntax being…


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

This code is saying: if the screen width is between 768 pixels and 959 pixels then don’t apply a border to the “bggrey” class.

With this in mind we can structure our code into “breakpoints” in screen width. The website you are reading now has five breakpoints.

  • A screen width in excess of 960 pixels (the default)
  • A screen width between 959 pixels and 768 pixels, (which aligns nicely for many tablets in portrait orientation).
  • A screen width between 767 pixels and 480 pixels, (which aligns nicely for many Smartphone’s in landscape orientation).
  • A screen width between 479 pixels and 310 pixels, (which aligns nicely for many Smartphone’s in portrait orientation).
  • A screen width of less than 309 pixels

So how does this help in creating a responsive site?

If we can bundle up chunks of code to fire when a screen width is detected, we can display different content for different screen widths. We can make logical decisions based on the break point being shown.

Our home page shows a full width carousel when viewed on a wide screen display. This shows the default styling. When the screen width is reduced the following occurs as defined in the media query blocks :

Between 959 pixels and 768 pixels 

  • the main graphic is reduced in size and the 80% transparency replaced with a dark grey box. 
  • The columns in the main body have been reduced as have the width of the buttons.

Between 767 pixels and 480 pixels

  • the main graphic is reduced in size again and the right hand side graphics are not shown.
  • The bottom two quotes are removed and the main “call to action” buttons are removed.
  • The navigation bar has been replaced by an Apple style nav button.
  • the columns in the main body have been reduced again and the button text simplfied.
  • The main header text size has been reduced as have the main text paragraphs.

Between 479 pixels and 310 pixels

  • the main graphic has been reduced to about a tenth of is original size.
  • There are no buttons and the two Google quotes are top and bottom instead of side by side.
  • The three column layout has been replaced with a single column and the text is now left justified.
  • The buttons are now stacked instead of side by side.
  • Photos now scale to 100% of width.

A screen width of less than 309 pixels

  • The main graphic has been removed entirely and replaced with a black background.
  • All other screen objects have been maintained.

All these modifications to the website are handled without a line of JavaScript. With the help of some transition effects jumping between breakponts can look rather cool, especially when viewing on a Smartphone, and adusting the orientation from portrait to landscape and vice versa.

We use five breakpoints to handle the visitor display, but there is no reason why a sixth breakpoint couldn’t be added to take advantage of widescreen displays. Indeed with strategic layering of the CSS files, websites could transform using different background images fonts and media.

The implementations are only limited by your imagination.

1 comments




chicko commented on 2 Oct 2013


How did you get the way the screen div jump to their new positions. Its a cool effect but I can't find your js?

what triggers the effect? Do you have a bespoke transition handler?

Does say a smartphone copy in the whole CSS and then only apply the media query sections. If so then how is that a performance gain?



Have your say


Sorry this post is no longer accepting comments.