LINKS: Resources for mobile design mobile

With deadlines around the corner, it’s great to have some resources you can go to in a hurry.

So this month we have put together a list of great resources to have on hand when designing and building mobile sites.

Many of the tools listed below dive far beyond the requirements for a site to be Google mobile friendly and would require some programming knowledge. Adobe Muse is quite capable of creating mobile friendly websites, for those of you that want to dive deeper into your sites capabilities here are some great resources available.

This site does a great job at reducing the size of your PNG images. How it does such a great job we don’t know, we are still hoping it's magic:

TINY PNG

TINY PNG



MOBILE PHONE EMULATOR

There are many online emulators, many of those many are not very good. We love this one as it takes your screen resolution into consideration when emulating a mobile device. So far this online emulator has done a great job for us, so go check it out:

Phone emulator



W3C TOOLS

Ok, now to get down to the nitty-gritty. W3C has some great pages to help check your site for all manner of mistakes to help us catch them before our sites go live. First is a link to the overall set of tools:

W3C tools



Now here are a few individual pages we find very helpful. Check your HTML.

Firstly, here is the Markup Validity checker. This puppy checks through your HTML and if it finds any issues it gives you a list of the errors with a description next to each error:

W3C tools



Check your CSS.

Right, we’ve got through the HTML now let's check that CSS. W3C has got you covered here also. Again, any errors found are listed along with a description of the error so you can fix your code:

CSS tool



Check everything.

Like a mythical creature, W3C Unicorn will swiftly fly through your site performing a number of checks. Tasks can be chosen from a dropdown that offers:

General Conformance Check, this lumps together an HTML validator and a CSS validator along with a few other pieces of useful data.

CSS validator that reports back with a list of CSS errors and their descriptions.

Their MobileOK Checker, this is a great tool. It offers a plethora of information regarding the markup, scripting, color and graphics and much more. It’s a good idea to run this test if you want to wrangle the most out of your mobile site.

Custom task, this allows you to make a more refined choice inside any of the W3C tests.

W3C Unicorn



GOOGLE TOOLS

Google offers some great tools and documentation that is good to have on hand when building and testing your site.

Here is the latest, the Google Mobile-Friendly test. Paste your URL and Google will analyze your site, it will then return either mobile friendly or not mobile friendly. If your site is not mobile friendly, the Google test will list the problems it found.

Google friendly tester. (note this will not work demo sites on Business Catalyst)

Google Friendly Test



Page speed tester.

Type in your URL and Google runs a speed test that checks things for both a mobile and a desktop site. The results are then displayed in three categories Red: Should fix, Orange: Consider fixing and Green: Passed. Under the Red and Orange category you can click on the Show how to fix which gives a set of solutions and even has a see screen-shot which shows on a mobile device displaying your site, exactly where the problems are occurring.

Speed Tester



Multi-screen information.

A great site from Google that breaks down creating a business across all devices with lots of hints and tips. Download some of the case studies and read how different businesses went about implementing their web presence across multiple devices.

Multi-screen Tester



Mobile user information.

This tool allows you to view data about mobile users that Google has gathered. Select your key demographic and other potential customers, and view key differences between 2011 and 2012. This data can form part of your research for your clients. Especially if management buy-in is needed to confirm budgets on a mobile site implementation. This data could also be used in blog posts or infographics.

Mobile user information



Webmaster tools.

Webmaster tools have several useful features if you are investigating your mobile site. If you have mobile-specific content, then test to see if different mobile GoogleBots can fetch your pages ok. This is useful for checking your mobile site setup and investigating any performance issues or poor search results.

Additionally, if you redirect mobile users to specific mobile versions of your URLs, then Mobile Sitemaps can be added in Google Webmaster Tools. Check the Mobile Sitemap Specification for more information.

Webmaster tools



Google keyword tool.

The Google keyword tool gives a guideline on the monthly volume in searches. As well as looking at desktop searches, the tool can also show data for searches on mobile devices.

Simply select ‘advanced options’ > ‘show ideas and statistics for’ > and select ‘mobile’.

Local search trends can be added to see seasonal fluctuations or if keyword searches are increasing in volume. Select columns and ‘local search trends’. This will show a simple bar graph, but if you download the data it will give some figures over time.

It is worth checking your target keywords and investigating potential local search term variations. Monitor accuracy of this data by comparing it against your visits from search terms in high positions.

Google keyword tool.



Caching your site.

This is a great article from Google that discusses optimizing your site by data compression.

Caching your site



Mobile ads blog.

Although not strictly part of organic search, it is worthwhile knowing about some paid search tricks which can also help clients give their mobile campaigns a push.

With a multitude of segmentation options between tablet and mobile phones, you will be missing out on extracting the maximum amount of ROI for your marketing spend if you do not use AdWords. Getting the most from Ads is a whole series of blog posts in themselves but there is a whole host of options Google have developed for mobile devices.

Here are some of the potential methods to look at that can drive traffic to your mobile landing pages using mobile ads:

  • Phone numbers in ads using ‘click-to-call’,
  • click-to-download
  • Mobile Ad Sitelinks
  • Seller Ratings
  • Location Extensions (Multiple Addresses too!)
  • Location Targeting

View the superb Mobile Ads Blog for the latest updates, case studies, and examples.

Mobile ads



Caching your site 2.

A great resource with documentation and code from Github to help you balance your users experience by caching for speed while also refreshing when updates are made to your sites code:

Caching your site 2



GZIP

Ok, Googles had it’s time in the spotlight, now for some further resources that are useful if you love rummaging through the Javascripts and ambling through the CSS.

Gzip is a free compression software that can speed up your site by compressing its code. Outside of building your site in Muse, it is well worth looking into using Gzip, it is fairly easy to implement. Here is the link:

GZIP



YUI COMPRESSOR

And now over to our obfuscation department… YUI is a JavaScript compressor that compresses code by removing comments, white spaces and using the smallest possible variable name. It can compress .js and .css files in this manner. You would be amazed how much file size can be saved on large JavaScript or CSS files by using this method of obfuscation. Here is the link:

YUI COMPRESSOR



Y-SLOW

Why so slow, that's a question that is answered by YSlow, a web report analyzes that can be added to your browser to check any website and suggest ways to improve it’s performance. It gives a great breakdown of your site, I have the Chrome browser Haddon installed. It’s great to have a quick access button on your browser to check over your site. Here is the link:

Y-SLOW



MARKETING GRADER

This site creates a great multi-page report about your site, checking it for keywords that you choose and much much more.

MARKETING GRADER



MARKETING GRADER

If you want to quickly analyze your mobile-readiness and the rest of your marketing efforts, check out Marketing Grader -- it assesses your blog, SEO, social media accounts, and mobile optimization.

To start your analysis, simply enter your website URL and email. Then, Marketing Grader will analyze your site and give you a score out of 100 -- the closer you are to 100, the better your site is. In the mobile component of the report, Marketing Grader will show you a preview of your page on mobile and some suggestions on how to improve that page.If you want to quickly analyze your mobile-readiness and the rest of your marketing efforts, check out Marketing Grader -- it assesses your blog, SEO, social media accounts, and mobile optimization.

To start your analysis, simply enter your website URL and email. Then, Marketing Grader will analyze your site and give you a score out of 100 -- the closer you are to 100, the better your site is. In the mobile component of the report, Marketing Grader will show you a preview of your page on mobile and some suggestions on how to improve that page.

Use this tool



Article Author: Dan Kellett

Dan comes to 123Muse with a background in fashion photography, videography and media creation.

He has worked with many media products as a museum interactive media designer and creative director of a large Miami based agency. Dan works to integrate media software into the Muse workflow.

Skills Highlight:

Photo & Video

Photoshop & Lightroom

Video & Audio

Looking for Adobe Muse Widgets? Looking to for Adobe Muse Training?
Copyright © 123muse.com 2015 - All rights reserved