Responsive Design Checker by Media Genesis: Is Your Site Responsive?

Have you ever heard of a fixed, adaptive, or a responsive design website? These are all terms used to describe a website’s visuals on mobile devices. Let’s start by defining the three types of website design terms.

Fixed Design

• One version of a design layout, typically meant only for desktop viewing
• Not mobile or tablet friendly

Adaptive Design

• Multiple versions of designs/layouts for mobile, tablet and desktop
• Mostly mobile/tablet friendly, however, some elements may not display correctly on different screen sizes and resolutions

Responsive Design

• Layouts that respond and scale to a wide range of devices and resolutions
• Mobile, tablet friendly

When most people think about responsive design, they imagine a one-size-fits-all solution. The goal of responsive design is to have a website that can look great on many browsers, devices, or applications available. Ideally, a user viewing on a large desktop monitor will have a complementary experience as someone viewing on a mobile device.

So What is “Responsive”?

The main goal for websites is to have a seamless experience on a variety of devices, from desktop, to mobile, to tablet. According to Statcounter global users more commonly use mobile devices at 52.95% (July 2018) when surfing the web. Desktop users account for 43.11% and tablet at 3.94%. With stats like that, you can’t deny the importance of having a mobile friendly website! You should also keep in mind when testing responsiveness, to target Android, Windows, and iOS devices, as well as leading applications and browsers, such as Google Chrome, Firefox, and Safari.

Essentially, responsive design allows the elements in a website to respond differently to various screen resolutions. You may want some elements to expand, minimize, hide, or change depending on the device or resolution. It’s a good idea to think about content, navigation structure, and functionality that will change among different screen sizes. Our web development team can make your site responsive with bits of code called “media queries” that check for the screen size and then respond by serving up the appropriate content.

Benefits of a Responsive Design

• Increases mobile traffic and overall user experience
• Improves management of a single layout
• Enhances performance for both mobile and desktop users
• Increases metrics of overall traffic behavior flow
• Improves reputation and overall Search Engine Results Page (aka SERP)

Downfalls of a Non-Responsive Design

• Your site may be difficult for users to view on mobile or tablet devices
• Your site hinders a user’s navigation and content finding experience
• Mobile usage dominates nearly 50% of website traffic, this means your site could be overlooked by half of potential visitors
• Mobile users are seeking responsive, easy-to-manage readable content – if a site isn’t mobile friendly they will move on to a website that is
• Google sometimes penalizes your site with lower search engine rankings

Google Weighs In On Responsiveness

Being mobile-friendly isn’t a requirement to be highly ranked. But, as you may notice, most to all top ranked websites are responsive. Having well-formatted HTML, CSS, and JavaScript has proven to have an impact on Google’s algorithm. Basically, the Google bot will deduct points from a website that isn’t properly set up – and it first starts with the HTML structure. Think about it like this – Google can’t visually see a website, but the bot knows how a proper website should be setup to become responsive on any screen resolution. There are two main coding factors that Google has been known to consider – performance (speed of the code structure and images) and responsive design. Google has been quoted as classifying adaptive designs differently than responsive designs. Bottom line, if you want your website to rank higher on Google search results then your website should have a responsive design layout.

Is My Site Responsive?

With this deluge of devices, responsive design is becoming a web development necessity, and we offer a free tool to quickly simulate how your site will respond to various screen sizes, the Media Genesis’ Responsive Design Checker.

Our Responsive Design Checker is a browser-based tool that approximates how your site looks on a range of desktops, laptops, tablets, and smartphones. All you have to do is enter a domain or specific page and see how the design responds. It’ll take you less than five minutes to see how your site responds to devices like iPhones or Samsung Galaxys.

In the interest of making the web a more beautiful and useful place, we wanted to make this tool publicly available for anyone who wants to see how their site performs.

Keep in mind that this tool is designed to give you a visual representation of how your site may be displayed on a physical device. Some factors may impact the checker accuracy including: how the site was built, the device you are on, or the browser you are using.

Help! My Site Isn’t Responsive… Now What?

What does it take to have your website become responsive? We start out by wireframing or outlining the website around the basic design concepts. Next, we focus on strategically crafting the design so elements are stacked, scaled, or collapse correctly. It is important to also focus on the navigation, body content, and footer interaction among different screen sizes. After programming the website, media queries will tell the layout how to display depending on the resolution. In simple terms, you want the website to become a one-size-fits-all solution.

The whole thought about wireframing, outlining, programming, testing, and implementing responsive properly into your website’s environment may seem a bit daunting. We can help, let Media Genesis assist with planning, testing, and implementing your responsive website. Give us a call at 248.687.7888, we have been working with all things digital since 1996.