Escolar Documentos
Profissional Documentos
Cultura Documentos
URL: http://www.smashingmagazine.com/2011/03/29/designing-forthe-future-web/
Designing for the future Web. Thats a big subject. Where do we start when were talking about 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?
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
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 long term, the word we should use instead of mobile is portable.
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.
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 should be 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 to device, 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.
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.
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 information on 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:
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.
Bottom up conceptualizing males sense. Concentrate on the basic elements and let the context evolve around them. Image: Andrei Bocan
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.
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 portable devices. jQuery has an alpha of its mobile library available 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.
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
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.
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.
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 find out 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.
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.
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 F and 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 immediately lose 76.17 million potential users. Apps work best for big brands and services:
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 base after 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 the following websites. HTML5 development environments: CS5 HTML5 Support Pack (part of the CS5 11.0.3 Updater), plus tutorial Aptana 3 beta Device emulators:
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?