Web professionals should understand how the Web might look like in the future and try to adapt their skills accordingly. For example, they should learn how to build a fluid website that can adapt to the characteristics of the devices, on which the website is viewed, for example by using a consistent core design and structure. They should also look at how conceptual approaches to website design will change, such as upgrading a simplest design instead of downgrading from the richest one.
What is future web?
When people talking about the future of Web, the word ‘Mobile’ seems to be repeated frequently, in fact most experts believe that the future Web will be highly mobile.
Even so, you shouldn’t only focus on the mobility aspect. True, the way people access the Web is changing gradually and it does mean that people use more mobile devices. However, the term mobile is not limited to mobile devices; it should also be associated with portability. The Internet is always changing and our online experience is orienting toward web services instead of search engines. People enhance their social life with Facebook, Spotify for Music, LinkedIn for professional life and Netflix for film and TV. Information is now distributed inside a social circle and we are no longer rely on search engines
Web professionals shouldn’t be overly rigid in their approach to distributing Web contents, for example, they shouldn’t think only in terms of devices. Although people are now focusing on mobile landscape, it may change in a few years’ time. A content should be highly portable and can be displayed anywhere. Practitioners may eventually need to decide whether they should focus on certain channels and devices at the expense of traffic or they should serve a wide spectrum by taking a less tailored approach. For both options, you should be able to deliver consistent user experience across all available channels. Future Web could be a mish-mash of channels and device, although it sounds promising, you should still need to focus on portability.
Design, content and integration are three things that you should consider when designing for a portable website. If you approach them correctly, it is possible to make your website accessible across a wide user base and provide consistent user experience regardless of devices and access methods used. Web designers in the future will face a multitude of device, each with unique specification. This may make consistency a difficult goal to reach; however, they should still strive to achieve it, both in design and in user experience. Conceptually, designers should think in two layers:
- Core content or service layer
- Display layer
The core content and service shouldn’t change regardless of device or access method used, to maintain a consistent user experience; however the presentation should change to accommodate unique specification of each device.
The future web offers plenty of possibilities and because considering them all is completely impossible. That’s why you should have consistency. Let’s say your users are browsing on a tablet at home, they work through the well-designed navigation hierarchy, however, they’re interrupted before they can get the desired content. Moments later, they access your website again with a smartphone on the taxi.
Even if you need to change the visual elements of your design, the route users take to get the content should be similar. Consistent user experience allows you to create useful portable website and get a complete user experience.
When striving for consistency, you may need to choose between degrading a desktop design or scaling up a mobile site design.
On fully portable web, you have less control in how the contents are viewed or used. As such, developers should abandon the idea that they are designing for specific size and specification. Web designers of portable web should approach the design differently by prioritizing the core content and service first. After all, core content and service will define our website and not the visual elements. Initially, this could be rather difficult, however most of the best practices used in contemporary website development still hold true for fully portable Web, especially when they are associated with the content structure.
To recap, these are a few rules you should bear to mind when designing a portable Web.
- Your website should be accessible to the widest audience base possible.
- Your website should contain similar contents or offer similar service, wherever it’s used or accessed.
- Your website should use the same structure wherever it’s accessed.
- The content or service should be usable in any environment or device.
A website that doesn’t meet all the criteria above may not be able to fit snugly in the future Web. Luckily, there are ways to make your website fits the standard.
Designing portable Website with HTML5:
HTML5 is already supported by two popular browser engines, Opera and Webkit. By using descriptive and standard markup throughout the website, you can deliver consistent outputs across a wide variety of devices. HTML 5 has the extended capabilities to deliver animation, media and local storage feature, which makes it suitable for mobile devices.
HTML5 websites can reproduce behaviors usually associated with standard mobile apps, closing the gap between mobile websites and mobile apps. HTML5 supports video tags, which allow users to play videos natively, on the other hand, HTML5 canvas can be used to play animations. Finally, mobile devices can store database-like information using the HTML5 standard, allowing users to run database-dependent websites offline.
Gmail, Netflix and Youtube already offer HTML5 versions that are intended to improve mobile experience and take a full advantage of HTML5 capabilities. The standard is a good starting point for any Web professionals who want to see what they can achieve in the future portable Web.
HTML5 can already be used for website development and there’s no reason to delay. There are many excellent tutorials and resources that can help you to get started quickly. There are already a number of development environments available for this purpose, such as the Adobe Dreamweaver CS5, if it’s already upgraded with the HTML5 support pack. The Aptana Studio 3 also supports the standard.
People who build a portable website should think about cleanliness and simplicity. Because your website might be accessed on a 40” display at 1920×1080 resolution or a 2.8” mobile display at 320×240 resolution, the design should be both adaptive and scalable. You should also be aware that users may interact with your website using remote control or other pointing devices. In most cases, simple designs are much more adaptable.
At first, you should create a basic website structure and then add core styles, those that are usable to all layouts and devices. By starting simple, you can have a reliable base on which to build. In essential, you should start from a basic experience that is available on simplest mobile devices and then work your way up to larger and more capable devices. The @media queries in CSS codes allows you to use additional browser capabilities and scale up for most, if not all environments, producing the most interactive and fullest experience possible.
But there is a reason why you shouldn’t downgrade a desktop version of your website to a portable or mobile one: the @media queries are currently not supported by some mobile devices.
Stay away from proprietary technologies:
You may need to avoid using proprietary technologies, because they can cause inconsistent experience. Silverlight and Flash as development platforms are believed to live on borrowed time. Microsoft will likely to concentrate on HTML5 and discontinue Silverlight development. On the other hand, Flash will be used mainly as video delivery method and game development platform. If you’re going to build a fully cross-platform website that can be used consistently across all devices, then using proprietary technologies is not a wise choice because the same technologies may not be available on some devices, for example, Flash is not available in all Apple’s devices. Not to say that proprietary technologies don’t have their place; Flash is still unrivalled as a Web-based games platform. These technologies are still the best choice on certain cases.
When adapting for future Web, you may need to sacrifice a few things you take for granted. You should learn to accommodate a wide range of resolution and screen size; and allow contents to flow smoothly. You should think less about page layout and design structure; and concentrate more on content structure.
Because there are plenty of devices on the market, you won’t be able to test your website against all possible platforms on which the website will be accessed. However, you still need to test the website repeatedly. It would be impractical to test on all platforms, each time the website is updated. Often, emulators for certain platforms are available to simulate user experience. You may also use a paid service called DeviceAnyhere, which allows you to run a website on more than 2000 emulated devices. Although there are no reliable Internet TV emulators at this moment, Google has released a guideline for website design for Google TV.
Although future Web will be significantly influenced by portability factor, you should still test your website on desktop browsers. The aim of future Web is to allow consistent user experience across a wide range of device and platforms, including desktops. Just because users can access website on mobile devices, it doesn’t mean that they will stop using larger, more powerful devices, such as desktops and laptops. Make sure your design can flow appropriately and scale well.
Visual aspects of future Web:
Although you need to maintain consistency and avoid using certain common technologies, it doesn’t mean that future Web defies beauty. Great design is not all about presenting information clearly; it should also offer acceptable visual imagery, which involves well-thought out navigation, layouts and typography.
Contents for future Web:
For future Web, content is still the king. The content will in fact receive more focus because you need to pare down some design elements to improve consistency and compatibility.
Solid information hierarchy:
To improve both SEO and readability, you need to structure your content well. You can create a clear information hierarchy by understanding your own contents. Map possible routes people use in your website to get the desired content. You should prepare a quick and straightforward path for every piece of content, starting with using categories effectively. For example, if you have an e-commerce website, you may drill down to each product category and then to each individual product. It is a simple approach and can prevent the presence of an overwhelming amount of information in each page. Straightforward information hierarchy allows users to know where they are in the website at all times.
To prepare yourself for future Web, you should treat mobile users as second-class citizens. Your contents should always be available and accessible. These are a few things you should consider:
- Superfluous images: Some of the images may not be essential, so get rid of them.
- Unnecessary texts: Good desktop copy doesn’t always make a good portable copy.
- Unsupported file formats: Don’t use Flash if you’re not sure that the file will be supported
While you want to remove unneeded contents, you shouldn’t remove too much. Some sites are so simple that they have no depth. Information on the first level may be adequate on the main page, but nowhere in the page can you find a link to the next level of information. As the result, children pages may only be accessible through in-site search feature or search engine result. This is an unacceptable user experience, because it is difficult for users to find specific information.
Some services may not last forever in your website, so you need to use a modular design. You should be able to prune away services that have unfortunately fallen by wayside and to integrate new services easily. Your primary goal should be to push contents across all services and integrate them to the fabric of the website.
Search-engine friendly contents:
While the way people access your contents are becoming less search-based and more social, search engines still play a significant factor in driving in traffic. Your contents should be formatted properly to allow easy retrieval. SEO may already be old hat for many of you, but quality contents will always have a rejuvenated life.
After performing SEO methods, you should also use services like OpenID, OpenGraph and OAuth. If you choose not to use these services, at least allow your users to share your contents easily. ShareThis and AddThis are commonly used to allow people distribute your contents, so you should take advantage of them. A short, effective tweet can generate a sharp spike of traffic. Popular content management services such as WordPress and Joomla have built-in functionality for content sharing. This method can make your website more discoverable.
We still don’t have a fully portable Web yet, but it may be available before you know it. Web professional should re-educate themselves and become a strong driving force behind the change. They should also strive to set new, acceptable standards and let go of obsolete design thinking. To provide real value to clients and website users, web professionals should create consistent online presence that involves all platforms.