Featured Post

Dodatkowy odstęp od górnej krawędzi w HTML5

Tym razem po polsku… bo nie tylko po angielsku będę tu pisał Swoje pierwsze kroki z HTML5 mam już za sobą i chciałbym podzielić się pewnym zaskakującym działaniem nowych tagów. Otóż mój przykładowy dokument HTML wyglądał tak: Przykład użycia SubForm z ZF1 w HTML5 Kod źródłowy...

Read More

Responsive web design

Posted by Tomasz Kuter | Posted in Internet browsing, Web design, Web development | Posted on 06-04-2013

Tags: , , , , , , , ,

0

Introduction

Yesterday I was watching nice video about top 5 Web UI Design Trends for 2013. In this video Mike Locke discusses about his Top 5 Favourite Web UI Design Trends for 2013 that web designer should be thinking about incorporating into her or his design work.

The showcast is available at:
http://www.mlwebco.com/2013/03/12/my-top-5-favorite-web-ui-design-trends-for-2013/

He talks about following trends:

  1. Websites with Large Background Images,
  2. One-Page Designs,
  3. Websites with Textures and Patterns,
  4. Responsive Web Design,
  5. Flat UI Design Inspiration.
Width: 320px (e.g. Motorola Flipout)

Width: 320px (e.g. Motorola Flipout)

Responsive Web Design

In this post I would like to focus on responsive web design – actually very popular because of high popularity of smart phones and tablets.

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).“
from Wikipedia.org.

CSS Media Queries

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). It became a W3C recommended standard in June 2012.[1] and is a cornerstone technology to Responsive Web Design.“
from Wikipedia.org.

We can use Media Queries in two ways, the same as CSS styles:

  • inside of CSS files,
  • as conditionally linked styles files.

Inside of CSS file

In this case we create conditional blocks of cascade styles inside CSS file. It looks like that:

Conditionally linked styles

This solution seem to be better, because we create separate CSS files, which are modifying our website according to device screen parameters. Code is very readable and simple:

In above example we have set of responsive stylesheets files, dedicated for most commonly used resolutions:

  • 1024×768 (desktop and tablets),
  • 800×600 (dekstop),
  • 854×480 and 480×854 (smartphones)

CSS Media Queries work fine on modern browsers (IE9, FF, Chrome, Safari, Opera) and on mobile devices (iPhone, Android, Opera Mobile & Mini, Blackberry, IE Mobile 7, etc).

Sample page made according to responsive web design guidelines

I created sample HTML5 page, which is available at:
http://evolic.eu5.org/responsivix/

Here are screenshots of the mentioned example site:

Width: 480px (e.g. Motorola Milestone, portrait)

Width: 480px (e.g. Motorola Milestone, portrait)

Desktop width: 800px

Desktop width: 800px

Width: 854px (e.g. Motorola Milestone, landscape)

Width: 854px (e.g. Motorola Milestone, landscape)

Desktop width: 1024px

Desktop width: 1024px

Desktop width: 1200px

Desktop width: 1200px

Unlike Safari and Opera, I came across a problem in Firefox – I could not reduce the window size to the width of 320 pixels. The problem was solved by temporarily disabling ‘navigation toolbar’.

In the sample I operate only on stylesheets (and JavaScript files). So the content will be the same, but displayed according to device screen resolution.

Project source code is available at GitHub:
https://github.com/evolic/responsivix

Write a comment