http://bit.ly/uWvfzF
Websites are ever increasingly being viewed on mobile devices. The total percentage of all website visits in the US in August of this year was 6.8%. Internet enabled phones accounted for roughly two thirds of this traffic with tablet devices accounting for the lion’s share of the remainder.(stats per Comscore) Global non-PC internet usage was 3%in 2010 but will reach 15% by 2015.(Cisco Visual Networking Index)So what does this paradigm shift in the nature of our online behavior hold in store for web developers?
One of the early effects has been the web development community’s recent
shift away from usage of Adobe Flash driven websites. This has been
largely attributable to increased takeup of the iphone and ipad and
Apple’s longstanding refusal to support Flash player on those devices. The
reasons for this have been widely well documented.
But even in devices such as Android whose most recent incarnations support
Flash Player, the interactive user experience is lessened in a ‘mouse-less
environment’.
This aside, how websites display in the mobile realm is sure to become an
ever growing concern of both site owners and consumers alike. With growing
usage there will come growing attention. As a result web developers who do
not jump on board with optimizing their site builds for both PC and mobile
devices will get left behind.
If one is to look at a random selection of websites on various devices and
operating systems, a wide range of display quality variations will soon be
detected.
Illegible text, distorted images and skewed tables among other things are
some of the device type discrepancies that may be noted.
So what sorts of techniques can be adopted to ensure optimal display of
any given website regardless of device type?
There are a few different approaches been used:
1.Develop separate site versions for mobile devices and PCs. This involves plenty of extra coding- i.e. two sites for the price of one. However it can produce excellent results with a script running which decides which version the viewer will see. This allows for a rich web experience even on a small screen.
2. Define the site for mobile devices using CSS. This can be a much simpler solution to code when implemented correctly. This can often involve just showing the left portion of the site on a phone without a noticeable break- horizontal scrolling can be used to view the rest of the site in smaller screen environments.
3. Utilize responsive design techniques. This involves effectively slimming down the website as the resolution decreases. Text aggregates into thinner and thus readable columns, while images also ‘go on a diet’. This can look great when done well.
4. Minimize the site down to bare bones by removing images and style features. This is probably the easiest of all these approaches to implement, but has its pros and cons as they all do.
As the ‘mobile web’ continues to gain traction, we will doubtless see other methods added to this list and further development of those methods listed above. To ensure a successful future, those making a living in the World of Web Design should sit up and take note.
Websites are ever increasingly being viewed on mobile devices. The total percentage of all website visits in the US in August of this year was 6.8%. Internet enabled phones accounted for roughly two thirds of this traffic with tablet devices accounting for the lion’s share of the remainder.(stats per Comscore) Global non-PC internet usage was 3%in 2010 but will reach 15% by 2015.(Cisco Visual Networking Index)So what does this paradigm shift in the nature of our online behavior hold in store for web developers?
One of the early effects has been the web development community’s recent
shift away from usage of Adobe Flash driven websites. This has been
largely attributable to increased takeup of the iphone and ipad and
Apple’s longstanding refusal to support Flash player on those devices. The
reasons for this have been widely well documented.
But even in devices such as Android whose most recent incarnations support
Flash Player, the interactive user experience is lessened in a ‘mouse-less
environment’.
This aside, how websites display in the mobile realm is sure to become an
ever growing concern of both site owners and consumers alike. With growing
usage there will come growing attention. As a result web developers who do
not jump on board with optimizing their site builds for both PC and mobile
devices will get left behind.
If one is to look at a random selection of websites on various devices and
operating systems, a wide range of display quality variations will soon be
detected.
Illegible text, distorted images and skewed tables among other things are
some of the device type discrepancies that may be noted.
So what sorts of techniques can be adopted to ensure optimal display of
any given website regardless of device type?
There are a few different approaches been used:
1.Develop separate site versions for mobile devices and PCs. This involves plenty of extra coding- i.e. two sites for the price of one. However it can produce excellent results with a script running which decides which version the viewer will see. This allows for a rich web experience even on a small screen.
2. Define the site for mobile devices using CSS. This can be a much simpler solution to code when implemented correctly. This can often involve just showing the left portion of the site on a phone without a noticeable break- horizontal scrolling can be used to view the rest of the site in smaller screen environments.
3. Utilize responsive design techniques. This involves effectively slimming down the website as the resolution decreases. Text aggregates into thinner and thus readable columns, while images also ‘go on a diet’. This can look great when done well.
4. Minimize the site down to bare bones by removing images and style features. This is probably the easiest of all these approaches to implement, but has its pros and cons as they all do.
As the ‘mobile web’ continues to gain traction, we will doubtless see other methods added to this list and further development of those methods listed above. To ensure a successful future, those making a living in the World of Web Design should sit up and take note.
