Do you know what experience your mobile visitors get when they visit your site?
What about tablet visitors?
Visitors checking out your site from their TV?
Heres the deal…
You have no choice how, when, where and on what device your audience chooses to connect with you.
Now that mobile web traffic has exceeded that of the personal computer, we can’t ignore those that choose their mobile device to connect and engage with our businesses or content.
Having a mobile-friendly site is no longer a nice to have. It’s a must to succeed in this multi-device world we live in.
There are many ways to build a mobile-friendly website but one of the “hotter” topics is responsive design.
I frequently get asked, “Greg, how do I know if my site is responsive?”
Today, I’m going to share 3 steps to test and see if your website is responsive.
Let’s dive in…
1. Use Your Desktop Browser
The fastest way to test if your website is using responsive design is to open your site using a browser like Chrome, Firefox or Safari and taking your mouse to the bottom right corner of the browser window and dragging it from the bottom right to left. You can see a good example of me doing this with my site in the below gif.
Now, if you see your content shifting and adjusting to the new dimensions of the browser window your site is most likely responsive. If you’re using themes from StudioPress or a responsive theme for Themeforest.com you’re most likely in good shape.
Although testing from your web browser is a quick and easy way to see how responsive your site is, you’ll most definitely want to test on your actual devices.
Remember, the main benefit of using responsive design is so that your website adapts its layout for multiple screen resolutions. This gives you the best opportunity to deliver a good user experience for your audience no matter what device they are on.
Note: Responsive design as a practice is still evolving every day, so as new devices hit the market your site isn’t guaranteed to look good on every device just because you’re using responsive design.
Think about all of the smart watches hitting the scene and the in car dashboards. There are screens connecting to the internet all over the place and all within your home so it’s ultimately a difficult challenge we face moving forward but responsive is a great step in the right direction as it stands now.
2. Use Your Current Devices (Smartphone, Tablet, Desktop)
There is nothing better than testing on real devices. Whether it’s your own phone or you go to a store like best buy and try accessing your website on numerous devices.
This is hands down the best way for you to get a realistic idea of what your mobile visitors experience when they visit your site.
There are plenty of responsive emulators out there (see number 3) but, you can’t 100% rely on them to give you the exact users experience.
3. Use an Emulator
As I just mentioned, you can use an emulator to check if your site is responsive. There are plenty of tools out there that can help you with this and many of them work in different ways, which is why I don’t think any one does the job entirely.
But, if you’re going to use one, I recommend Screenfly by Quirktools.
Visit here and enter your URL. You can see what happens when I do this for my site below.
In the below you can see that I’m viewing my website at the desktop view.￼
When you click the “desktop view” you get options for various screen resolutions as you can see below.
To enable scrolling so that you can get a better sense of the users navigation through your site be sure to click this icon. Then you can scroll freely and navigate through your site.
Want to test on tablets? No problem. Click the tablet setting and select from the various Tablet sizes/devices such as the Kindle Fire HD 7, Google Nexus 7 and the various Apple iPads.
Now do the same for smartphone devices.
You’ll even notice a resolution for TV. This is more and more likely to be used as our TV’s give us open access to the internet.
Now, One of my favorite features Screenfly is the custom resolution option.
As new devices hit the market, you can use this option to test your user experience at various resolutions.
Note: If you use a m dot site for your website through a tool like Duda Mobileor Brick and Mobile, your mobile optimized site will not show up in this emulator and even most of the emulators I’ve seen out there.
This is another reason you’ll want to test on actual devices especially if you’re developing sites and prospecting small business clients like local restaurants.
Remember, don’t solely rely on an emulator.
The reason we’re doing this in the first place is to experience first hand what our mobile users experience when they visit our site from various devices.
Using these emulators doesn’t simulate the experience perfectly as you’re using a mouse to navigate when your users are using their fingers and could likely be experiencing fat finger syndrome, which we definitely don’t want to do.
Want An Image Of Your Site On Various Devices For A Presentation?
If you’re giving a presentation and need an image of your website on multiple devices at once you can check out Am I Responsive.
Just enter your URL and you’ll get your site on some Apple products that you can then take a screenshot of.
Note, if you’re using a wordpress plugin like WPTouch Pro, it sort of breaks this tool.
Additionally, if you’re using a separate mobile website and it’s hosted on an m dot domain, it won’t show up in this tool either.
When using this tool you have to enter your website URL with the “http://“before it or else it doesn’t seem to work.
What If I’m Not Using Responsive?
Now, if you go through this guide and realize that you’re not using responsive AND your website is not mobile-friendly don’t panic.
There are plenty of ways for you to get started. If you’re tight on budget check out WPTouch Pro. It’s a very simple and affordable plugin to add to your WordPress site.
If you can, I recommend finding a responsive WordPress theme. I’m a huge fan of StudioPress as I use the Genesis Framework for my site and it’s super stable. StudioPress offers some amazing responsive themes to pick from.
If you have the budget or you’ve been looking to upgrade from your responsive theme, I recommend outsourcing the development of your responsive site.
Finding the best people is always difficult, I know.
If you’re using WordPress, I recommend you find the framework you site is built on as you can then google developers that design for that framework.
For example, if you use StudioPress, you can browse by designer on their site and see what styles they have and pick from there.
Not on StudioPress? Just do a search for your framework to find people that have designed/developed for that framework. Believe me, you’ll find plenty of options.