Test how mobile-friendly your site is.

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Test how mobile-friendly your site is.

Post by RSteinwand »

Nice front-end for Google PageSpeed Insights:

https://testmysite.thinkwithgoogle.com/intl/en-in
Rick
User avatar
Lou
Rank V - Professional
Posts: 295
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

Re: Test how mobile-friendly your site is.

Post by Lou »

Old link but thanks Rick. turns out the site of interest is ho-hum
Being a dinosaur, ie no smart phone, ipad nor whatever (well the flip-phone does have a <2" screen.

What are some/a good simulator I could use in development to check what pages look like on the small screen?
Lou
Say what you will about Sisyphus. He always has work.
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Test how mobile-friendly your site is.

Post by RSteinwand »

Hi Lou,

Try Opera Mobile Emulator. It doesn't have all the features of Chrome for Android, and renders via Opera's older engine, but still does a decent job. FWIW, it hasn't been updated in years.
Rick
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Test how mobile-friendly your site is.

Post by Albert Wiersch »

I haven't used it too much but I think Chrome has a nice way of doing this. Open a web page and then right-click on it and go to 'Inspect' or press Ctrl+Shift+I. In the Developer Tools window, press Ctrl+Shift+M. In the browser window there should now be a 'device toolbar' and you can select a device and orientation (portrait or landscape) to simulate what it would look like on that device.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Test how mobile-friendly your site is.

Post by RSteinwand »

I already have a mobile friendly site, so I just scrunch the browser to a narrow width of about 300px, which is the same size as a dinky iPhone, checking for problems as I change the width. I might have to add a css @media tag to tweak something below certain widths or add a background image only wider than certain widths.

Changing an existing site to responsive is a tremendous learning project. I find it best to start from scratch with a new template and move your content to it.
Rick
User avatar
Lou
Rank V - Professional
Posts: 295
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

Re: Test how mobile-friendly your site is.

Post by Lou »

Thanks for the pointer.
Rick, I think you are correct about starting from scratch. That is in fact the intent. After several years of not being able to agree on a "new look" the time has come so I am moving forward anyway. Most of the content is nicely contained in included files isolated for the look and feel template. Well, mostly. The more involved things with DB access, ticket ordering, donations and PayPal interface, are removed from the old page structure.

Will check out the emulator
Lou
Say what you will about Sisyphus. He always has work.
RoyReed
Rank I - Novice
Posts: 14
Joined: Mon Nov 05, 2007 9:27 am
Location: London, UK
Contact:

Re: Test how mobile-friendly your site is.

Post by RoyReed »

I think the Responsive Design Mode in Firefox is even better than Chrome's equivalent. Ctrl+Shft+M launches it (as well as having a button to lauch it from the Inspector dialog).

Firefox-RDM.png
Firefox-RDM.png (56.12 KiB) Viewed 9499 times
Post Reply