ShareThis

Friday, June 7, 2013

Web Design: What is Responsive Web design ?



What is "responsive web design"?
Well according to Wikipedia:
Responsive web design (often abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
Why is it important?
Well according to Pew Internet:
Nearly nine in ten smartphone owners (87%) use their phones to access the internet or email, with 78% of these users saying that they go online using their phone on a typical day.4 Put differently, that means that on a typical day 68% of all smartphone owners go online using their phone. Although smartphone ownership varies significantly based on demographic factors, within the smartphone owner population there is relatively little variation when it comes to using one’s phone to go online. Age is the primary differentiator—fully 94% of smartphone owners ages 18-29 use their phones to go online, with eight in ten (81%) doing so on a typical day.
Now add the number of users who are using a tablet to surf the internet and the number increases. So if your website is not responsive, then you are loosing out.
This is the reason that the new design of this site is totally responsive, and dynamically changes based upon the viewing area of the device you are using.  Try it yourself.  Just adjust your browser size slowly and you will see the design change from a desktop view, to a tablet, then to a mobile device.  How did we accomplish this? Well, it took a bit of time but:
  • Get a responsive template.  I just love Yootheme and their warp framework for this. But there is more to do than that.
  • You need to assign an auto size css class to our images so they will adjust in size to the device.
  • You need to assign css to modules that you want seen on just the desktop, just a tablet, or just a mobile phone.
  • If you have videos then you need to do some css work also so they adjust in size also.
It was a fun and great experience redoing our Joomla! site to be a responsive web site.  How long did it take?  Well the css for out video delivery from youtube took around 4 hours to work out all the kinks.  Then customizing the other css took another couple of hours. As for assigning the auto resize css class tot eh images, that took a few minutes using SQL on the database itself.
 So if you delay in converting your template on your Joomla! site to be responsive, then plan on your competition crushing you!


~Affordable Youtube Video Advertising~

~Looking for freelance work? ~

Follow US on Twitter ~Like US on Facebook ~View US on Youtube~

Related Post

Blog Widget by LinkWithin