Browsers and Responsive Design Modes
The set of mobile devices is ever changing, with screens large and small. Website designers have had some significant challenges in recent years. The many solutions tend to fall under the heading "responsive design", as first coined in this article by Ethan Marcotte on alistapart.com. It's all about flexibility in windows.
We can't possibly cover the whole topic in a single TechBits, but here's how to easily get a taste of what it means. Open Firefox, go to any website, and press Control-Shift-M to put the browser in Responsive Design Mode. You can select from multiple screen sizes, in portrait or landscape orientation, to give yourself a view of what end users are experiencing with that website.
The controls are simple enough that you can probably figure them out just by playing. Or, you can read more about the Firefox interface on the Mozilla Developer website. To get out of this mode, press Control-Shift-M again or click the X button at the top left of the interface.
Safari has a similar mode. It is very much oriented to Safari use on Apple devices, but if that is your development platform and target audience, it's great for that. A good summary of the Safari interface on tekrevue.com can get you started.
If you're really into such things, the Chrome DevTools interface has a similar offering, with more complex options and a range of specific presets to help you richly simulate quite a few popular mobile devices. There's a great article about Chrome DevTools on sixrevisions.com.
Last but not least (well OK, yes, it actually is my least favorite of these tools), Internet Explorer and Microsoft Edge both have their F12 Developer Tools and Emulation mode.
Comments
You can follow this conversation by subscribing to the comment feed for this post.