How To Check If Your Website Is Responsive
Find Out What Your Website Will Look Like on Different Screen Sizes.
Then and Now
Back in the early days of the world-wide-web, long before the release of the first smartphones, websites were designed strictly for desktop computer screens and the HTML structure was fairly simple. More often than not, websites were set to a fixed pixel-width and totally inflexible. It may be difficult to remember now, but thinking back to your first smartphone, you might recall how challenging it was to navigate drop-down menus or click on links — not to mention the endless pinching-and-zooming we all did in order to make out the tiny text and images which were the result of viewing a website designed for a desktop on a mobile device.
Today, things are radically different. Web developers now create flexible responsive website layouts designed to accommodate various device-screen-sizes and functionality. No reputable developer or agency would even think of developing a website today that only works well on a desktop.
Worth the Effort
Developing a truly responsive website requires designing the equivalent of 3–4 versions of the site, representing a lot more work for the web developer, but it is required if you want your site to rank well with Google and be well-received with users. Everything needs to be seamless for the end-user. User experience (UX) is everything these days.
In a responsive layout, it is common for content to change with the user’s device — meaning it automatically adjusts to fit your phone or tablet. In many cases, horizontal content becomes vertical for phones, text sizes logically adapt, and drop-down menus become the now ubiquitous ‘hamburger’ menu.
Responsive Case Study
On the MojoMediaPros website homepage, you can see the “DESIGN VALIDATION EXECUTION” section near the bottom. On a traditional desktop view, this layout appears horizontal but collapses to vertical on a phone. Play the video below to see how the vertical phone layout expands to fit the desktop view.
Check For Yourself
There are three ways to see for yourself what your website will look like at different screen sizes:
Option 1
Get various phones, tablets, and desktop computers and look at them all separately (just kidding, don’t do that!)
Option 2
Do as we’ve done above and re-size your browser window. This sometimes works well as a quick solution, however, it may not be totally accurate, which brings us to…
Option 3
Get a little more technical and use Google Chrome’s Device toolbar. This can be accomplished with these easy steps, demonstrated in the video below:
You’ll need to enable your Developer Tools
- On the top-left of that new window, you will see the devices icon.
- That icon will open up your device toolbar, where you can select from popular phone models and get a much more accurate view of your website on various phones and tablets without actually having that device in front of you.
When we develop for various screen sizes, we always keep these standard device sizes in mind:
- Mobile Phones (portrait and landscape)
- Tablets (portrait and landscape)
- Small Desktop Screens
- Large Desktop Screens
Luckily, within CSS, we are able to specifically target various screen sizes or give a range of sizes that we want to fit into a specific layout. We call that a media query. These media queries serve as logical breakpoints where we want the website to respond one way at one size and another way at a different size.
Modern websites must support many different connected devices each with specific layout needs. Here at MojoMediaPros, we design your website to work seamlessly across all devices.
