Become scalable and save!

A new year and while we were not looking things have moved on at web speed.

We know the web is a very large, powerful and usable tool. This is partly due to web developers across the US and around the world removing the distinction between desktop and mobile designs, and creating better online environments for people on all devices. The future of web design is not only mobile but also scalable.

So does your web site meet the challenge?

The mobile design philosophy of responsive websites is arguably the biggest change that has occurred in web design over the recent years. However, its proliferation initially ushered in a sharp distinction between desktop and mobile sites, with apps becoming the norm for websites.

For a while it looked like browser websites might not be the future of mobile devices. With the massive improvements in mobile hardware, however, and new responsive design techniques, the gaps between mobile devices and computers have been bridged to a reasonable extent, making it possible for developers to easily add mobile capabilities to websites of old.

So much so that there is a question mark on the survival rate of laptop computers as compared to the various options in tablets and smart phones in their variety of flavours.

The desktop will remain stable for a while in commerce and industry although there is a trend towards BYOD; that deciphers to “bring your own device” that simply means employees are encouraged to bring their own electronic helpers to work. The underlying thought is that the familiarity they have with their own tablets or whatever will increase productivity in the workplace.

For web sites such designs for mobile and desktop now takes less manpower than before but designers still have to carefully think through their designs. With the help of HTML5 as today’s standard and the dropping of some common web design technologies, website designers can now design websites that can be rendered equally well on a 9cm smartphone or on a 152cm TV, all without losing anything. Similarly, web browser design now incorporates features that allow these to function happily in any of the new hardware domains. This is what is meant by scaling, a feature not imaginable a few years back.

From your point of view it is important to realise some of the do’s and don’ts that nevertheless apply. This article gives you a base to ask questions of your web designer to ensure that your new web site will perform as you and, importantly, your clients would wish.

There are still differences in browser designs that impose restrictions on what the designer can safely achieve. Therefore, the key to proper scaling of sites is to know which browsers your target audience is using and what they can and cannot do. The next thing to focus on is the information hierarchy and how it is perceived by users and the search engines. Issues your designer must take care of.

There was a time not so long ago that, to cater for the desktop and mobile devices, designers had to produce two different web sites. Obviously the problems were to make the text flow in an acceptable manner irrespective of screen size, yet that was the simplest of all problems. The real difficulties lay in navigation layouts, image resizing and the “touchability ” instead of mouse control.

There still are sites that literally disappear off the screen because of the ubiquitous header navigation bar and images which simply do not scale to fit a smaller screen size. I for one do not persevere with such sites anymore because they are simply too frustrating to use. And that means a loss of business to the owner of such a site.

Fortunately, there are solutions to facilitate cross-browser rendering: Fluid layouts and Media Query function. The latter, a piece of industry jargon, is a code library that takes care of most of the issues and for the designer is very easy to use. Fluid layouts just mean screen content that automatically adjusts to whatever screen size the viewing device has without things becoming scrambled on those screen.

Fluid layouts have made it possible for designers to move from a laptop screen all the way up to a TV. Scaling down beyond laptops was a big issue for designers until Media Query function came into the equation. With the Media Query functionality, the browser is asked for its width and the design is scaled accordingly. It allows developers to use the exact same code and structure to scale a site from a phone all the way to a high definition TV, without dramatically changing the overall layout. So, the future of web design is scalability. The ability to cope with all these issues in one big bite forms the basis of the technology called Responsive Web Design.

Combine all that and you have a very attractive and functional web site ready to impress.

This newfound functionality allows a whole array of new features to be incorporated into web sites. Features such as Google Maps or Google Earth become a beneficial feature. A device with GPS sensors will immediately provide the full facilities of road navigation, traffic analysis and locale identification. Not only will your clients be able to find you but they will also have the opportunity to communicate with you directly using mobility features such as SMS, email, phone and video calls. Your web site will effectively integrate with the client’s phonebook, bookmark and VoIP benefits. These examples are just a small part of what can be achieved with the magic of Responsive Web Design. Use it and you will save a substantial amount of the cost of a new web site were it designed in the old ways.

All that is needed now is for your end to be set up to accept this technology in real time. If nothing else all you need is a smartphone or tablet beside your switchboard to make it happen. Neither would it be difficult to have your front desk computer expanded to allow these technologies to be incorporated.

Related Articles

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments
Back to top button
WP Tumblr Auto Publish Powered By :
Would love your thoughts, please comment.x