Do Your Own Website Responsive Test within Your Browser - Online Business Tips and Tricks

Do Your Own Website Responsive Test within Your Browser

I could give you some technical phrasing here about a website responsive test, to try to sounds smart but that does not really help you.

Responsive Web Design or RWD, simply put, is an approach to web designed that is focused on getting desktop websites to adjust for easy browsing or reading on mobile devices.

The web site is coded in such a way, as to layout the page and it’s content based on the environment or display.

The featured image on this training is part of a screenshot from a iPhone 5 and as you can see the WA site is responsive.

Have you been to a website on a smartphone or tablet where you had to scroll up and down or side to side to see everything? Not Responsive!


Wealthy Affiliate

The images above are shots of 3 of the more popular mobile devices, using the responsiveness tool in the Google Chrome browser.

Google Chrome, as well as, Safari and Firefox have responsive design modes that allow you to test your site for responsiveness.

In many browsers you can simply adjust the size of the window and the browser will respond. However, this is going to change the size of all the tabs you are working with. The responsiveness tools allow you to test a specific site, while continuing to browse as normal on the other tabs.


Google Chrome Developer Tools

If you are a Chrome user you can get to the responsiveness tool by following this path:

Custumize and Control Menu (top right) > More Tools > Developer Tools

Once developer tools opens on the right, look for the mobile view icon at the top of that section of the window next to where it says “Elements” and click.

You will than see a toogle drop down menu in the center that says “responsive” unless you have previously changed it to a specific device view. (images shows Galaxy S5)

There is a feature that also allows you to rotate the display, as if holding a mobile device in the horizontal position for a wider view.


Responsive Design Mode in Safari

Click on Safari in the browser menu, located at the top of the screen. When the drop-down menu appears, select the Preferences option.

Now, click on the “Advanced” icon, represented by a gear and located in the upper right hand corner of the window.

The browser’s “Advanced” Preferences will open and at the bottom is an option accompanied by a check box, labeled Show Develop menu in menu bar .

Develop should now be an available option in your Safari menu, located at the top of the screen. Click Develop. When the drop-down menu appears, select “Enter Responsive Design Mode.”

There you go…

The page opened in the current tab will now be displayed in rsponsive design mode. You will see a menu across the top which is self explanatory. You can switch between device displays.


Are you a Firefox user? No I didn’t forget you…

Enabling and disabling

There are three ways to enable Responsive Design Mode:

  • Select “Responsive Design View” from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on OS X)
  • Press the “Responsive Design View” button in the ToolBox’s tool bar.
  • Press Ctrl + Shift + M, (or Cmd + Opt + M on OS X)

and three ways to switch off Responsive Design Mode:

  • Select the “Responsive Design View” menu item again
  • Click the “close” button in the top-left corner of the window
  • Press Ctrl + Shift + M, (or Cmd + Opt + M on OS X). Prior to Firefox 34, Escape would also close Responsive Design View.

When the page displays in Responsive Design Mode there is a tool bar across the top.

There is a drop down selection menu similar to the other except the are no specific devices defined.

Nevertheless, you can check a sites responsiveness and make needed adjustments.

Microsoft

If you are using a Microsoft browser I can’t really help you much. Except to say that there is a tool, all though, much less feature packed then other browsers.

At least on “Edge” and Windows 10 there is.

Microsoft defines the display as “Windows Mobile” or “Desktop” and there is a manual adjustment selection that allows you to enter specifics.

 

Simply go the menu (three dots in top right) and select “Developer Tools.”

If all else fails… what to do? what to do?


If you would rather not deal with tools in your browser there are several website out there that will allow you to view your site or any site and test responsiveness.

BrowserStack is one of the paid sites I came across. Not sure why anyone would want to pay for something your browser will do for free. On the other hand if nobody was buying they would be there, right?

I found another at responsivetest.net and the devices listed led me to believe the site is a bit out of date. So, maybe that’s it! There was a need, thus a market for sites like these before the browsers caught up.

I hope you have enjoyed this tutorial and hope that it helps someone. If you haven’t been checking mobile view or responsiveness you are missing the boat. If your building an online business you really have to do this.

As mentioned most browsers will display a reponsive view if you change the size of the browser. If all this is just too much to bother with simply click the corner of your browser window and drag it in. You will get a good idea of what your site looks like on mobile devices and that’s what really matters.