Ask Dave Taylor
  • Facebook
  • Instagram
  • Linkedin
  • Pinterest
  • Twitter
  • YouTube
  • Home
  • YouTube Videos
  • Top Categories
  • Subscribe via Email
  • Ask A Question
  • Meet Dave
  • Home
  • Google, Chrome & Gmail Help
  • Is There An Easy Way to Check Web Page Design on Different Devices?

Is There An Easy Way to Check Web Page Design on Different Devices?

September 17, 2022 / Dave Taylor / Google, Chrome & Gmail Help, HTML & Web Page Design / No Comments

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:

google chrome test page devices - planetdave

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:

google chrome test page devices - narrower layout

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:

google chrome test page devices - context menu - INSPECT

You want to choose “Inspect“, as shown. Things are going to change and get very techie, so take a deep breath:

google chrome test page devices - inspect developer mode

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:

google chrome test page devices - developer toolbar detail

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.

google chrome test page devices - emulating responsive device

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:

google chrome test page devices - list of devices

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:

google chrome test page devices - emulated pixel 5

Looks pretty decent on that emulated Pixel 5. How about the Nest Hub unit?

google chrome test page devices - emulated google nest hub

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:

google chrome test page devices - choose devices

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?

About the Author: Dave Taylor has been involved with the online world since the early days of the Internet. Author of over 20 technical books, he runs the popular AskDaveTaylor.com tech help site. You can also find his gadget reviews on YouTube and chat with him on Twitter as @DaveTaylor.

Let’s Stay In Touch!

Never miss a single article, review or tutorial here on AskDaveTaylor, sign up for my fun weekly newsletter!
Name: 
Your email address:*
Please enter all required fields
Correct invalid entries
No spam, ever. Promise. Powered by FeedBlitz
Please choose a color:
Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!
chrome developer, display emulator, responsive design

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search

Recent Posts

  • Handy Advanced Search Techniques for Microsoft Outlook.com
  • How Can I Rearrange Shortcuts on Android 13?
  • Comparison of the THREE Performance Monitors in Windows 11
  • How Can I Create Desktop Wallpaper with DALL-E AI Software?
  • How to Enlarge Font Size in Apple’s Books App on the iPad

On Our YouTube Channel

FOSI Audio Waterproof Bluetooth Speaker B2 -- DEMO & REVIEW

Google Pixel 7 Pro Android Smartphone -- DEMO & REVIEW

Categories

  • AdSense, AdWords, and PPC Help (106)
  • Amazon, eBay, and Online Shopping Help (164)
  • Android Help (229)
  • Apple iPad Help (148)
  • Apple Watch Help (53)
  • Articles, Tutorials, and Reviews (346)
  • Auto Tech Help (17)
  • Business Advice (200)
  • ChromeOS Help (34)
  • Computer & Internet Basics (783)
  • d) None of the Above (166)
  • Facebook Help (384)
  • Google, Chrome & Gmail Help (188)
  • HTML & Web Page Design (247)
  • Instagram Help (49)
  • iPhone & iOS Help (625)
  • iPod & MP3 Player Help (173)
  • Kindle & Nook Help (99)
  • LinkedIn Help (88)
  • Linux Help (174)
  • Linux Shell Script Programming (90)
  • Mac & MacOS Help (914)
  • Most Popular (16)
  • Outlook & Office 365 Help (34)
  • PayPal Help (68)
  • Pinterest Help (54)
  • Reddit Help (19)
  • SEO & Marketing (82)
  • Spam, Scams & Security (96)
  • Trade Show News & Updates (23)
  • Twitter Help (222)
  • Video Game Tips (66)
  • Web Site Traffic Tips (62)
  • Windows PC Help (952)
  • Wordpress Help (206)
  • Writing and Publishing (72)
  • YouTube Help (47)
  • YouTube Video Reviews (159)
  • Zoom, Skype & Video Chat Help (62)

Archives

Social Connections:

Ask Dave Taylor


Follow Me on Pinterest
Follow me on Twitter
Follow me on LinkedIn
Follow me on Instagram


AskDaveTaylor on Facebook



microsoft insider mvp


This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to our terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. Our lawyer says "Thanks for your cooperation."
© 2023 by Dave Taylor. "Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.
Privacy Policy - Terms and Conditions - Accessibility Policy