How do you make sure that the design of your website is Mobile friendly?

If you want to check the website which is already uploaded.

Then just paste your URL in Quirktools-Screenfly.

Thus you can check your website design in many devices.

Simple logic dictates that browsing your web site on multiple devices will tell you if your web site is mobile friendly (or responsive, on multiple devices - pc, tablet or smart phone). If it is not, I would urge serious consideration of creating your new brochure or ecommerce website using Wordpress. My company has created multiple web sites using responsive Wordpress themes that are created to reformat (reposition) their page contents to fit the type of viewing device they are being viewed on.

Examples of responsive Wordpress web sites that my company has created:

http://joemurrayaccounting.co.uk/

http://commercialphotographylondon.co.uk/

(delivering first page search results against thousands of similar web sites in London, UK)

Other benefits of creating your company web site using Wordpress is that there are multiple free plugins that allow you to a) easily edit content and b) Search Engine Optimize your web site to maximise search results that are relevant to your business.

 

peace,

Stephen Bradley - 

creative director, 

veetoo

 

Use a browser emulation tool like "responsive site viewer" in chrome and an User agent changer to test in the initial stages of development. Then test it across real devices specially an iphone, ipad, any2-3 andriod phone, tablet, blackberry etc as many as you can.

Perform a standard test to check that:

1. It's working on multiple mobile devices (technical aspects, loading speed, design, navigation, content display etc)
2. It's user-friendly (perform application human testing by different users)

Test it on as much as you can of mobile platforms and using different mobile OSs browsers emulation software as possible

For phone web application use Html5 and css3  standard and web application will be100% compatible with all mobile platform

Simple Browser resize is enough during development phase in Final Phase its better to use your Targeted Devices as you get better idea by using Device itself.

Set the website width in percentage e.g., (100%) 

I’m going to teach you how to make your website mobile friendly, which as you know is very important because more and more people are using mobile devices to access the web. So your first step is to log into Google Analytics, click on your site, and check to see how much traffic you get from mobile devices, and what devices they tend to use. So once you’re here, under ‘audience’, there’s a section called ‘mobile’, and you want to click on ‘overview’. And what this does is, it tells you how many people are visiting from desktop, mobiles, or tablets. OK? So this will give you a general idea of your mobile traffic, and depending on your niche, this could be quite different. So then you want to click on ‘devices’ and this will give you an idea of what devices people tend to use when they visit your site. Now in my case, it’s somewhat even. There’s some iPads, some iPhones, some Samsung Galaxies, but certain niches for some reason tend to have a lot more people using tablets, like iPads, or maybe if you have an Apple site, you’re going to have a lot more people using iPhones, right? So you just want to see what devices people tend to use, and then you want to look at your bounce rate, all the way to the right. And if this is quite high, like it is here, especially above your site average, then that could mean that your site isn’t optimized for mobile, and you want to follow the steps in this video to make your site more mobile friendly. So once you have an idea about your mobile traffic and the devices people use, you want to head over to ‘mobile test.me’. So once you’re at ‘mobile test’, you’re next step is to use the mobile device that people tend to use when visiting your site. And in the case of my Google Analytics data, it showed that Apple iPad was the number one mobile device people use in visiting my site, so I’d want to choose the iPad from the list, and it will load it up like this, and then you want to put your URL, either your homepage or an internal page, and then hit enter. And what it’ll do is, it’ll show you exactly what it looks like using an Apple iPad. You can even scroll and do everything, just like you would if you were actually visiting a site through the mobile device, and if it looks a little funky or strange that could be because your site isn’t responsive, or isn’t really designed well for mobile devices. So that would be something you’d want to correct. So once you get an idea of what your site looks like in mobile, and if it looks OK, like QuickSprout obviously looks good, you’d want to move on to ‘page speed insights’, so just Google, ‘Google page speed insights’, which basically shows you how you can make your web pages faster for both mobile and desktop devices. So, you want to put in your homepage URL here, and click on ‘analyze’. And when it’s done it actually shows mobile by default. So, for this video we’re going to pay attention to mobile and it gives you a score out of100. So what you want to do is address any problems that you see here under their ‘suggestions summary’, especially for mobile devices, which are sometimes different than a ‘suggestions’ they give you for desktop. OK? So if this score is very low, this could be one of the reasons that people on mobile devices are bouncing. OK? It could be just because the page loads slowly or it could appear funny depending on the mobile device. So once you’ve established the things you need to do and whether or not your site looks OK, your next step is to head to your WordPress dashboard and install a WordPress theme that’s responsive. OK? If you don’t already have one, you may want to talk to your web developer to determine whether or not you have one, but one way you can make sure you do, is to install one that’s responsive to start. So head over to your WordPress dashboard and under ‘appearance’ click on ‘themes’ and then click on ‘install themes’, and when you can search for themes by keyword, you want to put in ‘responsive’. OK? And what this will do is, it’ll bring up all the themes in the WordPress database that are responsive, including the responsive theme, which is actually quite nice, and obviously responsive, and they also have297 other themes for you to choose from. OK? So you can choose the one that’s best for your site, and that’s responsive. So, the next two things you want to do is basically just make your site load faster, because as you know, mobile devices aren’t typically as fast as desktops. So these are two steps you can take to make your mobile devices load more quickly. So the first thing you want to do is head over to your plug-ins area and click on ‘add new’. And you want to install something called ‘WP Smushit. So type in ‘W-P-Smushit, click on ‘search plug-ins’, and I’ve already installed it, but this is the one that you want to install. And what this does is, it compresses your images because on mobile devices image loading is usually80 percent of the time. OK? So if you can reduce your images sizes, you can reduce the loading time for a mobile device significantly. So once this is installed, hover over the media area of your WordPress dashboard and click on ‘bulk smushit’. And what this will do, it’ll take all the images on your site and actually make them smaller. So when people load them from a mobile device, they won’t take as long to load. So you want to click on ‘run all my images through WP smushit’ right now and that will take a while to do it’s thing. So while that’s working, or after that’s done, the next plug-in you want to install is a cache plug-in, because again, this just makes your site faster in general, which is especially important for mobile devices. So under plug-ins click on ‘add new’ and then put in ‘W-P-Total Cache’, and then that’s obviously already installed here. OK? In my case. So what you want to do is hover over ‘performance’, click on ‘dashboard’, and you just want to make sure everything looks OK. All right? So, by default, it already makes a cache of your page, so then it makes it faster for people to load. But just to make sure, you may want to perform a compatibility check by clicking on this button to make sure everything works OK, and then you want to empty all the caches to make sure you have a fresh page that is more up to date, so when people load the cache it’s actually the most current version of the site. And that’s something you want to do every time you make a change to your site. So that’s all there is to making your site very friendly for mobile devices. The most important thing you can do is have a responsive design that’s built into your WordPress theme, or you can have a WordPress developer make one for you based on your theme. But most themes today have that option. And then you just want to make your site load very very quickly so that people with mobile devices can see your content without having to wait.

Any web site can run on mobile but to have the best expiriance we need to make an extra layout template for it that could be tested on sites like quirktools.com/screenfly. The site can be coded to "see" if we surf with mobile and redirect us to the "mobile version". I have this issue with my personal site and I need extra "mobile version" with new table arhitecture and layout. The bad thing is that flash, java or popup contents are not so welcome and need specialised technical treatments...

Usualyy dsigning a site to be responsive is the best and surst way to make ure youve got a user freindly website.