How does all this

Some of the key differences:

• flexible browser layout
• larger text size and line-heights
• images scale with viewport changes
• menus collapse to an icon with a touch-list
• forms are easier to use on small devices like phones and smartpads

If you don't have a smartphone handy, you can easily use a browser window on your computer to simulate how the site looks on a phone or pad. Pull the right edge of the browser window in to make it narrow, then narrower, and notice what happens to the navigation menus, text blocks and images.

flexible layout

A good responsive site will generally have three widths where the page contents rearrange themselves: desktop, smartpad, smartphone. Within each device category, width is variable, so contents require some forethought, and considerable testing to address as many variables as possible, and to keep content targeted and prioritized to lead your visitors to the exact actions you would like them to take.

fonts and spaces

Text sizes, line height and white space are usually larger than we've become accustomed to, allowing device users plenty of finger-space ('target space') to manipulate the screen.

---

Some of our client sites:

EnroutePro

Deep Woods Events

Simons and Balentine (Hip Pocket Theatre)

---

More Examples

Architecture design studio

(beautifully constructed, and a good example of how a side column collapses to the bottom - the page hierarchy uses the least important information in the sidebar, which goes down to the bottom of the page when you collapse the browser)