CreateaFreeWebsite  with Responsive Web Design

General

 

9 Step Tutor

Web Developers Emulator Tool

How to Find and Use It

When building web pages using Responsive design techniques, one of the handiest tools you'll come across is the Web Developers Emulator Tool.

It makes it possible for you to simulate viewing your web pages on various different size devices, from 320 pixels to desk top widths.

Guess what? You don't need to buy it or download it because most all browsers already have it installed.

This tutorial will show you how to find it, turn it on and give a couple of tips about using it.

Just a word: I am running on Linux, but I believe the process will be the same on Windows. If it isn't I'd appreciate a heads up from someone. Here we go!!

I tested 6 different browsers and only one (Firefox /Linux) didn't open Developer Tools by pressing CTRL Shift J

On Firefox/Linux you have to find the 3 bars top right hand corner, click them, choose More Tools, then Responsive Design Mode.

You can use the emulator online after uploading your web pages but it's best to use it offline before publishing.

Let's get started:

Open your web page in the browser you use off line
Set it to full view
Press Ctrl Shift j (Not Firefox) 
Web Developer tools will open usually in a right hand sidebar

How to find the Emulator

I've made a screenshot of each of the 6 browsers which shows the top of the Developer Tools Sidebar. The little red caret on each pic shows the location of the Emulator Tool icon. Just click it to open the emulator.

Firefox/Linux
For just the emulator use Responsive Design Mode as shown above.
 firefox/Linux emulator icon

 

Google Chrome/Linux
Google Chrome emulator icon

 

Chromium/Linux
Chromium/Linux emulator icon

 

Opera/Linux
Opera emulator icon

 

MS Edge/Linux
MS Edge emulator icon

 

Brave/Linux
Brave emulator icon

 

The Emulator

The Emulator Tool will open at the top of your web page. It's very close to identical in appearance for all browsers.Except of course Firefox

From left to right:
Dimensions: name of device
drop down arrow that gives choice of device to emulate
actual dimensions of the device

Next you'll see a relative value (percentage) and another drop down arrow.(Not Firefox)

The emulator will choose that value for you first time thru. Could be 25%, 50%, etc.

I work on a desk top so I change it to 100% and view web pages at the actual width of the device.

Which ever width you choose, leave the Auto-adjust Zoom at the bottom checked. If you turn it off the emulator will cut off the bottom of your pages.

emulator icon

 

Using the emulator will allow you to see how well your page will perform in the smaller devices.

If you need to make adjustments to text size, margins and padding you'll see it here.

You'll also be able to see if you've coded your media queries and images properly.

Hope this helps in your web page building projects and responsive design endeavors.

 

Free Tools and Resources We Recommend

Free Responsive Web Design Certification freeCodeCamp
freeCodeCamp is a proven path to your first software developer job.
More than 40,000 people have gotten developer jobs after completing this – including at big companies like Google and Microsoft.
Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid.
FREE Certification Courses!!
Free Ebook How to Code in HTML5 and CSS3
"How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
FREE HTML Editor (Windows): NoteTab Light
All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp
Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users
If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the Geany Code Editor. You'll find it in your Linux Mint software repository. It's simple but powerful and FREE.
For image resizing we've found the easiest Linux tool to be Krita.

Have you tried our FREE RWD template kit? Download Template #402 - 6 Page Kit