There is an emerging design methodology that understands the way web sites have largely been developed up until now has been counter-productive and the process of design first and content later results in sites that value form over functionality and decoration rather than purpose. This concept is Content First and goes hand-in-hand with Mobile First and Adaptive and Responsive Design.

Content First is the idea that a website should be developed around the content rather than creating a design first, and then fitting the content into that design. What can happen is a nice looking site that fails to deliver the content in a meaningful way.

Focusing first on the design can ensure the website reflects the corporate image and values and conforms to the style guide for all the existing print material, logo and office furniture; except what may work on paper or a billboard doesn’t always translate to the web.

By focusing on the content first: the purpose of each page, whether it is text, images, video and animations can be structured to meet the organisations’ goals without restrictions. The design can then flow around the content to present it in a coherent and logical way. Additionally focusing on good content in turn results in better search engine placement from the start.

With mobile devices gradually becoming the device of choice for going online, a design that looks great on a desktop isn’t necessarily going to on a smaller screen. This mindfulness to the multitude of devices web site visitors may use reinforces the value of first considering the purpose (and length) of the content.

The question should be asked: Do desktop users necessarily want all that extra clutter? Are we just filling space and is it distracting from the main goal?

Content First is a better way to develop a web site. While it requires having the content and navigation largely complete before the design is even started, the  advantages when designing for multiple devices and enhanced SEO are worth making the change.

The term Responsive Design has very quickly become part of the web design conversation and as more high profile sites move from offering separate mobile and desktop sites to embracing the responsive method, it is set to redefine how sites are designed and managed.

Responsive Design was first mentioned by Ethan Marcotte writing for AListApart   In considering the problem of how to design for a multitude of devices, he looked back to the foundations of web design and some key ideas that had largely been discarded in favour of fixed grids and printed page-like layouts.

Responsive Design was originally described to have three core ingredients: a fluid grid layout, flexible images and media queries. Since then the idea has been expanded to include grids that have a number of fixed sizes under a more expanded term of Adaptive Design. The core idea is the same but it generally accepted that only designers look at a site and then shrink the viewing area to see if it’s responsive and having a smooth fluid transition isn’t necessary.

There are a number of excellent grid systems that predefine flexible grid dimensions.  Media queries are supported by most smartphones and all modern desktop browsers with JavaScript polyfills available for older versions of internet Explorer. Flexible images have proved to be a harder problem. It’s easy to scale down an image for mobile devices, however current network speeds and data plans make this a painful proposition where the image takes multiple seconds to download. The ideal solution of being able to define a picture as having multiple images optimised to various media queries could be years away in passing through the W3C standards process or being adopted by the various browsers. Currently most attempts at a solution are highly dependent on JavaScript, involve some less than ideal non-standard HTML and are potentially unmanageable in the current content management systems available. As mobile network speeds increase it will be less of an issue, but for now requires special consideration when developing a responsive site.

Even since the advent of the iPhone and the revolution in mobile devices that followed, most web designs have continued to follow the pattern of desktop design first and then find a way to make that work nicely on smartphones – if at all.

Just over two years ago, Luke Wroblewski coined the term Mobile First with a blog post predicting the rapid uptake in the use of mobile devices to surf the web. The predictions of mobile devices outselling PCs has already occurred and more recently the quarterly sales of the iPad (apple March ipad 3 launch) surpassed total PC sales of any other manufacturer.

Given that smartphone and tablet devices are not only outselling desktop PCs but are becoming the device of choice for quickly searching the web, why are we still designing for desktops first?

Obviously, we aren’t there yet. Mobile devices account for around 15% of web site enquiries and while this could be a result of sites not being mobile-optimised as to visitors not using their mobiles; until the majority of web sites make the move, users won’t either. Early optimisers however will retain the mobile visitors they receive and gain an advantage over their competitors. Google has separate mobile and desktop search crawlers so it may only be a matter of time before search rankings takes device interoperability into consideration.

From a designer perspective, the biggest issue is of how to present a design concept. Website concepts have generally been treated as print design with the web page and the paper page being analogous. This of course doesn’t work for the smaller form factor of a mobile where the display is more sticky note sized that page. As mobiles and tablets increase their share of site traffic designing for the multitude of device viewing sizes will become a must rather than an optional nicety.

Mobile usage is at an all time high and when you look around and take note, you will see everyone around you is on a mobile device. Standing in the shopping line, on the plane, waiting to be picked up at the cafe; simply everywhere you look mobile devices are being used and yet many businesses are failing to recognise the necessary to design for the mobile first.

For the last few years smart phones (mobile devices that are capable of running native or web-based applications) have been outselling desktop PCs and that trend will continue as more tablet devices are brought to market. This is requiring a complete rethink of businesses’ online marketing priorities.

In developing for desktops two main factors influenced the design: browser capability and monitor resolution. For many years Internet Explorer 6 was the baseline in capabilities and a fixed maximum display width of 800 and later 1024 pixels was the accepted standard for a site design. This has now changed where the most common display resolution of a mobile device is a tiny 320 pixels in width. Designing websites as if they were a fixed size printed brochure simply doesn’t provide an adequate experience for mobile users, forcing them to scroll horizontally and zoom in and out to read text or navigate.

What is now required is a rethink of how site content appears to visitors regardless of the device they use. For a start, the idea of providing the same pixel-perfect content and layout consistently across all devices or browsers needs to be discarded. In the mobile world this is simply an impossible goal.  Instead the design layout should adapt; shaping and flowing to display the content optimally for the capabilities of the device.

In targeting smartphone users, this may mean getting your message across with as little words, images and scrolling as possible to obtain the desired outcome; whether a direct phone call, email or contact or feedback via an online form. As the device’s display resolution increases additional or complimentary content can be dynamically displayed and the layout adapted; not just to a set fixed width but actually take advantage of wide screen monitors.

Taking a mobile web approach to both the design and the content makes this goal achievable and ensures you reach all users regardless of where they are located and what device they are using.