Responsive Web Design Testing

Tools you need to know ..

Over the last 5 years, Use of mobile devices continued to rise all across the world, now it became a challenge to deliver for those devices on web. The best way to design a website is Responsive Web Design instead of designing multiple versions of mobile webpages as a standard way.

Who Created Responsive Design?

Ethan Marcotte is the creator of Responsive Web Design.

The only problem is testing the responsive websites on multiple devices or operating systems.

Take an example of Always Creative which is built using responsive web design.

Emulate Mobile Devices on Chrome Browser:

Previous Versions of Chrome:

Open the website on Chrome desktop browser and Press F12 Dev Tools -> Settings -> Overrides ->

Enable

Enable on DevTools Startup

UserAgent

Override Device orientation

Emulate Touch Points

Device Metrics

Fit in window

New Version of Chrome:

Open the website on Chrome desktop browser and Press F12 This shows Developer Tools -> Select Settings

Select Overrides -> Enable - Show Emulation View in Console Driver. Then close the window.

Select Elements in the developer tools. Press ESC Button, It opens Console Drawer

Console Drawer shows: Console Search Emulation . Select Emulation tab.

This Emulation tab helps to emulate and test the mobile website using devices.

To choose a device to emulate, select the Device from the dropdown list.

And click Emulate Then the screen size refresh to a scaled sized.

The screen display settings can be changed using Screen Options.

Select Sensors Enable Touch Screen, this shows how the mouse cursors appears on the mobile.

Select Emulate geo-location coordinates to Change the latitude and Longitude

http://itouchmap.com/latlong.html

To stop the emulation, Click the Device and select the Reset Button.

Note: Chrome Emulation is easy to do on a desktop for a very quick check on the site.

It is always a better to replicate the issues on physical devices, found on the emulator-Although its impossible to purchase all the Physical devices.

https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

Then slowly make resize the browser. As you resize, the objects on the browser will start dynamically resize and change the order they appear on the site. This gives a rich experience to the viewers.

Remote Preview

Remote preview allows testers to drive multiple devices from one browser, how whole site appears in all devices.

Helpful Remote Preview tools for Responsive Web Design Testing

Responsinator -- This is a simple tool for viewing a web page in most popular screen sizes all at once. This allows you to rapidly test your responsive design. Just go

to responsinator.com and enter the URL of the responsive website to test in the upper left corner. Now, the site will load on a variety of pseudo-devices that you can browse individually on one screen.

Matt kersley Responsive This is a simple and popular tool. It allows you to test your website on entering the URL and shows results according to 5 different standard widths or device sizes.

3. Screenfly -- This is easy way to test the website by entering the URL of the website and show results on any screen size including desktops, tablets, televisions, and mobile phones.

Dimensions app -- This app can allow testing website both locally and preview on various mobile devices on remote servers. This offers measuring scale to see the difference on different screen widths by dragging the handle.

Responsive.net This is easy way to test the website by entering the test URL and check the responsive web layouts on different devices and resolution sizes.

Screen Queries -- This is a beta version for testing the website across 60+ device viewports using pixel perfect media query debugging tool. This can make the differences even by pixels.

Design Modo -- This tool helps to test the responsive web site on extensive set of screen sizes and devices by just typing the website URL and selecting the device or customizing the screen size and also on rotation.

Cybercrab This ScreenCheck tool helps to test the responsive website on an exclusive set of screen sizes by entering the test website URL and selecting the devices or custom pixels. Additionally, it can also check the HTML errors on the page using W3C Validator.

MITE Keynote MITE known as Mobile Interactive Testing Environment, provides quick test and validation of mobile content with over 2,200 emulated devices right away from your desktop.

There are many simulators/emulators: ios Simulator , Opera Mini Simulator , Opera Mobile Emulator

Responsive Test Open Source Tool lets to see how web page renders on Various Screen Sizes

Responsive Tools Handy Tool to switch between different devices

Am I Responsive Responsive Tool

View Port Resizer Responsive Design Bookmarklet

Resize My Browser - Resize Browser Bookmarklet

Pixel Turner A handy tool for Responsive Web Testing

ResponsivePx Responsive Website Tool

PiResponsive Responsive Website Testing Tool

Behavior Driven Development (BDD)

The behavior driven development tests such as Phantom JS, acts as a fake browser where testers can resize the browser window to make sure responsive components are placed correctly and working.

Take away:

Crucial aspects of a web experience simply cant realize by resizing your browser or using emulators: It also includes true site performance, device capabilities, form factor, pixel density and the impact of the network.

Top Desktop and Mobile browsers as Stats: http://gs.statcounter.com/#desktop+mobile-browser-ww-monthly-201212-201311

Net Market Share Real time Mobile / Tablet Operating System:

http://www.netmarketshare.com/operating-system-market- share.aspx?qprid=9&qpcustomb=1