Working with Responsive Design – A beginners view

Multiple Devices

A myriad of Devices are now available

One of the biggest challenges I face when developing a website is how to make it look the same on the myriad of devices that are used to view websites nowadays. Gone are the days when a site was designed with a note saying “this site is best viewed at 1024×768 using firefox” making the viewer change their resolution and browser to suit your design. These days more and more people are using smartphones and tablet devices, all with different screensizes, browsers and resolutions.

This led to developers loking for workarounds, such as building a lightweight version of the site especially for mobiles, but I personally feel that in doing this it totally detracts from the mobile users experience of a site, with the display power and mobile network speeds these days why inhibit a visitors perception of your site?

Recently I have started working with responsive designs, which allow for the use of media queries within the Cascading Style Sheets (CSS) of a site. These queries allow you to change the look and feel of a page dependant on the device resolution, dont get me wrong, I am by no means an expert at it, and it would be very time consuming to do this for every single resolution and screen size available.

I use analytics and statistics to see what resolutions people are viewing sites that I have designed in the past and use these as as a guide for the resolutions I will design for, I also look at the devices being used and find the resolutions available to them in both portrait and landscape and implement these as well.

I always start on the smallest size first for design, this allows me to ensure that the User Experience (UX) for mobile visitors isn’t a diminished version of the full size site, and as the resolutions get bigger increasing the sizes of all the elements that make up a page, before testing each iteration.

I am aware that there is so much more to responsive design, and i am on a steep learning curve however at McKenna Web Design we strive to use the latest in design techniques and every day is a learning day