I’m working on a Web site for my reenactment club and am wondering if there’s an easy way to check the design against various devices and screen sizes to ensure it looks good everywhere. I have no money to pay for any pro tools, however.
Shortcut: Testing Responsive | Chrome Developer Tools | View Emulated Display | Customize Device List
If you’re developing a Web site for your reenactment club, couldn’t you just convince people that you’re also trying to reenact the days when Web sites looked really tiny on mobile devices and had flaming skulls and links to MySpace and the Lycos search engine? 😁
Thankfully that era of ugly Web sites continues to dwindle in the rearview mirror of Internet evolution and the tools for exploring the Web and developing Web-based content have improved quite a bit. The latest design concept in terms of device portability is responsive design, and that’s been around for a while nowadays too. Basically, your page is split into a dozen or so columns, each with a minimum required width, and as the page renders on a narrower screen, it removes columns and rearranges content to fit. A great option. But that still doesn’t let you see how the page is going to look on an older cellphone or tablet.
Fortunately, as part of its developer tools, Google’s Chrome web browser has a really cool built-in feature that lets you see exactly how a page will lay out on any of hundreds of different devices. You can even pick ’em by name, including ancient choices like a BlackBerry! Let’s have a closer look…
CHECKING WEBSITE RESPONSIVENESS WITH A BROWSER
The easiest way to test out whether a Web site is responsive or not is simply to resize the browser window. For example, here’s the standard horizontally-oriented Web browser view of my PlanetDave Web site:
Nice. Four columns of information, three for blog posts, one that’s info about the site itself. But what happens if I make the window narrower? Here’s what changes:
Notice that the font sizes have increased so that this narrower version is actually easier to read. Smart design!
But what would happen if the window was even narrower? Things definitely change, but how narrow is that BlackBerry or an older Pixel Android phone? Rather than guessing, let’s access Google Chrome’s built-in developer tools to find out…
ACCESSING GOOGLE CHROME DEVELOPER TOOLS
Right-click (or, if you’re on a Mac, Control-Click) somewhere on the Web page where there’s no content. The empty area around the edge is typically an easy choice for this. A menu pops up:
You want to choose “Inspect“, as shown. Things are going to change and get very techie, so take a deep breath:
What you see on the right side is all of the HTML and CSS code that defines the page being shown. Lots to explore, but if you’re just a casual developer, most of it is going to be far more detailed than you’ll care to peruse. What you seek is hidden in the center of the screen, however. Let’s have a closer look at that new toolbar:
The pointer highlights the button that opens up emulator mode. It’s an abstract image of a phone in front of a tablet, if you’re curious about the design. Ready to have your mind blown? Click on it.
Now on the left it shows “Dimensions: Responsive” and shows dimensions – in pixels – of the window being shown immediately below. Where the fun appears is when you click on “Dimensions: Responsive” to see what device dimensions you can utilize:
By default, the devices on this list are the iPhone SE, XR and 12 Pro, the Pixel 5, Samsung Galaxy S8+ and S20 Ultra, iPad Air, iPad Mini, Surface Pro 7 and Duo, Galaxy Fold, Galaxy A51/71, and the Nest Hub and Hub Max. A few odd choices (how many people are going to view your Web pages on a Nest hub?) but darn interesting and representative of the most popular devices in the marketplace.
VIEW YOUR WEB PAGE ON AN EMULATED IPHONE
Let’s have a quick peek at how the page lays out on a Google Pixel 5. That’s an Android phone with a decent size screen:
Looks pretty decent on that emulated Pixel 5. How about the Nest Hub unit?
Looks really good, basically the same as on a regular Web browser display. You can take it from here.
CHOOSE DEVICES LISTED IN CHROME DEVELOPER MODE
Before I wrap up, do note that you can change which devices are on this list by choosing “Edit…” at the bottom of that menu:
You can also add your own custom devices if you know the pixel dimensions of its display by clicking “Add custom device…“. I’ll leave that for you to figure out but will note that if you want to support the Sony PlayStation Portable, its screen dimensions are 480 x 272 pixels. Good luck!
Pro Tip: I’ve been writing about Chrome and other Web browsers for many years. Please check out both my Google Chrome help area and my Web developer tutorial content while you’re visiting?
