A List Apart

May 24, 2013 in Web Design Critique

Web Design Critique: A List Apart

This web design critique focuses on one of the web design industries leading publications, the infamous Alistapart. Their new responsive design is a pleasure to use regardless of device. The overall design is a clean and highly usable one column layout with easy reading large text.

A List Apart

Theres no traditional top main navigation on the homepage as such; but rather the content hierarchy navigates the user; with the homepage featuring the two most recent posts; exactly what 99% of their users want upon arrival. A secondary navigation in the footer holds what we’d consider main navigation.

The branding has had mixed reactions from the web community but I love the simplicity of the branding and I think the emphasis on type from such a large web design player is a beacon of direction as to where the web is heading, after all web pages are 99% text. Bold and brave ALA, I love it.

Type is mostly Georgia Pro, with bold headings set in ITC Franklin, again the Georgia choice had mixed reactions from the community, but I feel it works great in context with the bold headings.

The text and large illustrations (retina ready) allow the user to consume the content with ease. I think ALA have gone with the times and even showcased the web at it’s most accessible and naked best; an art directed text document.

Web Design Bits: Mobile Navigation Examples With No Traditional Navigation

A collection of web design bits that showcase how web designers are tackling mobile navigation. On these designs the web designers have chosen to simplify the design so much that there is no traditional primary navigation in-sight, instead the focus is on getting the user straight into the content. This method ultimately saves lots of valuable space on the mobile screen and takes advantage of the linear scrolling of a mobile.

Mobile Navigation


Read More

April 10, 2013 in Blog Design Bits, Web Design Bits

Responsive Web Design: Media Queries

Media Queries allow us to design for different kinds of media, you have probably seen these used to create a print stylesheet for your web document.

The W3C (World Wide Web Consortium) who standardise web technologies have introduced a whole array of Media Queries to cope with our varied device landscape;

Media queries can identify types of media; Screen, Print Braille, but they can also importantly identity the physical characteristics of the viewing device, for instance the width of the screen.

Read More

Responsive Web Design: Responsive Images

Flexible images allow the imagery of your website to respond to the device width. let’s say you have an image width of 600px, that’s great for a large monitor, but when viewed on a mobile device with a 320px width screen the image would overflow its containing element.

Read More

Responsive Web Design: Flexible, grid based layout

A flexible grid based layout means that the layout of the web page should be defined in a relative value. This flexible grid allows the website to respond to different device widths. If you set a web page to be 90% width of the screen size then every device that views that web page would have a good reading experience.

Read More