Your web site gets viewed on hundreds of different devices these days. From phones, through tablets, and desktop devices. Noko are ensuring that all the new web sites we build adapt to these new devices out of the box.
Having your web site work on any device allows your visitors and customers greater flexibility to consume your web site when and how they like. It lets you write an article once before being made available to all devices. It ensures that your web site is future-proofed as more people browse web sites on non-desktop devices.More devices than you can shake a stick at
In the web development industry our main design concern used to be screen size and browser compatibility. Now a site must work satisfactorily on everything from a smartphone held in portrait mode to a huge, widescreen desktop monitor.The kinds of devices we must consider are:
- Smartphones
- 7” tablets (Blackberry Playbook)
- Large-form tablets (iPad)
- Netbooks
- Desktops
How do we design for every device?
One way to solve the write-once-publish-to-anything challenge is to use a responsive layout framework. A responsive layout changes its layout depending on the screen width of the device viewing the web page.You can see many examples of web sites with responsive layouts here http://mediaqueri.es/
You can either open the http://mediaqueri.es/ sites on your phone and desktop at the same time, or open them in a browser like Chrome or Firefox and resize your web browser to see the site dynamically adapt itself.
The main navigation may run across the top of the page when a desktop monitor is used, and may reformat itself into some drop-down navigation when viewed on a smartphone.
Generally, web sites that use responsive layouts are based on a flexible grid framework. A flexible grid framework allows content boxes on a web page to both...
resize (to keep the layout of several columns of information consistent within a specified width-range), and
adapt (re-arrange the page to ensure the information is still displayed when there is no room for several columns on smaller devices).
The Boston Globe at full-width (desktop)
The Boston Globe at a slightly thinner width (desktop or tablet-landscape)
The Boston Globe at tablet-width (tablet-portrait)
The Boston Globe at phone width (phone-portrait)
In the case of the Boston Globe web site (as well as many others) the most important content is always at the beginning on each layout. As screen sizes get smaller navigation systems adapt, and content either disappears, or is placed at the bottom of the main content.
You can also see from the first two images that the layout resizes in the first two images, and begins to adapt (change layout) in the second two images.
We’ve done the hard work, so you don’t have to
We’ve developed a robust responsive layout framework adapted from the fantastic open-source project Twitter Bootstrap and the work of the HTML5Boilerplate team.Having a robust and flexible development framework has several advantages:
- The framework layout adapts to any device.
- The framework can be used for custom websites, web applications, and content management system templates.
- It allows our development team to rapidly prototype web sites and applications that work on any device.
- For sites with complex interactions, site features can be built and tested using pre-built, bullet-proof interface elements before a final design is applied. This results in a much more streamlined and efficient design process.
- All of the interface elements contained within the framework have been designed and built to work on multiple devices.
- Our framework is available as part of our Umbraco site builds (Umbraco is a great open-source CMS system).
When to use a responsive layout
A responsive layout might not be appropriate for every web project. A native mobile application might be more appropriate if you’re targeting a purely mobile audience or if your website is a web app and you know the majority of your audience is on a certain type of phone.An interesting model for SaaS-based businesses is to first build the service with a responsive layout so that all devices can be catered for though their web browsers, before building native mobile apps for Apple and Android phones in order to take full advantage of better camera and phone integration and improved touch screen gesture support. Facebook, Twitter and Trello are all good examples of services that work whether you use the web browser on your phone, or download the native app for your device.
Responsive layouts are appropriate for most business-to-business website builds where an organisation would like to write their content once, and distribute it as clearly as possible to the greatest number of devices. It’s that simple.
In 2010 mobile internet browsing more-than-doubled to 4.3%.
In 2011 mobile internet browsing doubled again to 8.5%.
If this doubling of use continues we’ll be seeing a 50/50 split between mobile and desktop web access around the middle of 2014.
For your next web project ask yourself if a responsive layout would be preferable to ensure you’re not alienating this growing segment of potential customers.
If you’d like to know more about our responsive layout framework, drop Steve an email steve.attewell@noko.co.uk




