Designing For The Future Web

Advertisement

Designing for the future Web. That’s a big subject. Where do we start when we’re talking about something that isn’t here yet?

In this article, we’ll 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. We’ll 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, let’s start with a question. What do we mean by the “future Web”?

What Is The Future Web?

1
Back in the old days: analogous Google queries would have taken 30 days. Image: dullhunk2

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 isn’t 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 Trends3 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.

Why Portable? How Has the Internet Changed to Make 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 population4. That’s 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 20105 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. We’re 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. We’re 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 refrigerator6. 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. Evrythng7, 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, it’s important that we not be overly rigid in our approach to creating new Web content; we mustn’t 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.

8
Media marketers have responded to the increasing use of mobile media. (Image: birgerking9)

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, doesn’t it? Let’s 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:

  1. The user is watching House on their new Internet TV. Hugh Laurie’s 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 client’s 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 users10 and is the dominant browser in many areas of the world; in fact, in Asia, Opera and Nokia (with their combined 66.33% market share11) 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 tablet12 and that 50% of the “computing devices” sold will not be PCs.

Chances are that, unless you’ve really thought about it (and if you have, then you probably don’t need to read this article), your website won’t 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.

13
The web’s future consists of vast possibilities, considering them all is virtually impossible. That is why we need consistency! Image: Juhan Sonin14

Let’s 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 different—by necessity—but 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 Get There?

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? Let’s 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 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 website’s 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

HTML5 Logo15 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. They’re 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 there’s no reason why you can’t start right away. Many excellent resources and tutorials are available to help you get started:

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 Adobe’s 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 sizes—from a 40-inch LCD running at 1920 × 1080 pixels to a portrait-orientation mobile screen at 320 × 240 pixels—means 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.

19
Bottom up conceptualizing males sense. Concentrate on the basic elements and let the context evolve around them. Image: Andrei Bocan20

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 don’t 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 queries21 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 that’s 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 development22 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 user’s device. Not to say that Flash doesn’t have its place; as a platform for Web-based games, it is currently unrivalled. It’s 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 Media’s 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 library23 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.

Test, Test, Then Test Again

On the portable Web, there’s a good chance we won’t be able to test against every possible platform on which our content will be viewed. But that doesn’t take away the need to test. And test we must.

Opera Mini - Simulator
Opera Mini’s 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 DeviceAnywhere24, 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 TV25.

Finally, of course, we mustn’t 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 doesn’t 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 of Quora26 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 What’s 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 smaller screens, so keep it simple. Compare the mobile and desktop versions of YouTube’s start page:

YouTube's standard homepage
YouTube’s standard home page.

YouTube's HTML5-based mobile homepage
YouTube’s HTML5-based home page works brilliantly on small screens.

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 user’s possible journeys through your content. There should be a clear route to every piece of content, starting with the top-level information categories and getting more granular with each click.

John Lewis - Mobile site
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. It’s 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

Even if users aren’t on a desktop, don’t 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 isn’t essential to the content, get rid of it.
  • Unsupported file formats
    Don’t include Flash or even the Flash placeholder if the file likely can’t be played.
  • Unnecessary text
    Good desktop copy doesn’t 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 don’t 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 company’s 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, I’m forced to visit the non-optimized website. This is a poor user experience, because it makes finding what I need more difficult.

Sapient Nitro - Mobile Site
Sapient Nitro’s mobile website displays really well but cuts a lot of information from the full website.

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, I’m 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.

Quora - SEO results
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, OpenGraph and OpenID. If this isn’t 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? Aren’t They The Way Forward?

Apple App Store Icon27 Apps are big business. Gartner forecasts that mobile app store revenue will top $15 billion in 201128. It’s 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?

Let’s 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 you’ve had enough, you simply delete it and no trace of the app remains. This is a great user experience, period. That’s 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 I’ll use the Google app,” or “I want to check up on my friends, so I’ll 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. I’m 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. Apple’s 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.

What’s 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 don’t 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 you’re just as likely to get thrown out into the browser. That’s not a good user experience. You also lose control of the user’s 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. That’s 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 that’s 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 201029 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 platform’s 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 Web30. 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:

Device emulators:

(al) (ik)

Footnotes

  1. 1 http://www.flickr.com/photos/14829735@N00/3389581452/
  2. 2 http://www.flickr.com/photos/14829735@N00/3389581452/
  3. 3 http://blogs.forrester.com/thomas_husson/11-01-25-2011_mobile_trends
  4. 4 http://www.internetworldstats.com/stats.htm
  5. 5 http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
  6. 6 http://mashable.com/2011/01/09/samsung-tweeting-refrigerator/
  7. 7 http://evrythng.net/
  8. 8 http://www.flickr.com/photos/birgerking/5154192297/
  9. 9 http://www.flickr.com/photos/birgerking/5154192297/
  10. 10 http://techcrunch.com/2011/01/20/opera-mini-had-over-85-5-million-users-in-december-up-84-percent-from-2009/
  11. 11 http://gs.statcounter.com/#mobile_browser-as-monthly-201001-201012
  12. 12 http://www.crunchgear.com/2011/01/20/deloitte-2011-will-be-the-year-of-the-tablet-say-goodbye-to-your-laptop/
  13. 13 http://www.flickr.com/photos/38869431@N00/2931349349/
  14. 14 http://www.flickr.com/photos/38869431@N00/2931349349/
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2011/02/HTML5_Badge_1281.png
  16. 16 http://diveintohtml5.org/
  17. 17 http://html5demos.com/
  18. 18 http://html5gallery.com/
  19. 19 http://www.flickr.com/photos/clearstudio/5085948027/in/photostream/
  20. 20 http://www.flickr.com/photos/clearstudio/5085948027/in/photostream/
  21. 21 http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
  22. 22 http://gigaom.com/video/microsoft-giving-up-on-silverlight-joining-html5-party/
  23. 23 http://jquerymobile.com/
  24. 24 http://www.deviceanywhere.com/
  25. 25 http://code.google.com/tv/web/docs/design_for_tv.html
  26. 26 http://www.quora.com
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2011/02/apples-app-store-icon-o.jpg
  28. 28 http://techcrunch.com/2011/01/26/mobile-app-store-15-billion-2011/
  29. 29 http://www.emarketer.com/Article.aspx?R=1008010
  30. 30 http://mobileanalyticssimplified.com/post/439404358/the-future-is-the-mobile-web-not-the-mobile-app
  31. 31 http://www.adobe.com/support/dreamweaver/downloads_updaters.html
  32. 32 http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt1.html
  33. 33 http://www.aptana.com/products/studio3
  34. 34 http://developer.android.com/guide/developing/tools/emulator.html
  35. 35 http://www.opera.com/mobile/demo/
  36. 36 http://developer.apple.com/
  37. 37 http://msdn.microsoft.com/en-gb/windowsmobile/bb264327.aspx
  38. 38 http://www.blackberry.com/developers/downloads/simulators/
  39. 39 http://www.forum.nokia.com/info/sw.nokia.com/id/db2c69a2-4066-46ff-81c4-caac8872a7c5/NMB40_install.zip.html

↑ Back to topShare on Twitter

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.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Jojo Mathews @Around Social

    March 29, 2011 4:05 am

    What a coincidence ! I just searched for a better post on “Future of web” and on the same time you have published it ! That’s a WOW !

    I liked and agreed with the term “Portable Web” … that’s the future….

  2. 2

    Hi there!
    I am currently studying webdesign and I always thought about scaling my sites down for mobile, but you’re right. The other approach makes a lot more sense.

    Thanks! :)

  3. 3

    Great article!
    I reckon consistence is the key. Personally I don’t like mobile versions. First think I do when I land on mobile version of a website is to look if I can switch to desktop version. Somehow I always have the feeling that content is limited and the experience I get is too different to the standard (Desktop) version I’m used to.

    My personal take on this is that mobile devices are giving us better and better experience, faster connections, better quality screens, more processing power. Apple and Google both know that some content (often high quality) on internet will never be optimized for mobile, as it is made by people who are expert on their subjects but not necessarily on web design. And yes websites quality is going up, especially thanks to web templates but the progress is nowhere close to that of mobile devices.

    Make websites light, simple, flexible and standard friendly and let the mobile industry do the rest.

    • 4

      You make a good point. The amazon mobile version is incredible in comparison to their main website; maybe companies should look to make a mobile version of their website FIRST and use it as an exercise on how they could make their main website much more simple.

      I do think that a lot of the time, when people are designing a website for a desktop browser, they are looking to fill up the space they have in front of them, rather than looking at what people actually need and prioritising this. This happens with large and small companies alike.

  4. 5

    James, good article, however your information about silverlight is incorrect. Microsoft are not giving up on Silverlight, SL5 is just around the corner. The only thing different is the direction Microsoft are taking Silverlight, compared to HTML5.

  5. 6

    Good, slightly daunting stuff.

  6. 7

    Great article!

  7. 8

    Thomas Verhulst

    March 29, 2011 5:47 am

    Excellent article. This show how it is important to think mobile right from the start! This article showed me the light on some very important decisions I have to make! Thanks

  8. 9

    I disagree with this statement:

    “We should try to create a single design that can be used across all devices without alteration…”

    I expect more from a website when I view it on a laptop or desktop computer vs. on a mobile. It would be a horrible user experience to find a website while viewing it from a laptop or desktop computer to be styled as a mobile site.

    • 10

      @Aaron, right on. And for similar reasons I disagree with: “The website’s structure should be the same wherever it is viewed.” The website’s (and I’m not sure that term is even applicable as internet appliances change the way they acquire content) structure should be adaptive to it’s environment (e.g. device, bandwidth etc.). The content a user wishes to view on her phone will, in most cases, be largely different from what she is interested in seeing in the comforts of her home, or office where screen real-estate, bandwidth, and most likely time are more abundant.

      Great article, but I do take exception with this point.

      • 11

        Aaron, Shane,

        Thanks for your comments. Structure, for me, is all about how the site fits together. It doesn’t include design and there may be elements of content that are unsuitable in terms of a very small device.

        But, whichever site I go to – desktop, mobile, TV – I should still be presented with the same structure. I should still navigate content in the same way, find the same pages in the same places.

        I agree with you that viewing a mobile designed website on a desktop browser is horrible! Better that we adapt out design up to accommodate the available features whilst still presenting , at heart, the same site.

        James

        • 12

          Sorry to interrupt but I have a (most probably silly) question: when you mention navigating the content in the same way, I can’t help thinking this is a naive effort to reach a utopia, since all the devices our audiences use are interacted with different user inputs. For example the hover state in the css is meaningless for iPad users. Then again, a link that is easily accessible by a mouse click may require a whole line to touch on iPhone in order to be easily accessible, etc.

          Take YouTube example in the article, do you consider YouTube achieved what you propose? Because the two experiences as in look & feel, seemed pretty different to me.

          I believe such differences are the obstacles that will prevent us to use a common navigation convention. I am not sure if I understood what you meant by “navigating the content in the same way” correctly but am I wrong thinking as I mentioned above?

          • 13

            I was thinking of navigation structure in the sense of how we move around a site. Yes, mobile and desktop may look different visually, but they should both be based around the same core structure. For example, if I switch from one to the other, I should be able to find a piece of content using a familiar and repeatable set of actions.

            Utopia is – for me – a clear and consistent user experience.

            If we can enhance that experience using native device abilities, that’s great. This is the adaptive part of the experience.

            BTW, I don’t think that the YouTube example is 100% successful; I think the desktop version is a little overcomplicated and could learn from the mobile version.

  9. 14

    In your article you mentioned stay away from proprietary technology. I’m a designer and I have yet to see a standard on the web. You further make the comment that you need to test test test. If the web was such an organized standard why would you need to test so much. In my opinion using Flash or other like technologies provides a consistent experience unlike the web standards we currently conform to. Think about how Acrobat has changed our lives. If we abandoned this proprietary software and went with a “standard” would we be better off. Some may say yes, but I would say from a business perspective, No. This single application allows anybody to create rich interactive content (no coding) and share it with anybody and it remains consistent without regard for the browser or OS all you need is the plugin. And if you wanted to make the bandwidth argument, well lets look at the amount of Java and other code you have to download remotely just to get a page to work. There no shortage of solutiosn but by removing tools from my toolbox that solves nothing except for the people that want to maintain there position.

    Can you image if each software developer had to make every copy of their software compliant on all OS platforms new and old. You think you have buggy and expensive software now. I equate that to the web standard. Think about it you have five major browsers and within each browsers multiple versions. Lets say there are five major browsers and five version within, that’s 25 separate host applications that have to be accounted for. That’s not a standard that is a quagmire.

    Sorry for the vent but the web has become a very unfriendly environment for designers IMHO.

    • 15

      As a developer, I want to minimise the cost of development – which means giving every customer the same solution, or at least as close to the same solution as possible. Our idea of a consistent experience is one that is the same on all platforms.

      But as a consumer, my idea of a consistent experience is one that is consistent to my platform. On the desktop, say, that means implementing the standard keyboard shortcuts of the OS I’m using. On mobile – well one thing I liked about the Facebook App on the iPhone is the way it copied the ‘delete message’ slide-left gesture from Mail.

      Is that an iOS specific convention? I have no idea, and it’s certainly not consistently implemented across applications. But I think this will be increasingly important to understand, particularly if different UI conventions (like WinMobile 7) become successful.

      The question that I always think the cross-platform developer needs to keep in mind is ‘why is my customer using this platform – and is their any financial incentive for me to better cater to them?’. In a lot of cases, the answer will be no.

      (But I think it was John Gruber who pointed out about 37 signals, that when multiple third party companies are able to make a living selling native applications that integrate against your web APIs, maybe you’re ‘no native’ strategy is actually ignoring what customers want).

  10. 16

    I knew someone would heed the call and respond Vitaly’s last article with a well-thought one. Thanks a lot James, you obviously took the extra mile and trouble to bring such detailed, informative and enlightening article together.

    The thing that bothers me about the “portable web” is that, when you are about to say something about it you have to be extra cautious and need to use words like “as x as possible”, “whenever feasible”, “wherever appropriate” etc. That makes me feel like the subject is blurry, no room left for certain predictions. The fight to overcome browser inconsistencies was something, but another fight to explore and overcome the inconsistencies between devices? The very devices that are interacted with inconsistent conventions? I already feel exhausted, f this s.

    I could only find relief in one part of the article, the one that the user chooses “house” over my “days-spent, well-put, cleverly planned, carefully detailed” content. To be honest, I don’t care if I lose this one..

    The situation now reminds me the fear I had when I had to give up good ole ie6 friendly table based designs and had to learn the magical world of standards and css. I hope I will be thinking how unnecessary my fear was and will be laughing at this very comment, in 3 years from now :)

    Thanks again James, you sure gave us something to (carefully) rant about!

  11. 17

    So no flash, javascript, ajax, etc… the future of the web is the web of 1995. Sure if you build a white page with black text it will look the same on all devices, but this is not the future of the web. Mobile browsers are becoming a lot more complex and powerful, to advise not to use javascript I think it’s wrong. Sure maybe you shouldn’t use javascript in the present mobile web, but not in the future web. Where the mobile landscape should be dominated by Android, iOS, and Windows Mobile Devices.

  12. 18

    Good article, although the title should have been, “Designing For Future Web Devices.” I was expecting an article about designing for the future web with specifics about the evolution of the Internet, rather than the code and devices that will help display it.

    Elements of the future web will include things like linked data (see Tim Berners-Lee’s TED talk) as well as artificial intelligence. A great example of what ai on the web might look like is the the Wolfram Alpha search engine (it’s not real ai, but it gives you an idea of how it might work). I think a great follow-up article would cover some of these topics. There’s far too much discussion about how to display the web and too little about how the actual Internet is evolving.

  13. 19

    A proper framework that incorporates most of the facts that are being mentioned in this posts is urgently needed.

  14. 20

    Excellent article! thanks!

  15. 21

    Very interesting article

  16. 22

    Tom, NewEvolution

    March 29, 2011 10:19 am

    Awesome article!

  17. 23

    “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…”

    This is such a gloss-over paragraph and an attempt to placate designers, that it needs to be addressed.

    As far as I can tell from this article DESIGN IS DEAD.

    To your points:

    • Presenting information clearly (can be done without design)

    • Hierarchy and Innovation (can be achieved without design)

    • Layout and navigation (can be achieved without design)

    •That leaves well-thought out typography (won’t even dignify this)

    Face it folks, People have become desensitized to design. They want their content without ANY distraction. It is the evolution of the species, like it or not. Does anybody know how many industries were wiped off the face of the earth by emerging technologies? Too many to mention here.

    Now it’s the designers turn.

    So it goes…

    -dp

    • 24

      Do you even know what design is?

      • 25

        I thought I did. Maybe I don’t. Here’s my site:

        martiandesign.com

        You decide.

        Maybe I’m just crazy (probably)

        • 26

          There are many definitions of the word design. Here is one from Merriam-Webster that I find particularly relevant to this discussion:

          “the arrangement of elements or details in a product or work of art ”

          Now, based on that definition, could you expand on the following points?

          • Presenting information clearly (can be done without design)

          • Hierarchy and Innovation (can be achieved without design)

          • Layout and navigation (can be achieved without design)

          • That leaves well-thought out typography (won’t even dignify this)

          • 27

            Hi Brad, All that stuff can be done by an information architect with wireframes. (except the typography)

            This article was entitled “designing for the future web” but the author left out the designing part

            And to my other point, God help you if you spent the last 4 years in college learning Flash and Actionscript.

            Also, let me reiterate, Design is not dead, but design for the web, mobile, tablets, etc is dead.

            Face it , “The World Wide Web is a WordPress Template”

            (quoted myself there)

            So it goes…

            -dp

          • 28

            dp,

            For some reason I can’t reply to your message below. Er, above, I guess.

            I think you must be confusing design with style. Design is not (just) pretty colors and pictures. Design for the web INCLUDES presenting information clearly, layout and navigation, typography, etc.

            The most important element of a website, in my opinion, is usability. That’s what a designer does. He or she makes a site usable. He or she makes information easy to find. And that’s the point this article is making. Stripping away all the extraneous stuff that doesn’t work on all platforms, and trying to get to something that does.

        • 29

          lol… you call this design? no wonder…

      • 30

        Design is like… arranging furniture. Any idiot can do that with enough tries.

    • 31

      Thank God someone’s alive out there. Curious we share the same initials. dp is absolutely right. Thank God I’ve been running half marathons, weekly, swimming, doing capoeira, and staying in shape. Military service here I come! I need to pay off these wack loans and forget about my future as a Flash developer with AS3/Javascript knowledge. Maybe someday I’ll be a Navy doctor!

    • 32

      Oh my god. What a nonsense. You know that you get the same information out of a movie when you watch it in black and white? No use for 3D or 70 inch monitors. You know that an aston martin and a isuzu do the same? So why bother?Look at the clothes you a wearing. And please don’t tell me you don’t care. I could go on and on. Design will never be dead. Humans are not Machines. It is not all about information. We just don’t work this way. We are visual people! Beauty attracts us. Evolution (or whatever) made us this way.

      Design can be anything. And it is not always about simplicity. A text is not easier or more fun to read just because you use fewer
      words. I don’t
      want to live in a
      world without design. Diversity is what its all about. Imagine the world wide web on a kindle and tell me again that design is dead.

    • 33

      i feel you my friend, as far from i know design is dead and designer swept away by the multitude of the wave. im thinking doing some admin/ Logistic work rather than be a creative. suck my balls corporate people

    • 34

      Is the vast majority of ‘content’ not creative? I.e – images, ads, videos, Artwork, photography, Flash games, Music, creative writing.

  18. 35

    Other than the incorrect Silverlight assumption that was already brought up (SL still makes sense from an LOB perspective in my truly humble opinion ), there was one other correction that I would like to bring up around Internet Connected TVs.

    Yahoo actually has a TV simulator that you can use to “test” widgets (really just javascript/sorta css/XML/image bundles) for the Yahoo Widget Engine. I realize the focus on the article is around not creating custom apps/etc but instead offering the full web experience on everything. Yahoo is going in the right direction here with a “customized” experience. Now I could be horribly wrong here but most of the user testing I’ve done around connected TVs has shown that users hate, and I truly mean hate, browsing the web on their TVs… really they want an user experience that is tailored for their TV. Something that is big and cinematic preferably relating to within the context of their current programming/mood. I’ve often said that the web is a personal experience like reading a book while the TV is a shared, sitting around the campfire, veg out experience. So from this perspective I have to respectfully disagree with parts of an otherwise excellent article.

    The “10 foot” experience really is showing itself to be an almost completely different mental gear among users. A TV is a giant alpha brainwave machine in some respects.

    The takeaway, in my humble opinion, is that tablets, cell phones, laptops, and other “personal” devices are fitting the personalized content experience quite well where TVs tend to fit into the shared experience equation. Of course I do feel the personalized content should not be gimped in any way.

    • 36

      Mac,

      Thanks for your comment. I accept that Silverlight still has a future; you’re right that it does provide a platform for application development. Broadly, as a tool for developing information-based sites on the web I think it has less value, and I also think that Microsoft have accepted this as well; hence the refocus on the Windows Phone platform.

      In regard to TV, yes, it does still feel odd and I don’t think we have got used to this experience yet. You are right in your contention that TV is inherently more ‘social’ (although I use that word carefully) and I can see a place for an integrated web / broadcast experience in which we watch, discuss and share at the same time. Maybe the idea of personalized and shared are not that far apart in reality? Time will tell.

      Thanks,
      James

      • 37

        I think you may have still missed the point on Silverlight. While not available on all devices, it has not been “refocussed to the Windows phone platform.” One comment by an executive who’s not being exited from Microsoft, taken out of context, joined with an intentionally inflamatory headline does not demonstrate Microsoft strategy. More recent comments from other executives, closer to the Silverlight strategy and still leading the related teams provide a better indication that Microsoft is still committed to Silverlight for much more than just the phone.

        Combined with the fact that they’ve announced the next browser and desktop version, the fact that they have more people committed to Silverlight development than ever should put the “Silverlight is Dead” rumor to rest. Unfortunately, like any baseless rumor, it just seems to keep getting repeated.

        Yes, Microsoft has made commitments to HTML 5, as well, because their customers want to be able to develop in that environment, but that doesn’t mean they have to make a choice.

        Regardless, while you can start doing HTML 5 development, it’s hardly the current cross platform standard. The spec isn’t ratified, it’s implemented differently in every browser that’s begun implementation and not available at all in many. Someday, HTML 5 may catch up to where Silverlight or Flash are today, but by then both are likely to have provided new innovations that someday be incorporated into HTML 6.

        Since Silverlight and Flash are not available everywhere, it would be more correct to characterize them as being more consistent in the cross platform implementations in which they exist, but with a smaller reach than HTML. Either way, there are inconsistencies developers will have to deal with.

        My opinion, for what it’s worth, is that the ‘write once run anywhere’ philosophy is a pipedream and perhaps not even a good one. the experience you expect on any of the devices through which you access the internet is a combination of the expectations you have of the platform and the specific provider. you expect certain things from Facebook no matter how you access it, but those expecations are tainted by the platform. Hence, Facebook has it right in providing different implementations for each device on which it wants to compete.

        Expecting to write one HTML 5 site that works for everyone everywhere is setting yourself up for disappointment.

  19. 38

    Great article. It gives me a way to go for my future designs. Thanks again.

  20. 39

    Roel ter Brugge

    March 29, 2011 1:08 pm

    Good writing, thanks for the overview. I agree with the logic and the directions you suggest. The modelling and maintenance of the information hierarchy is a challenge. Do you have any tips on that?

    • 40

      Roel,

      Only to make sure that you address it up-front during the planning stage of the project, not afterwards. Think in terms of both user journey (how would my user reach this piece of content) and categorisation (what are the key information types that I hold). Aiming to find the simplest combination of these will certainly point you in the right direction.

      James

  21. 41

    Thanks for this, you’ve confirmed one belief I had regarding building a mobile app for one’s website – given also that more and more people are getting mobile, web-enabled devices, and bandwidth is increasing, why occupy precious human and equipment resources trying to make sure a site works on all versions of a particular mobile OS when they can just browse the website? This can be very costly for a startup.

    I think it’s far better to publish an excellent and well-documented API, and some savvy, enterprising user will decide she wants to make some money building the app for her own phone, and thus help build an economy around your site.

    It’s a great suggestion to design by scaling up and not down. This forces you to figure out what your most crucial, standout features are and focus on them, and leave the bells and whistles for the large version.

  22. 42

    I like the idea of building for mobile first and then progressively adding to it. This takes the current idea of progressive enhancement (building sites first without javascript/css3) one step further and building for smaller screens at the start. Anyone interested in this idea should read this good article/presentation by Yiibu http://yiibu.com/articles/rethinking-the-mobile-web/

  23. 43

    Very good article! Thx for that so!!

  24. 44

    Wow this was a lengthy but great read. Very insightful. I think it is inevitable that mobile access will grow and thus become more important. Just go over your own analytics data and you will see that more people will visit your websites through tablets and smart phones. Hence, I even make (big) purchases through my iPad but that’s not so common yet.

    Maybe I’m in minority, but I actually prefer to use apps over mobile websites to access the same content.

  25. 45

    Hello, James.
    Sorry for my poor English, but i want to try to ask some questions to show my opinion…

    So, what about web’s futur ? Will it be an acces for everybody to what geek’s community allready uses, needs, or wants ? Will the web be formated for the community of people using multiple devices to acces the same information (How big is this part today ? How big will it be ?). That looks strange to me. What about community of single device users (I include the users using various devices but to access to one kind of contents with each device) ? The web is not a media where minorities(?) are obliged to follow…

    So, majority is a “provider” for succes, of course. But, trying to build the majority, trying to catch it by targeting over all devices, will fight with web’s experiences diversity. This question comes for me before designing the future of the web.

    In few words : web’s content formated for all users communities is a great wish. But if each community loose its benefits, it will quickly leave the majority.

    One multiple devices user is (for some part) a group of users, each one using a single device.
    So web’s content formated for all users is a specific work, not a futur standard, and the choice to target it’s specific community.

    I hope my contribution is a little intelligible. :)

    • 46

      Didier, I think I understand what you are trying to say. There can still be diversity, but we must build from a common core structure. Building up from this point, we can add more device-specific features where they are achievable. So, if we can detect that we have both the screen size and and the browser capabilities to create a richer experience, deliver one.

      As long as your site remains structurally consistent over all devices, that is fine.

      James

  26. 47

    Christopher Pitt

    March 30, 2011 2:55 am

    You use statistics like a drunkard uses a lamp-post; for support rather than illumination. That Keynote study (the only study of its kind that you mention) has a distinct lack of any actual numbers. How many people were polled? On which platforms were they polled. How were they polled? All these things matter greatly when making the assertion that the mobile crowd strongly prefer browsers over apps. Your argument in this regard lacks merit.

  27. 48

    The article says that : “Whatever you do, stay away from the proprietary technologies, because that’s the one way to guarantee an inconsistent experience” ( such as flash and silverlight )

    This is ironic, because flash actually is the only way to make sure your content looks consistantly the same everywhere. If the user has flash, then you are 100% assured that your content will be displayed to them in exactly the same way as it was on your test computer.

    I thought that this consistency was the problem, right? Since flash can’t adjust itself well between an 24″ desktop monitor and a 2.5″ phone.

    • 49

      It’s only consistent if the device supports Flash and has the plug-in installed – so no iOS or first-gen internet-enabled phones.

      I’d prefer a more gradually adaptive experience, in which I can always get something as opposed to nothing at all. That’s why I believe that HTML5 provides a much better route forward.

      Thanks,
      James

      • 50

        I skimmed through this article and the jist I got was “Be wary of Javascipt, Use HTML5, and Abandon Flash”. All three of those points are wrong in my opinion. Everyone seems to be rushing to say USE HTML5! but the reality is a majority of html5 features are not supported by the major browsers yet. Yeah it looks good on an iPhone but someone running IE7 on their desktop won’t see these features. And as cool as the iPhone is it is a TINY percentage of people viewing the web. Flash is a great tool for creating completely immersive experiences, but you just need to keep in mind to create some “backup” content for phones or the iPad that don’t support it. That way you won’t get nothing as James pointed out.

        I’m looking forward to using html5 in the future – in combination with flash – as it becomes more widely accepted. But right now it is NOT a “web standard” as Apple, or the author, likes to bill it.

        • 51

          Tristan,I think the idea of having to create ‘backup’ content is the issue here. By changing our thinking on designing for the web, we can create sites that are consistent in structure and that adapt to take advantage of the more-capable browsers (desktop or mobile).

          For me, HTML5 presents a good opportunity to do this, and also degrades gracefully for those browsers that do not yet fully support it.

          Thanks for your comment.

          James

  28. 52

    i stopped reading a few paragraphs into ‘Be Wary of JavaScript’, after skimming down and seeing that title…. that’s Fking RETARDED, please get better authors on here…. javascript is only increasing in speed and devices are getting faster and faster… i’m just done…….

    • 53

      Nick, what I said was to be wary of JavaScript for the time being. Not ever, not even now if you want to use it. If the end-device is capable, go for it.

      Why should we be wary? Because there are still people out there who are using first-generation internet-enabled devices. If you’re not worried about excluding these people that’s okay, as long as you make the choice to do so. But if you are looking to reach the widest possible audience you’ll need to think carefully about how you present your content.

      James

      • 54

        That’s just silly.

        TV channels broadcast HD but I don’t own a HD screen. They also broadcast analog quality. That’s kind of like JavaScript on the web. You design your website based on the nicest and best qualities; then also make the content (the essence of your presence on the web) available to those with lesser devices that don’t include JavaScript. And in time everyone will support JS. Or are you the type of person who still designs for IE6 and maximum 800×600?

        You exclude the ridiculous and offer content to the less qualified. And then you offer the best to the people who care, because let’s face it; if you are still using IE6; I can’t imagine you care for design or user experience. And if you do care, and it’s because you don’t have the money to upgrade your p60, then you can’t buy our product or service anyway. It’s that simple.

        • 55

          I disagree. Your analogy is a good one, but it’s the wrong way around. Analog TV is the norm, not HD. But if you have the equipment to take advantage of HD, great! If I don’t have HD, I still get the whole experience, it just doesn’t look quite as good.

          No, I don’t use IE6 or design for 800 by 600. The point is that you don’t have to. Creating adaptive designs that deliver a consistent core user experience to all devices should be our goal.

          Taking a bottom-up approach to design ensures that we have this structure in place from the start.

          • 56

            I still think your view is too narrow, the newly developed devices will support all the desktop features and more.

            The true future is that we’re going to terminal devices where everything is ‘remote desktop’. That means all devices will have the same cpu power. You only need to buy one core yourself, or better yet, everything is run on the core of the service provider. This means you’re only streamed the visual content. This means every device will support the same features.

            You also think that resolutions of the mobile devices differ, while really the mobile devices will improve and get equal resolutions to their desktop versions.

            Additionally, you advocate getting the same user experience on all devices, mobile or desktop. But this is flawed to begin with, mobile devices are just that, devices used mobile; people in a hurry, quickly looking up some of the latest info. That’s why apps are so succesful. They quickly provide the info you need, without extended experiences. The mobile experience is by definition and demand different from the desktop experience. And thus requires different navigation and structure than a visit via my tablet pc while relaxing on my sofa and having all the time and desire for an extended user experience. And design is used to present that experience, differently for each desire, mindset and device.

  29. 57

    Peter Cranstone

    March 30, 2011 5:47 am

    Great article.

    Let’s take it one step further and figure out the technology problem that has to be solved for it to happen. What you’re describing is the future – a future of “context about who I am, what device I’m currently using and where I am, all in real time”.

    At it’s core the web is very simple – it’s a client server model. The client sends a request to the server and it sends back a response. So what’s missing from your future? In a single word – context. Did you know that there is no way to know in real time exactly what the connecting device is capable of supporting?

    But what if it could. Instead of just sending the standard “User Agent” strings to the server, what if you can add more real time context on the fly?

    Well then you’d have all the context you need to deliver a relevant meaningful customer experience.

    The web started life with a single screen fixed on one location. It will evolve to “anytime, anywhere, any screen”. In which case it’s obvious that the protocol needs a tweak to provide the additional context.

    Once you do that you have the future of the web as you’ve laid it out above.

    Cheers,

    Peter
    5o9 Inc.

  30. 58

    For the most part, this article makes sense, but there is one point that is just plain wrong: HTML5. The claim that it is a “standard”, not to mention “ready to be used for development” is just plain not correct. HTML is not even at the draft recommendation stage yet with the W3C. At this point, it is a work-in-progress that is subject to serious changes before it hits the recommendation stage, let alone the point of being a standard. I see no mention of this, no advisory statements about using what very nearly equates to “the latest and greatest plug-in” syndrome that plagued the very early years of the web, just a fanatical endorsement for something that isn’t what you say it is. Flash is not dead, Silverlight is not dead, and HTML5 is not a standard. It would behoove you to do a little more research for your articles and understand what that research tells you.

  31. 59

    Great article, visionary. thank you!

  32. 60

    Bottom up conceptualizing males sense.

    Oh…really? I would imagine all bottom up males sense…regardless of having the capacity to conceptualize or not.

    ; )

  33. 61

    James,

    On a design-front, the mobile world seems to favor a smaller version of their web-based counterparts… I think that minimalist/easy-to-read-on-a-small-screen looks should be strongly considered.

    On a subject-based front… something useful to people on the go (a-al: GoogleMaps/Yellow Pages) are going to be the biggest hits. Followed closely by trivia-confirming sites (Wikipedia) and news sources (Yahoo news, etc.) .

  34. 62

    Think this a good example on how structure(aka technology) both enables and constrains action. Scary how fast internet/ social media is changing!

  35. 63

    There have been articles on Smashing Magazine drawing lots of criticism but this one is really nicely written and gave me useful information.

    Thanks, James.

  36. 64

    Very useful information. Thanks for publishing it!

  37. 65

    Surely we are putting to much emphasis on ‘portable’ being the ‘future’ of the web.

    What about the predicted rise of internet T.V, which will asume our creations are viewed on much larger screens than most consumers use now, and screens that are much closer to the 32inch screens that us designers/developers are used to building our sites on already.

    As a very visual person, the idea of squashing and squishing a beautifuly crafted design into a small portable space doesn’t excite me much.

    The age of big screens and internet T.V does.

    • 66

      Robert, by portable I didn’t mean that the device should be portable; apologies if this was not clear enough. It is our content that should be portable and adaptable. It is this variety of consumer devices that will provide the design challenges moving forward.

      James

  38. 67

    Great article, thank you. Do you have anymore resources for testing from a rendering standpoint with regard to devices and operating systems all in one place? As opposed to setting up each emulator locally, I’m looking for a one stop shop for testing on multiple devices with an option to select OS version.

    You mentioned DeviceAnywhere…I’ll look into this one, as I haven’t used it before. I came across Gomez and it looks like they provide everything you might need and then some. Watch this video: http://www.gomez.com/resources/video-library/gomez-mobile-solution-two-minute-explainer/

    Let me know what you think or if you can you recommend any others.

    • 68

      Thanks Jon,

      DeviceAnywhere certainly has the widest range of available environments and is something that we use for end-testing. I’ll check out the link you provided.

      James

  39. 70

    Your mention about proprietory:

    What’s your take on Wallaby then – Adobe’s now developmental Flash to HTML5 conversion. Obviously because the way the web is going Adobe is putting a ton of energy into keeping Flash going for more than just a gaming experience by making it a seamless and simple HTML5 conversion.

    Truly, you can’t say Flash will be gone in time then with something like this would you??

  40. 71

    “Bottom up conceptualizing males sense. Concentrate on the basic elements and let the context evolve around them. Image: Andrei Bocan”

    Spelling mistake “Males”

  41. 72

    Nice article but shouldn’t we take html11 and the new tags into consideration as well? http://html11.org

  42. 74

    There are many good and valid points that Gardner makes in this article, however, I believe that the desktop-based website will continue to be king. New devices will have to adjust to the current websites and not the other way around. A device that is poorly developed and not compatible with the current state of the web will most likely not succeed.

    If a device revolutionizes the way users view the web and has enough of a crowd to back it up (enough that it will have us reconsidering the way we design for the web) then we could think about adjusting our practices. So far only 2 things have affected us in such way: the original desktop computer and mobile phones.

  43. 75

    Laura - Web Courses Bangkok

    April 4, 2011 12:16 am

    Interesting article, good info and lots of food for thought.
    Thanks!

  44. 76

    Christian Krammer

    April 5, 2011 6:08 am

    Really great article. I have learned very much from it.

  45. 77

    Próspero Filipe

    April 5, 2011 8:06 am

    I don’t think that the @media line in css is the best solution in this case. I use PHP to redirect devices to their specific pages with a user-agent line or with a line that mesures the width of a screen.

    if((navigator.userAgent.match(/iphone/i))) {
    if (document.cookie.indexOf(“iphone_redirect=false”) == -1) {
    window.location = “http://frisulli.filipe.ch/touch/”;
    }
    }

  46. 78

    Thank you for the great article.

    At the core of every site is the essential function and design of content to be delivered to the user. The core of the site needs needs to be independent from browsing devices to be successful at the most basic level. Once essential function is achieved, browser/device specific bells and whistles can be added later.

    I have always been one to build things from the bottom up, on paper first. This is the perfect example if how thinking from the ground up is required in this field.

    Thanks again for the insight.

  47. 79

    IMO, I think it’s impractical to build for every possible device you could think of. It’s possible to achieve it. But it would take so much effort and time (hence money). Most clients are happy to just target specific users and spend their money on refining more important features.

    I agree that people come to a website for its content. Also, the context of use is important. A person using a website in a train has a different set of wants and needs compared to a person sitting in his office. But I think it’s important to identify and cater for a few important scenarios rather than trying to come up with an all encompassing solution.

  48. 80

    Great article. On the minds of every content writer.
    Quite agree with your view on consistency and cross-platform performance. Could you give me a clue on how to get invited for a Quora Sign-Up?

    My input for the next challenge on the mobile world. How to improve the QWERTY “keyboard”?

  49. 81

    Can you please site one example of your original website? the idea you have shared inspired me lot to create my own website. i can use this as a business.

    Carpet Care

  50. 82

    This is a great overview of the emerging responsive design trends. Thanks for the links.

  51. 83

    Begun, the great internet eudtcaion has.

  52. 84

    Thanks Much for this projection, “They come before we knew it” that’s what happened to me, when I realize that design a website should no longer use 960 grid template I usually use (at least for a year from now ?).

    If I can ask you 1 thing, I want to know where you got 76.17 Million of market (market share ?) in iPhone apps section.

    Again Thanks for this, I want to know future updates about this topic too.

    • 85

      Windo, it was a calculated figure based on the information in this SlideShare presentation: Rethinking the mobile web. If I remember correctly, I calculated it from total smartphone penetration and iOS market share (at the time). Hope that helps.

      James

↑ Back to top