What is Responsive Web Design?

With mobile expected to surpass desktop browsing in the near future, now is more important than ever to consider utilizing a responsive web design.

Traditionally, separate websites were made to be viewed on a mobile device and a desktop computer. When opening the page of a website on a mobile device, you would be redirected to the mobile version of the website. The issue with utilizing this is it can effect the SEO strategy of the website (Google indexing for instance), the user’s ability to share links (often the mobile link shared when the user’s friend is viewing the site on a PC), and doubles the cost of design & development.

A website that uses responsive design will adapt to its environment. The size of the browser you are viewing it from will determine the way the website appears. There is one website for all devices (mobile phones, tablets, and desktop computers). It may be difficult to understand this concept if you have never seen it in action before. Simply resize your browser window right now. You will see how the layout of our website responds to the changing size of the browser window. This is responsive web design.

Adaptive web design – a subset of responsive web design – is also growing. Adaptive web design simply means elements of the website are adaptive to the device it is being viewed on. If you view our website on your iPhone elements will become touch sensitive (and respond the way they should on an iPhone). You will see when you touch our phone number that a box pops up asking if you want to call us – this would be a prime example of adaptive web design.

With mobile web browsing growing tremendously, it is already becoming clear that responsive web design (adaptive web design as well) will be a key element of web design & development in 2013. What are your thoughts on responsive web design?

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>