EverWeb Codebox logo

EverWeb TriSite

Tablet Version
Phone Version

Designing For Computer & Mobile Devices

Mobile First

Many website designers create the full site design and then, almost as an afterthought, make a version for smart phones. Most of them fail to consider that a large and growing percentage of the potential visitors are using tablet devices and that these full site design are hopelessly inadequate for viewing on a device like an iPad.
If they took the time to look at their website visitor stats, most high street retailers and service providers would see that more of their potential customers are using touch devices than computers to access their site. There is quite a large section of those who surf the internet who don't even own a computer and this number is growing.
So why spend all that time creating a version of the website that a decreasing number of visitors will use?
A website designed for viewing on a tablet device works perfectly well for those who view it on a computer so why not start with designing for mobile devices first?
Devices fall into three categories - computer, tablet and smart phone - although the lines are getting blurred among touch devices which led to the use of the word "Phablet".

Introducing Touch Widgets

Designing and constructing one website can be challenging and time consuming enough without have to create three different versions. So, how to speed up this process?
This TriSite example has three different versions of the site created on one project file - each with its own master page with the header, navigation and footer content.
The content is exactly the same for each version and is created in easily transportable content blocks using the Touch Widgets. These widgets are specifically designed for touch devices but, in most cases, are perfecly suited to the full site version too.
Once the content is set up for one version of the site, it can be copied and pasted to another only requiring an adjustment to the width and perhaps the addition or removal of some styles.

How To Start

Which version to start with?
In most cases, the obvious starting point is the smart phone version of the site.
This version will contain all the basic, important information with no extra "designer ego" stuff.
It is a lot easier to create narrow content blocks and then expand them and add extra styles for wider pages than vice versa.
In a lot of cases, the smart phone version of the site IS the most important one depending on the type of business it showcases.
Next comes the tablet version which will use all the same content with perhaps just a change in the navigation type.
Last - and least important - is the full site. In a lot of cases this version isn't even required unless time and money is of no consequence.

computer devices

Page Items & Touch Widgets

This page has only seven items to be transfered from one version of the site to the others.
It uses the Touch HTML Heading, Image, Link Tab and Text widgets.
Click the buttons to see them.