I often get this question again and again i.e. how do I test
the site which I designed for responsiveness?
First up all what is
Responsive Design?
Responsive web design (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 mobile phones to desktop
computer monitors)
A site designed with RWD adapts
the layout to the viewing environment by using fluid, proportion-based grids,
flexible images, and CSS3 media queries, an extension of the @media
rule.
What are the
advantages of RWD?
With Responsive Design, you can create one design and it
will automatically adapt itself based on the screen size of the mobile device.
This approach offers plenty of advantages:
- It
save time and money as you don’t have to maintain separate websites for
desktops and mobile phones.
- Responsive
Design is good for your website’s SEO (search rankings) as every page on
your site will have a single URL and thus Google juice is preserved. You
don’t have to worry about situations where some sites link to your mobile
site while other link to your desktop site.
- Your
Google Analytics reports will paint a better picture of your site’s usage
since the data from mobile and desktop users will be consolidated.
- The
same will be true for the social sharing stats (Facebook Likes, Tweets,
+1’s) since the mobile and desktop versions of your web pages will no
longer have different URLs.
- Responsive
Designs are easier to maintain as they do not involve any server-side
components. You just have to modify the underlying CSS of a page to change
its appearance (or layout) on a particular device.
- The
earlier design methods looked at user agent strings to determine the
mobile device name and the browser that is making the request. That was
less accurate and with the number of devices and mobile browsers expanding
every day, that matrix is very difficult to maintain. Responsive Design
doesn’t care about user agents.
How to test RWD of a
web page?
A good number of websites are now using Responsive Web
Design instead of building separate designs for mobile and desktop screens. The
same design is served to all devices – including desktops, tablets, mobile
phone, e-readers and even gaming consoles – and the layout magically adapts
itself based on the screen’s resolution.
Following websites will help you test your web page for
responsiveness.
- mattkersley.com/responsive – You can use
this tool to quickly test your site layout against standard screen widths
(or breakpoints). The source code is available on Github and you can thus
expand it as per your requirements.
- quirktools.com/screenfly – This is my
favorite tool for two reasons – it supports a much larger number of screen
resolutions (including TVs) and second, Screenfly sends proper user agent
strings while requesting web pages for different devices. Thus you get the
best of both worlds (see notes).
- responsinator.com – Another nicely-done tool
to help you understand how your responsive site will look on the most
popular devices in various orientations. It can replicate the iPhone, iPad,
Kindle and Android smartphones.
Have
fun. Good luck.
