Responsive Web Design

desktop-browserOn to the nitty gritty of the design for the site. The skeleton theme that I’m using is an example of a responsive wordpress theme.

What’s one of those then? The technical answer is that it’s a design that responds to the display resolution of the browser and adapts the layout of the content accordingly.

What does that mean in English? In short it means the site layout is optimised for the screen. The site layout will vary according to whether you’re viewing on the desktop, a tablet or a phone. In the case of this site it means that the links to recent blog posts, categories and archive move below the main content on a narrow display but are shown to the right on a desktop.

phone-browserThe first picture shows the site on a desktop, the second on a phone. Contrast that with a screenshot of one of my other sites on a phone. The theme is not responsive so you get a tiny view and have to pinch and zoom to read the content.

Before responsive web design took off displaying differently on small screens was usually done by maintaining a separate version of the site for mobile devices and then attempting to guess what type of device was accessing the site.

nonrwd-phoneResponsive web design usually works with css media queries, so there’s only one version to maintain. Get the css right once and it should work across all devices.

The advantage of doing it this way is that you can preview the site as it would appear on different devices simply by resizing the browser window.

The downside is that you really, really need to know your way around css, which is why I started from a pre-built theme.

If I can really get my head around it I’ll be converting my existing sites to responsive design, but it’s a scary amount of work…

in Web Design

Add a Comment

Your email address will not be published. All comments will be reviewed.

This site uses Akismet to reduce spam. Learn how your comment data is processed.