If you start wondering about how will my site look when accessed by different devices after you create then you are doing it wrong.
Building responsive websites is the answer. Using this technology a website can be developed and deployed once yet the layout would adapt according to the client browser and resolution. The end result should be a pleasant user experience when navigating and interacting with the site on any device.
The idea of "One size fits all" is always appealing. Back in the day web development was a nightmare as personal computers had several different screen resolutions used an array of incompatible web browsers and had different accessibility issues; today the problem is some what worse. With the explosion of mobile devices and tablet computers one can not even guess what kind of device will hit his home page next.
Technology is always on the side of the innovative and today we can look in our tool bag for solutions. Big budget companies embrace this challenge and use it to their advantage by developing separate applications for specific devices. The advantage of doing this is mainly marketing as Specific Applications can be easily distributed on the market places like Google play or apple store. An other advantage of creating device specific applications is performance yet the end result even when the architecture is done right is a maintenance nightmare. Such approach would lead to have a main website that is optimised for the major desktop browsers and resolutions than one specific to Iphone, one for Android devices and one for Ipads. Ups I forgot windows phones but these do not have a large market share for now. There you go new features and improvements need to be managed on all these systems tested secretly and deployed on different hardware architecture. But there again if you can afford it you have the market.
The cheaper alternatives is to either use a cross-platform development like phonegap or use a responsive web design approach. Cross platform development is still in its infancy stage as the middle ware needs to be able to compile to constantly changing operating system and though it is impressive most of the times the one time it fails you are likely to hit a wall. On the other hand responsive web design is achieved using a mix of style sheets and java script which are familiar technologies with all web developers. These type of websites are not compiled to different machine code but follow the standard web development and deployment patterns. This saves on infrastructure and support. Using client side scripting the device type is detected and the website become fluid and easily adapt to the width of the browser. To degrade perfectly down to smaller screen sizes utilizing changing font sizes, navigation menu, columns, text blocks and images that scale and change their position.
Next time you are developing a website from scratch make sure that you are using a responsive template. Some good examples make use of frameworks like bootstrap or boilerplate . These will change the way you create your websites and open your horizons to a new overgrowing market share.
Getting started with bootstrap is easy
Step 1 open Visual Studio (Important in Administrator Mode)
Step 2 Go to projects and select Start a new MVC site
Step 3 Select empty site
Step 4 In the package manager use command : Install-Package twitter.bootstrap.mvc4
In the project: Go to Views/_ViewStart.html to change the master view start layout and use the following:
Layout = "~/Views/Shared/_BootstrapLayout.basic.cshtml";
Go to the CDN to select the look and feel for your site: http://www.bootstrapcdn.com/#bootswatch_tab and include the css and script in your master page defined in the layout above
About the author
- worked in different markets like gaming , marketing, regulatory bodies, government etc. Passionate in Internet marketing, search engine optimisation and development frameworks.