designing for the future web - smashing magazine
TRANSCRIPT
-
8/4/2019 Designing for the Future Web - Smashing Magazine
1/19
Designing For The Future WebURL: http://www.smashingmagazine.com/2011/03/29/designing-for-
the-future-web/
Designing for the future Web. Thats a big subject. Where do we start when were talkingabout something that isnt here yet?
In this article, well look at what the future Web might look like and how we can adapt our
current skills to this new environment, as well as how to create fluid websites that are built
around a consistent core and that adapt to the limitations and features of the device on which
they are viewed. Well also look at how our conceptual approach to designing websites
should evolve: designing from the simplest design upwards, and not from the richest website
down.
But before we get to that, lets start with a question. What do we mean by the future Web?
What Is The Future Web?
Back in the old days: analogous Google queries would have taken 30 days. Image: dullhunk
The one word that I hear more than any other at the moment is mobile. Mobile websites,
mobile devices, mobile apps: the list seems to go on and on. In fact, a large swell of opinion
-
8/4/2019 Designing for the Future Web - Smashing Magazine
2/19
says that the future Web is mobile.
But despite all this, focusing just on mobile isnt the answer.
The way we access the Internet is changing, of that we can be certain. And in the short term,
this does mean more mobile devices. But in the long term, we have to look a little wider.
Thomas Husson, senior analyst for Forrester, summed it up nicely in his 2011 Mobile Trends
report when he said, The term mobile will mean a lot more than mobile phones. In the longterm, the word we should use instead of mobile is portable.
Why Portable? How Has the Internet Changed toMake It So?
First, the physical infrastructure of the Internet is spreading rapidly, so that our ability to
access the Internet wherever we are grows daily. In the last 10 years, the number of Internet
users has grown by 444.8% and now includes 28.7% of the population. Thats nearly 2 billion
people, the majority of whom are in Asia. This growth is fuelled by investment in the
underlying hardware that gives us access to the Internet: millions and millions of computers,
millions of miles of cables, hundreds of thousands of wireless hotspots and, on top of all this,
growing 3G coverage around the globe (around 21% by the end of 2010 according to Morgan
Stanley).
Secondly, the way we use the Internet is changing. We are increasingly orienting our
online experience around services rather than search engines. Services such as
Facebook, Twitter and LinkedIn are becoming the hub for our online life, and we are
blending them to create our own unique Web of content: Facebook for our social life,
LinkedIn for our professional life, Spotify for music, Netflix for television and film. Were
seeing a very different form of information consumption here, one in which we expect
information to be pushed to us through our social circle, the people whom we trust. Were
moving away from the old paradigm of information retrieval, in which we are expected to
seek information using search engines and links.
Some of these services are tied to a single device, but increasingly they are available across
multiple platforms, including the desktop, mobile apps, Internet-enabled TVs and others.
Only last month, Samsung created the first tweeting refrigerator. Okay, that might not be the
greatest use of an Internet connection, but it is an example of how these services are starting
to spread out, away from the desktop and into our everyday lives. Evrythng, a start-up
currently in beta, is working on a platform that would give any physical object an online
presence, effectively making the Internet an ubiquitous entity containing data that can be
consumed anywhere and by anything.
Given these changes, its important that we not be overly rigid in our approach to creating
-
8/4/2019 Designing for the Future Web - Smashing Magazine
3/19
new Web content; we mustnt allow ourselves to think in terms of devices. Right now, we are
producing mobile apps and standard websites to deliver our services, but in a few years
time, we may be looking at a completely different landscape, one where knowing exactly
where and how our content is being viewed is impossible. Our content must be portable in
the sense that it can be displayed anywhere.
Media marketers have responded to the increasing use of mobile media. (Image:birgerking)
We may also find ourselves having to decide whether to concentrate on particular devices
and channels at the expense of audience numbers or to take a less tailored approach and
serve the widest spectrum possible.
Regardless of the route we take, the ability to deliver a consistent experience across
all channels is paramount, and our ability as designers and developers to understand the
options and deliver this consistency to our clients will be crucial.
So, this is the future Web, a mish-mash of devices and channels. Sounds good, doesnt it?
Lets go back to the key word, portability.
How Do We Design For The Portable Web?
Ask yourself, how would your latest project cope in the following scenarios:
-
8/4/2019 Designing for the Future Web - Smashing Magazine
4/19
1. The user is watching House on their new Internet TV. Hugh Lauries not on screen, so
the user decides to check their email. A friend has sent a link to your website, which the
user opens in a sidebar and views simultaneously with the program.
2. The user is on a train back from work, probably delayed somewhere, accessing your
website via 3G on an iPad
3. The user is on a clients website. They need to access your website to read an article,
but they have only a company-supplied Sony Ericsson with Opera Mini installed.
Each of these scenarios presents us with a different problem to solve: (1) an odd aspect-ratio
and browser combination, (2) a good display area but slow connection and (3) a very small
display area. And they are all very possible scenarios. The first Internet TVs by big brands
are now available from the big retailers. Opera Mini has over 85.5 million users and is the
dominant browser in many areas of the world; in fact, in Asia, Opera and Nokia (with their
combined 66.33% market share) are way ahead of the third-place browser (which is
BlackBerry, with a 9.81% share). And Deloitte has predicted that 2011 will be the year of the
tablet and that 50% of the computing devices sold will not be PCs.
Chances are that, unless youve really thought about it (and if you have, then you probably
dont need to read this article), your website wont work in all of those cases.
When designing for the portable Web, we need to be aware of three things: design, content
and integration. Approached in the right way, we can create websites that are accessible
across the widest user base and that provide a consistent experience regardless of access
method.
Consistent? How?
When faced with a multitude of devices to design for, all with varying specifications, the last
goal that might come to mind is consistency, and with good reason. And yet we shouldbe
striving to achieve consistency. Not in design but in experience.
Conceptually, we should be thinking about our design in two layers: the core content or
service, and then the display layer. The core of our website should not change from device todevice, and it should deliver a consistent experience. As we shall see shortly, this means that
we must ensure that elements such as the content and the navigation patterns work the same
way always.
-
8/4/2019 Designing for the Future Web - Smashing Magazine
5/19
The webs future consists of vast possibilities, considering them all is virtually impossible.That is why we need consistency! Image:Juhan Sonin
Lets say our user is at work and is browsing our website on an iPad. They work through the
carefully designed navigation hierarchy to get to the piece of content that they want to read,
but they are interrupted by a phone call and have to stop browsing. Later, on the train home,
they access the website again, this time via their phone. The visual elements of the design
will be differentby necessitybut crucially, the routes they took to find the content should
be exactly the same, as should the content they read when they got there.
This consistency of experience is what will allow us to create great websites for the portable
Web and a complete user experience.
Where Do I Start? And How Will I Know When I GetThere?
If a single consistent experience is our goal, this begs the question, should we create a mobile
website that scales up or a desktop website that degrades?
The answer is neither. We should try to create a single design that can be used across all
devices without alteration. But in practice, at least for the moment, we should start with the
simplest website and work up.
Why? Lets go back to the introduction. On the portable Web, we have no control over how
our content will be used or viewed, and as such we must throw out the idea that we are
designing for a particular device or device size. We must approach the design of our website
-
8/4/2019 Designing for the Future Web - Smashing Magazine
6/19
in a different way, one in which we create the core content or service first. After all, this will
define our website in the end, not the visual elements. This may seem difficult initially,
but as we shall see, many of the best practices for desktop website development hold true for
the portable Web, especially with regard to content structure.
To recap, here are the key rules to bear in mind when working through a design for the
portable Web:
1. The website should be available to as wide an audience as possible;
2. The website should contain the same content wherever it is viewed, where feasible;
3. The websites structure should be the same wherever it is viewed;
4. The content should be displayed in a manner that is appropriate to its environment.
A website that meets all of these criteria would fit snugly in the future portable Web. But
how do we go about making our websites do this?
Designing For The Portable Web
Design Using Web Standards: That Means HTML5
The good news is that the two most common browser engines on mobile,
Webkit and Opera, both support HTML5 very well; Webkit has supported
HTML5 at least partially since November 2007.
Using standard and descriptive mark-up throughout our websites will have the
benefit of delivering consistent output across most devices. And the extended capabilities of
HTML5 to deliver media, animation and local storage make it a great choice for mobile
applications.
These three abilities allow HTML5 websites to reproduce behaviours usually associated with
native mobile applications, closing the experience gap between the two. Video can now be
played natively through HTML5 using the video tag, while animations can be played using
the HTML5 canvas. Finally, local storage allows a website to store database-like informationon the device, allowing for fully functional offline use of the website.
YouTube, Netflix and Gmail all have HTML5 versions of their websites that are designed for
the mobile experience and that take advantage of the new capabilities of HTML5. Theyre a
great starting point for any developer who wants to see what can be achieved.
HTML5 is now ready to be used for development, and theres no reason why you cant start
right away. Many excellent resources and tutorials are available to help you get started:
-
8/4/2019 Designing for the Future Web - Smashing Magazine
7/19
Dive into HTML5
An overview of the HTML5 standard and a great starting point.
HTML5 Demos and Examples
A series of demonstrations showing the capabilities of HTML5, with source code.
HTML5 Gallery
A showcase of websites created in HTML5.
To get started using HTML5 in your projects, you can take advantage of any one of the
number of development environments that support it. The most complete implementation is
through Adobes Dreamweaver CS5; an HTML5 support pack can be downloaded that
extends the built-in editor. Aptana also supports HTML5 in its beta of Aptana Studio 3.
Links are provided at the end of this article.
Start Simple, Work Up
Thinking portable means thinking clean and simple. The wide variation in screen sizesfrom
a 40-inch LCD running at 1920 ! 1080 pixels to a portrait-orientation mobile screen at 320
! 240 pixelsmeans that we must create designs that are scalable and adaptive. We must
also be aware that someone may be interacting via a remote control or a fat stubby finger on
a touchscreen. The simpler the design, the more adaptable it will be.
Bottom up conceptualizing males sense. Concentrate on the basic elements and let the
context evolve around them. Image:Andrei Bocan
-
8/4/2019 Designing for the Future Web - Smashing Magazine
8/19
Create your basic website structure first and add only your core styles, the ones that are
applicable to all devices and layouts. Starting simple gives us a great base on which to build.
Essentially, we are starting from the most basic experience, available on even the smallest
mobile device, and working our way up to the more capable desktop browsers.
Using @media queries in the CSS will enable your website to recognize the additional
capabilities of desktop browsers and scale up for these environments, presenting a fuller and
more interactive experience where possible.
A word of caution and a reason why we dont work the other way around by degrading a
desktop website to a mobile one: @media queries are not supported by every mobile device.
Rachel Andrews provides a good overview of @media queries here on Smashing Magazine,
albeit working from desktop to mobile, rather than the other way round.
Forget About Proprietary
Whatever you do, stay away from the proprietary technologies, because thats the one way to
guarantee an inconsistent experience. Flash and Silverlight as development platforms are
living on borrowed time. Microsoft has already indicated that it will discontinue Silverlight
development to concentrate on HTML5, while Flash is being used mainly as a game
development platform and video-delivery mechanism. If we are going to create truly cross-
platform websites that display consistently across all devices, then Flash and Silverlight are
not wise choices because we cannot be certain that they will be installed on the users device.
Not to say that Flash doesnt have its place; as a platform for Web-based games, it is
currently unrivalled. Its about choosing the best technologies for the job at hand.
Be Wary of JavaScript for the Time Being
The bad news is that we may have to sacrifice some of the things we take for granted now.
We must learn to design for unknown screen sizes and ratios and allow content to flow as
required. Think less about design structure and page layout and more about content
structure.
We may have to forgo using JavaScript and AJAX (both staples of desktop development) to
create more involving user experiences, because some lower-end devices will not have the
hardware muscle to deal with complex libraries. Trimming page weight will also be a priority
because we cannot be certain that end users will have broadband-speed access to the
Internet, so large libraries will be unacceptable overhead.
This is particularly important in light of the recent hash bang trend, started with Gawker
-
8/4/2019 Designing for the Future Web - Smashing Magazine
9/19
Medias controversial redesign of its websites. The websites (including Gizmodo, Lifehacker
and Gawker) present a more application-like experience to users, but do so by relying on
JavaScript for content delivery. In effect, the websites consist of a single page that is loaded
with dynamic content on request, instead of the multiple pages that they consisted of
previously. Any users whose browsers cannot process the JavaScript, for whatever reason,
will be unable to browse the website; they are greeted with only a blank page.
However, a number of libraries are being developed to be lightweight and usable on portabledevices. jQuery has an alpha of its mobile libraryavailable for testing. The project has the
backing of industry players such as BlackBerry, Mozilla and Adobe, so it is worth keeping an
eye on.
JavaScript support will mature as devices worldwide move onto more modern platforms and
as older devices are taken out of service. But for the time being, a conservative approach to
its use will mean a wider potential audience for your work.
Test, Test, Then Test Again
On the portable Web, theres a good chance we wont be able to test against every possible
platform on which our content will be viewed. But that doesnt take away the need to test.
And test we must.
Opera Minis emulator lets you test your website in a virtual browser.
Buying a device from each platform would be prohibitive for the majority of designers. But
alternatives are available. For most of the main platforms, device emulators are available
that simulate the browsing experience. See the resources section at the end of this article for
-
8/4/2019 Designing for the Future Web - Smashing Magazine
10/19
links.
At the other end of the scale, a paid service is available from DeviceAnywhere, which enables
you to test your website on over 2000 handsets.
Unfortunately, there are no Internet TV emulators so far, but Google has released a guide to
designing for Google TV.
Finally, of course, we mustnt forget to test on our desktop browsers, too. The aim of
designing for the portable Web is to create a single experience across as wide a set of devices
as possible. Just because users are able to browse the Web in many ways doesnt mean they
will stop using their desktop, laptop or netbook. Use this to your advantage when testing
simply by resizing your browser to ensure that your design scales and flows appropriately.
The emulators will provide you with an exact rendering of your website on other devices.
The Ugly Duckling?So, does the portable Web defy beauty and kick sand in the face of outstanding design? Of
course not. Great design is not only about visual imagery, but about presenting information
clearly, which involves hierarchy and importance through innovative and well-thought out
typography, layouts and navigation. Which brings us to
Content For The Portable Web
Content is once again king. The rise ofQuora should be enough to convince anyone of that; it
is a service based solely on content. On the portable Web, this is doubly true. By paring down
the design elements, you leave even more focus on the content.
Understand Whats Important
Identifying what is most critical to users should be your first task when developing a
portable website. There may not be room for complex navigation, especially on smallerscreens, so keep it simple. Compare the mobile and desktop versions of YouTubes start
page:
-
8/4/2019 Designing for the Future Web - Smashing Magazine
11/19
YouTubes standard home page.
YouTubes HTML5-based home page works brilliantly on small screens.
-
8/4/2019 Designing for the Future Web - Smashing Magazine
12/19
Create a Solid Information Hierarchy
Structuring our content is important, for both readability and SEO. Understanding the
content that we are presenting is essential to creating clear information hierarchies that
guide users through it.
Map the users possible journeys through your content. There should be a clear route toevery piece of content, starting with the top-level information categories and getting more
granular with each click.
John Lewis mobile website has a clear information hierarchy to aid navigation.
A good example of this is the mobile website of John Lewis, a UK-based department store.
From the home page, you can easily drill down to each department, and from there to
individual products. Its simple, and it also means that the amount of information on any
given page is not overwhelming and that you know exactly where you are in the hierarchy at
all times.
Keep Content Available
-
8/4/2019 Designing for the Future Web - Smashing Magazine
13/19
Even if users arent on a desktop, dont treat them as second-class citizens. Provide as much
content as is feasible. And for what content there is, present it appropriately. Remove the
following:
Superfluous images
If an image isnt essential to the content, get rid of it.
Unsupported file formats
Dont include Flash or even the Flash placeholder if the file likely cant be played.
Unnecessary text
Good desktop copy doesnt necessarily make for good portable copy. Is that second
customer testimonial absolutely necessary? If not, remove it.
While we want to remove unnecessary content, we dont want to remove too much. In the
example below, we have a simple accessible website, but one that has no depth. The first
level of information is presented well, but the headings for the companys services at the
bottom of the page should link to the next level of information. The way it is, if I want to findout more, Im forced to visit the non-optimized website. This is a poor user experience,
because it makes finding what I need more difficult.
Sapient Nitros mobile website displays really well but cuts a lot of information from the
full website.
-
8/4/2019 Designing for the Future Web - Smashing Magazine
14/19
Integration And The Portable Web
If services are to become the new hub of the Internet, keeping our websites linked to these
services becomes paramount.
Keep It Modular
Services will come and go (although the main ones will certainly remain for a long time yet
yes, Im looking at you, Facebook), so keep your design modular. Being able to integrate with
new services as they come online and to prune away those that have fallen by the wayside
will ensure that your content is available to the widest possible audience.
The goal is to make it easy to push your content across multiple services and thus integrate
your content into the fabric of the Web. Primarily, this will be through search engine
optimization and social sharing.
Make Your Content Search-Engine Friendly
While the way people access content is becoming more social and less search-based, search
engines are still a massive source of traffic. Keeping your content formatted for easy retrieval
is a must. Quora has done this extremely well, leading to high rankings across the major
search engines and generating traffic for its next-generation Q&A service. SEO may be old hat
for some, but as quality of content becomes increasingly important, it will gain new life.
-
8/4/2019 Designing for the Future Web - Smashing Magazine
15/19
Quora plays nice with search engines, with great results.
Make Sharing Easy
SEO is important, but so are direct connections to other services through OAuth, OpenGraphand OpenID. If this isnt an option for you, then at the very least give users some way to
share your content. Services like AddThis and ShareThis make it simple to add sharing
capabilities; take advantage of them. A single tweet can generate a lot of activity. Of course,
modern development and content platforms such as WordPress have this functionality built
in.
Bringing these three elements together will create websites that are discoverable,
consistent and usable. Just one question now is raising its ugly head
What About Apps? Arent They The Way Forward?
Apps are big business. Gartner forecasts that mobile app store revenue will top
$15 billion in 2011. Its no surprise that Google, Microsoft, Nokia and others are
trying to get in on the act. But just because app stores are commercially
successful, does it mean they should be our first point of call when designing for
the future Web?
-
8/4/2019 Designing for the Future Web - Smashing Magazine
16/19
Lets look at why one might want to create an app:
Easy to purchase, install, use and throw away
Apps are so usable that even your granny could use them. Installing them on a
smartphone is a smooth process that requires minimal involvement from the user. And
when youve had enough, you simply delete it and no trace of the app remains. This is a
great user experience, period. Thats why Apple is now pushing the same concept for
full-blown Mac apps through the Mac App Store. Apps also provide, in most cases, a
good user experience, with their native controls and design patterns.
Brand association and lock-in
Apps are designed to do one thing and do it well. The most successful apps are exercises
in brand association: I want to search the Web, so Ill use the Google app, or I want
to check up on my friends, so Ill use the Facebook app. You experience the brand
through the app. I could easily use the Safari browser on the iPhone to access both
Facebook and Google, but the apps make it easy for me. Im locked into the experience,
which is great for the companies because their brands get planted square in the middle
of my home screen; in this case, a big Fand a big G.
Money
The most attractive thing about apps to many companies is the profit. Apples App
Store has shown that monetizing content is possible. Even for independent developers,
making a lot of money in a relatively short period of time is possible.
Whats remarkable about all of these points is that they have nothing to do with information
consumption. They are all about brand and user experience. However, there are also reasons
why you should think twice:
Apps are information silos:
Apps do what they do well. But they dont do a good job of bringing in the wider Web.
Want to follow a link? You might be able to view the page in app, but youre just as
likely to get thrown out into the browser. Thats not a good user experience. You also
lose control of the users actions and their focus on your content.
Apps are platform-specific:Writing an app automatically ties you to the platform you are writing it for. This
immediately limits your potential audience. Smartphone penetration is growing but is
still a small segment of the overall Internet-enabled phone market. To take the US
market as an example, even though 31% of the population have smartphones, only 6%
of the population have iPhones. Thats 19 million out 307 million. If you released an
iOS-only app in the US, you would immediatelylose 76.17 million potential users.
Apps work best for big brands and services:
-
8/4/2019 Designing for the Future Web - Smashing Magazine
17/19
Regardless of how good the app is, you have to find a way to get it discovered among
the tidal wave of apps that are released into app stores every day. Big brands can push
their apps through their existing Web presence, but thats a lot more difficult for
smaller brands. And unless you can generate a lot of relevant content regularly, as the
major services do, your app will be consigned to the trash very quickly. Research by
Pinch Media (now Flurry) shows that free apps are used primarily in the first 10 days
following installation, and then rapidly trail off to around 2% of the installation baseafter 70 days. Paid application usage drops off even more quickly.
Mobile users prefer browsers over apps:
A study by Keynote Systems in October 2010 shows that users prefer mobile
websites for nearly all types of Web content. The only categories in which apps
came out on top were social networking, music and games, which makes sense because
these apps usually take full advantage of a native platforms capabilities.
So, if we want to create something with more permanence, that can evolve at a speed that
suits us and our clients, then we need to look away from mobile apps and towards the mobile
Web. We must execute good design, thoughtful content and solid integration to tie our
portable websites into the social infrastructure of the Web.
Conclusion
The fully portable Web may not be here right now, but it will be before we know it. As it was
with the browser wars, developers and designers must re-educate themselves to become the
driving force behind these changes and be brave enough to let go of current design thinking
and work to set new standards. Understanding how to create online presences that take full
advantage of all platforms and preparing for the future shape of the Web will position us not
just as technicians, but as people who can provide real value to our clients.
Resources
The HTML5 editors and device emulators mentioned above can be downloaded from thefollowing websites.
HTML5 development environments:
CS5 HTML5 Support Pack (part of the CS5 11.0.3 Updater), plus tutorial
Aptana 3 beta
Device emulators:
-
8/4/2019 Designing for the Future Web - Smashing Magazine
18/19
Android
Opera Mini
Apple iPhone (via iOS SDK)
Windows Mobile (look for the latest Windows Phone Developer Tools)
BlackBerry
Nokia Mobile Browser
(al) (ik)
James Gardner
James Gardner is a digital strategist working at Volume, one of the largest independent B2B
digital marketing agencies in the UK. As Head of Innovation, and also with responsibility for
Information Services, he deals with everything from social media to cloud computing,
Storage Area Networks to Virtualization. In his spare time he can be found making cars out
of Lego - with his two kids obviously - or dreaming of a walk on part in a Romero zombie
movie.
Best of Design:
Responsive Design
Photoshop
Typography
Mobile Design
Usability and UX
Design Legacy and Art
Best of Coding:
JavaScript & jQuery
WordPress Techniques
Back-End & Administration
HTML5 Tutorials
CSS, CSS3
Bored?
-
8/4/2019 Designing for the Future Web - Smashing Magazine
19/19