Responsive Web Design

Being involved with the Internet for many years, I have seen many transitions with the way we design and develop our web html code. With each new element that is introduced or modified we are given a new buzzword. The buzzword generalises the type of coding we are doing. For example as a developer you may of heard of WEB 2.0 this was supposed to cover the change in the way websites were developed, not necessarily a change in the architecture of the code, but more inline with the ability to interact with the webpage. The types of websites this led to was blogs, social networking sites, wikis and web applications. So moving away from the static brochure type of sites.

As you can imagine as technology evolves, so will the Internet and with that of our ability to code for the web. One of these new features is “Responsive Web Design” or RWD for short. This approach of coding is to provide the optimal viewing experience based upon the device you are using to view the website. To put it in a better fashion, when you view a website on the pc it looks great as you have a nice big screen to view it on, put that same website on the screen of your mobile phone it becomes almost unreadable and you need to zoom to be able to view the content. Not very practical really is it? This is where RWD (Responsive Web Design) comes into it’s own. There are now so many different devices that we access the Internet with having a fixed size website means that on some of these devices your website is not going to be viewed as you would want it to be…. BUT if you have a responsive website, that website would adapt to the window and give you the best possible viewing experience for your device.

So how does this work?

HTML5 and CSS3 are changing the way we code our websites, with the introduction of some great features such as Media Queries. What are these you ask, well its little bits of code that tell the device how we want our website to be displayed. If you are on your mobile phone then your viewport is going to be quite limited, we want the website to fit in with this as best it can. So with RWD we can tell the device to resize the website based on the structure we give it. Rather than the site being fixed in size we use percentage based sizes so the website can respond to the width of the viewing area giving you the best viewing experience.

This blog for example is responsive, if you resize the window (if you are on a pc) you will notice that things start to move and scale as you reduce the size. Once you get to a certain width the navigation at the top with change to something more suitable to your devices viewing area. We have to take into consideration the use of mobile phones, as you want the navigation to be best suited to that device. For you to move around the website you want the navigation to be best suited for using your fingers. So the navigation here changes to being a drop down bar with nice big buttons. Much easier don’t you think to click the links on a mobile phone and get to the pages you want? Also notice how the columns start to stack on top of each other, this allows you to view all the content of the pc version but in a much nicer and more user friendly way. How great is that…

If you are interested in finding out more about having your website made responsive, just fill out my enquiry form and get in touch. You could soon be showing off your website on a multitude of devices and give your customers the best viewing experience they deserve, oh, and most of all generate more business.

Thanks for reading.

Comments

Leave a Reply

My Skills

14 years in the web industry...

  • responsive design
  • html 5 + css3
  • php + mysql
  • seo
  • e-commerce solutions
  • logo design
  • cms solutions
  • social media integration

Interested in hiring me?


© Barry Zimmerman

Privacy Policy

Call me 07805 254007
Middlesbrough / Teesside / UK

HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, Performance & Integration, and Semantics

Connect with me


This website is RESPONSIVE ( RWD ) and was built using html5 + CSS3.