Forum Moderators: not2easy

Message Too Old, No Replies

Making a Mobile Friendly Site With a CMS (Content Management System)

         

engine

3:38 pm on Jan 23, 2015 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



For many webmasters making a mobile friendly site is seen as a challenge, and with many saying, "you have to get your site mobile friendly," we're always looking for ways to make the transition easier.

There's an excellent thread some of you may have missed last year: 10 Top Tips for Responsive Design [webmasterworld.com]

It's worth bookmarking as it's packed full of great ideas.

Moving on from that, what about those of you running a content management system? Many CMS come out of the box with a certain level of mobile friendliness, but, there are tweaks you can make to improve the performance even more.

Make sure you've checked your CMS as it may have better custom themes for mobile. Sometimes the themes will be listed under responsive.

When it comes to testing the site, you've got to think of two main things: Most important to the user is how the site looks on small screen devices. Secondly, an importantly for the webmaster is that the site is functioning correctly. Does it work with different OS (Android, Apple, Windows, etc.). Using a simple browser resizer will give you a rough idea, but there is no substitution to actually displaying it on a device, from desktop to smartphone, of any brand.

Here are a few tools to get you started (in no particular order).
Firefox Browser, in Developer and select "Responsive Design View"
W3C Validator [validator.w3.org...]
Google's Mobile friendly test [google.com...]
Page speed check [developers.google.com...]

The thread I mentioned above has a selection widely available testing tools. Do you have any others to suggest?

not2easy

6:39 pm on Jan 23, 2015 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



These two are primarily for developers but the testing tools and resources are helpful when you need information and answers.

The Apple Developer Resources Library offers mobile development tools and resources, information for Safari, iOS and App development. The new coding language for apps "Swift" was recently introduced and developers can also find learning and testing resources at this center: [developer.apple.com...]

Mozilla's Developer Center is here with resources for developers of Android, FireFox and the Mozilla OpenSource OS tools: [mozilla.org...]

graeme_p

7:17 pm on Jan 23, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The other thread does not mention Chrome/Chromium's device emulation tool. It is toggled with the smartphone icon.

I mostly work in FF using the responsive design view (when I do design work that is - not that often) and occasionally check Chromium's emulation of common devices.

not2easy

7:51 pm on Jan 23, 2015 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



I did not mention the Chrome Extension because Google recommends using the online tools instead (https://developers.google.com/speed/pagespeed/insights_extensions)
Note: As of August 1st 2013, we have updated the online version of PageSpeed Insights with in-depth multi-device performance analysis: critical path and rendering performance, UX analysis, and more. The Chrome extension does not currently offer the same functionality, so when possible, we recommend using the online tool or the Insights API instead.

The Extension may give you a valid mobile view, but lacks analysis details that help you fix issues.