I was just thinking today that, probably the most frequent oversight I see clients make when they’re making changes to their web site is to judge it solely with their normal environment. They think it looks good on their screen, and don’t bother to think of the vast variety of devices visitors will likely use.
Within my own client base, I have quite a lot who use laptops, for example. The most common laptop screen resolutions are (currently) 1366x768 and 1920x1080. So, usually, it’s one of those being viewed when we’re working on something new — and it’s great when they say, “Yep, Jim, all looks good here!” But, that’s not always enough (for me).
Hopefully, whatever it is you’re working on, you’re working within some sort of well-designed environment that takes multiple views into consideration — from the smallest phone up to large displays common in conference rooms, for example.
Medium.com is like that. They’ve pre-designed things so as to look great on just about anything. So, it’s tough to encounter any troubling layout issues here (although you’re limited in what you can do!). But, web sites are usually a little more complex. Yes, they’re based on templates. But, clients like to do special things — add new design changes, pop new types of content into various pages, run tables and charts, etc.
What I like to do, as a web developer, is the following:
- I like to design initially on screens most typical (e.g., 1920x1080);
2. Then, once I have a page or template (or whatever I’m working on) setup, I like to view it at various device widths, to see how things look and see whether any weirdness crops up at certain sizes.
The first item above is simple. Just work as normal.
For the second item, I like to do a few things, as described below. (Note: This will be of most help to those using Windows on a PC, and also those using the Chrome browser — arguably the most common setup, but certainly not the only setup! There are similar actions that can be taken on other platforms / browsers, of course. So, you may need to look into those.)
First, if your (Chrome on a PC) browser window is currently full screen, make it a floating window by clicking the middle button on the top-right of the screen:
Then, once the screen is a floating window, click on an edge of the window, which allows you to expand or contract the width of the browser window.
As you do this, you can see what the screen will look like on varying-width devices, such as tablets, for example.
Super handy! But, that only gets you so far.
What you can do next is to right-click somewhere on the screen and click “Inspect.” This will bring up either a new window or a new area of your screen that most non-developers never look at. What you’re looking for, though, is a small button there that looks like this:
Once you click that, you’ll see some cool stuff! It turns your browser screen into a simulated mobile device, like so:
As you can, see, there are controls atop the screen that you can use to play around with the resolution and so forth, thus simulating all sorts of mobile environments. The “Responsive” drop-down even has specific setups for specific devices like the iPhone X or the Galaxy S5 or of course the Google Pixel 2 (naturally, as Chrome is a Google product, too).
Your “mouse” on such a page will be turned into a gray circle that represents a fingertip. So, you can also preview what happens when users scroll or swipe.
So, for me, that’s how I usually do it. I start on my normal 1920x1080, I then also preview things on my larger monitor (2560x1080), and I then take a look at a mobile simulation using the method shown here. It all only takes a few minutes, and often uncovers design issues that haven’t been considered.
Occasionally, clients will come to me with additional specifics. I had a client once who needed a specific CSS stylesheet for 4000px+ wide screens. And the tools described above helped for that, too.
Anyway, I just wanted to share that, as many clients and readers could no-doubt make use of these approaches.
✍🏻 Jim Dee maintains his personal blog, “Hawthorne Crow,” and a web design blog, “Web Designer | Web Developer Magazine.” He also contributes to various Medium.com publications. Find him at JPDbooks.com, his Amazon Author page, Facebook, Twitter, Instagram, LinkedIn, Medium, or via email at Jim [at] ArrayWebDevelopment.com. His latest novel, CHROO, is available on Amazon.com. If you enjoy humorous literary tales, please grab a copy!