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
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 is painless and only takes two steps:
If node.js is installed properly, it should return the version, such as
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!
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:
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 "
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:
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"
*.html denotes to watch all
.html files, and
css/*.css denotes all
.css files within the
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
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.
- Tutorial Introduction
- Two invaluable tools for simulating/ testing your page in different devices
- Taking a webpage from mobile friendly to fully responsive