Cheesetoast » column http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.12 Responsive Web Design – A 3 Column Layout http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/ http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comments Sun, 15 Apr 2012 23:58:48 +0000 http://www.cheesetoast.co.uk/?p=337 Now that mobile browsing is expected to overtake desktop browsing within the next few years, web developers have to think about how their sites will appear on mobile devices. This post will talk about future-proofing websites with responsive design. I'll demonstrate an example of a 3 column front page design, complete with JQuery slideshow.
Continue reading

The post Responsive Web Design – A 3 Column Layout appeared first on Cheesetoast.

]]>
With different browsers and monitor sizes to take into consideration, web page layouts have always been unpredictable. These days it’s not just desktop computers but phones and tablets to think about as well. Now that mobile browsing is expected to overtake desktop browsing within the next few years, web developers have to think about how their sites will appear on mobile devices.

In his recent newsletter “Mobile Site Vs. Full Site“, usability expert Jakob Nielsen recommends that developers “build a separate mobile-optimized site” to accompany their full screen websites. Google, for example, has a mobile-optimized version of it’s homepage. This approach allows designers to fine-tune the site for screen sizes and peripherals (for example, drop down menus are often removed on mobile versions because they don’t work well with touch screens). Nielsen recommends trimming or deferring content (e.g. reduce words), enlarging interface options, and cutting out features that aren’t  necessary.

The Responsive Approach

Responsive Design - Layout that adapts to different screen sizes.

For those who can’t afford to dedicate the time and energy developing an entirely separate mobile-optimized website there is always responsive web design. Responsive web design makes use of the CSS media query which allow the developer to specify styling for different screen sizes. Just try resizing your browser window now and you should see this webpage respond to the new dimensions.

If you’re new to responsive layouts and want to learn more then I recommend reading Nick La’s (of Web Designer Wall) article “Responsive Design in 3 Steps“. He also has a more in-depth tutorial called “Responsive Design with CSS3 Media Queries” which is well worth reading.

The 3 Column Design

A 3 column layout that responds to the screen size

Having experimented with Nick La’s demo layout I decided to modify it to include 3 columns instead of 2.

View 3 column responsive layout

or play with it on codepen

This new 3 column design displays all columns on the largest screens as equal widths. As the screen gets smaller it will move the sidebar (third column) under the other two columns.  Instead of removing the sidebar (third column) from the smallest screen I displayed all 3 columns on top of one another.

I also added an awesome responsive JQuery slideshow plugin, courtesy of Viljami Salminen.

Lastly, to get the responsive images, I used a handy little snippet of code in the CSS:

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

[Updated]: Is Responsive Design important? Read my other post about the pros and cons of responsive layouts.

If you decide to play around with the layout further then please leave a comment and let me know how you got on.

The post Responsive Web Design – A 3 Column Layout appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/feed/ 11