Categories:

Two invaluable tools for simulating/ testing your page in different devices

During the process of defining your CSS media queries, the issue of testing them out becomes a frustrating one, even if you have access to a mobile device. By defining our CSS media conditions using max-width (instead of max-device-width), we get the perk of seeing our media queries kick in just by resizing our desktop browser window, but that's hardly sufficient if you're serious about optimizing for mobile usability. The following two tools will greatly ease your pain in getting a real picture of how your CSS media queries shape the resulting page on various mobile devices.

Google Chrome Developer Tools- Device Mode

Newer versions of Google Chrome come with a "Device Mode" option under its Developer Tools that emulates different mobile devices and screen resolutions (including Retina display) when viewing a page. It's invaluable in quickly checking your page against a multitude of mobile conditions without having to actually own each corresponding device.

To activate the "Device Mode" option in Chrome, load up the target page in the browser, then right click anywhere on the page and select "Inspect Element" within the context menu to first bring up the Developer Tools. Alternately you can use the keyboard shortcut Ctrl+Shift+I (or Cmd+Opt+1 on a Mac) instead. Then, click on the Toggle Device Mode Icon () to bring up the emulation screen:


Screenshot: Emulating different mobile devices and resolutions

In the screenshot above I've chosen to see how the page appears in iPhone 6 via the drop down menu. You may need to refresh the page at this point to get an accurate emulation of the selected device, whether it's iPhone 6, HTC One X, or Apple iPad etc. When viewing a page in the emulation screen, a useful area to pay attention to is any dark gray areas behind the webpage:


Screenshot: Dark gray zone shows portion of page outside device viewport

The dark gray zone if any behind the webpage shows areas of the page that extend outside the viewport of the device, meaning horizontal scrolling is necessary to view that area. It lets you easily spot overflow problems with your layout horizontally that require your attention.

Google's Device Mode option has other tricks up its sleeves as well, such as a network emulator to simulate your webpage loading using 3G or Edge to spot performance issues, and simulating mobile device input like Geolocation and touch Events. More info can be found here.

BrowserSync- local web server for easily testing local files across multiple devices

How many times have you created a web page on your desktop computer and wished it could just be viewed on other devices you own instantly without the tedious and mind numbingly monotonous task of having to upload the file(s) to a web accessible server first? Repeat that each time you make changes to your page, and a trip to the asylum starts to feel imminent. Well, that's where BrowserSync comes in, an extremely easy to install tool for both PC and Mac that will revolutionize the way you test out pages across all your devices, by making it, well, simple.

BrowserSync lets you launch a local web server around the working directory so the target page and its related files can instantly be accessed on all devices connected to your home network by pointing them to a localhost URL. Furthermore, it supports live reloading, so any changes you make to the page or its CSS triggers a refresh of the browser on all connected devices for you to preview.

-Installing BrowserSync

Installing BrowserSync is painless and only takes two steps:

1) Install Node.js: BrowserSync requires Node.js to run, a robust server side JavaScript platform in which many modules are built on top of. Visit the Node.js installer page to download and install Node.js on your computer. You can then verify that it's installed properly on your computer by launching a terminal window (in Windows, go to the "Start" menu, then type "cmd" in the search field and press Enter), and typing:

node- v

If node.js is installed properly, it should return the version, such as v0.12.2

2) Install BrowserSync: With node.js installed, still at the terminal, type:

npm install -g browser-sync

to install BrowserSync globally on your computer. That's it!

-Running BrowserSync

With BrowserSync installed globally, you can now run it anywhere within your file system. To start, inside the terminal, navigate to the directory your target page is located in, for example:

cd jksite/main/howto

The simplest usage is just to create a local server inside that directory so all static files within it are instantly accessible across devices on your network. To do this, run the command:

browser-sync start --server

Once the command is executed, you should see BrowserSync return the following inside your Terminal:

Based on the blurb following "Access URLs", you can now use the local URL http://192.168.1.101:3000/ to access "jksite/main/howto" and all of its contents on any device on your network! Lets say the target page you're testing is called test.html. The URL to plug into your browser, iPad, or mobile phone would then be: http://192.168.1.101:3000/test.html:


Screenshot: Access a local page on the desktop from multiple devices

What's even more impressive, BrowserSync supports "interaction sync", which means any scrolls, clicks, page refreshes, and form actions such as filling out a form done on the page from one device are automatically duplicated on the other devices' page as well.

A slightly more advanced variation of the browser-sync command not only starts a web server, but monitors specific files within the directory for any changes, in which the change is then mirrored on the other devices as well without having to reload the page. The syntax is:

browser-sync start --server --files "*.html css/*.css"

The text *.html denotes to watch all .html files, and css/*.css denotes all .css files within the css/ sub directory.

BrowserSync also comes with a feature-rich web based UI for configuring various settings, or to launch the Remote Debug Tool for inspecting and debugging a page running on the connected device. The UI can be accessed at the URL indicated by the Terminal output when you run browser-sync. For more details on all of BrowserSync's functionality, visit their homepage.

With the confidence boast from all that we've learned already, lets continue the mobile journey, by looking at how to take a webpage from just being mobile friendly to fully responsive quickly. We won't be pleasing just Google, but an audience even more important, the users, in doing so.