ISVfocus.com logo

Responsive web design: Flexible everything

on in Backstage

Automatically adjusting to device, screen size and orientation

Desktop, notebook, iPad and smartphone displaying ISVfocus.com website
The notebook shows the full width design, whereas the iPad in portrait mode has a narrower version. The smartphone shows a minimal design for very narrow devices. The desktop displays shows all three versions in different windows.

Implemented responsive web design to automatically respond to different screen resolutions and device orientation, without having to know details of every possible display, notebook, netbook, smartphone, tablet or other access device.

This new WordPress theme builds on the minimalist approach of the iA³ template from Information Architects. I’ve enhanced the HTML5, CSS3 and JavaScript code so I can easily run all ISV Focus blogs and websites from a shared source.

The new design puts the focus on the content: important as we increasingly consume content away from the website using RSS and magazine apps like Flipboard.

  • The design gracefully collapses as the screen width reduces, with white space and margins disappearing while the content remains fixed.
  • At the width of the iPad in portrait mode the design flips into a narrower version with alternative navigation.
  • On narrow smartphones the navigation is reduced to a space-saving pull-down menu.
  • Icons are removed on smaller devices to further reduce clutter.
 

Tags

, ,

Share

If you liked this ISVfocus.com post then please consider passing it along:

Share|

Updates

Subscribe to the full-text RSS feed or daily email newsletter to receive all new content from ISVfocus.com. For notifications please Follow on Twitter or Like on Facebook.

 

Need help?

Rabbit in a magicians hat with magic wandDo you need help responding to a new opportunity? If so, then let’s start exploring how I can conjure practical ideas and solutions for you.