Get DevWP - WordPress Development Theme

How To Test Your Website in Different Browsers and Mobile Devices

If you’re a web designer, developer or site/blog owner, making sure your website looks good and consistent on all web browsers and on all devices whether it’s a smart phone, tablet, laptop or desktop, should be a top priority.

While native apps on mobile devices have been in direct competition with websites, websites still attract billions of views from people looking to learn something new, get their news, follow their favorite blogs and more. This means that the walled gardens of native apps for devices powered by iOS or Android, while coexisting with websites, won’t dethrone the very sites we’ve all chosen as the places we like to hangout, online.

This also means that we have to make sure that our websites are able to keep up with all the different types of devices and screens that people are using to view our content.

Part of the reason websites have been able to continue to thrive in the multi-device age, is because of a concept coined Responsive Web Design. A very basic definition of Responsive Web Design is an effort to present a website in it’s best form on the device used to view it. It’s the ability of a website to adapt in a fluid manor to any view-port.

The coding languages used in Responsive Web Design include:

  • HTML
  • CSS
  • JavaScript
  • jQuery

Responsive Web Design is constantly evolving and there are many frameworks such as Bootstrap and Foundation, that can help a web designer / developer, create a website that looks great on virtually all devices used to access the web.

Now that we have an understanding of the concept of Responsive Web Design, albeit a very brief intro, let’s talk about how we can test the design of our sites in the ever so crowded space of Smart phones, tablets and laptops & desktops.

How Do You Do a Cross Browser and Mobile Device Test for your Website?

This might at first sound like a daunting task. Do you need to go out and buy all the main devices out there to test out your website? Fortunately the answer is no. There’s existing technology that you can use to emulate these various browsers and devices. Okay, does that mean there’s a Premium/Paid service or product you need to buy? While there are several premium solutions you can use, fortunately, those aren’t the only options.

The very web browsers you use on a daily basis to navigate the web, have developer tools that make it easy to view, inspect and debug the code of your or any website. These same tools also have Responsive Web Design Tools baked into them that empower you to emulate various devices ranging from the most popular to even some not so widely adopted options.

Obviously since this is part of your web browser, it’s free to use.

Google Chrome Developer Tools

Chrome has become a dominant force in the ongoing browser wars. Developers like myself use the developer tools to analyze the front-end of our websites. You should to. These are the simple steps to emulate various devices with Chrome.

  • Right click your mouse or use the keyboard shortcut of ctl shift I
  • If you chose the right click option, then click the Inspect link that is towards the bottom of the popup box.
  • The developer tools can either be on your right side of the browser or towards the bottom.
  • Then towards the left, there’s a Mobile Icon that you need to click.
  • You can also use the keyboard shortcut of ctl shift m.
  • From there you will then be able to toggle a Responsive View or any device in the list presented. This will be at the top of your browser.

Firefox Developer Tools

Firefox is still a favorite among developers and everyday users. It’s fast and easy to use.

  • Right Click your browser window.
  • Inspect Elements
  • The Responsive Icon for Firefox is towards the right side.
  • You can also use the keyboard shortcut of ctl shift m
  • Then towards the top of the browser, you will have device options to choose from.

The Takeaway

Making sure your website is mobile friendly and fully responsive to the device view-port is an important part of your role as a website owner or web developer/designer. With responsive design being an SEO ranking factor, this is something you can’t ignore.

As always, thanks for taking the time to read this post. If you found it helpful, subscribe and visit me on YouTube.

View Our Themes