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:

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.