Web Design Bits: Mobile Navigation, Less Is More Examples

A collection of web design bits that showcase how web designers are tackling mobile navigation.

Cutting down options is always a good thing and in these web designs the designers have chosen to cut down the number of navigation items down to a small handful, thus saving valuable space on a mobile device.

Simplebits mobile navigation

clear left mobile navigation

Read More

Web Design Bits: Mobile Navigation Dropdown Examples

A collection of web design bits that showcase how web designers are tackling mobile navigation. On these designs the web designers have chosen to utilise drop-downs/select menus to save lots of valuable space on the mobile screen. Clicking on the select menu will tap into the phones built-in system interface functionality.

Smashing magazine mobile navigation

smashing mag mobile navigation

Read More

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

Introduction to Responsive Web Design

Responsive Web Design is a phrase keyed by Ethan Marcotte in the book of the same title. Responsive Web Design is a technique used to address a specific problem; designing  a website that displays well across different devices.

People don’t just view websites on a desktop PC anymore, the explosion of smartphones and mobile devices like the iPhone, iPad and Android based phones have meant a significant shift in how people engage with the web.

Read More