Author: Jeremy Tarpley

Tools discussed at the GoMobile retreat

  • Foundation 5 – Latest mobile-first, responsive front end framework from Zurb
  • Codepen.io / Jsfiddle? – Allow real-time testing of html/css/js snippets
  • Regexr – Real time testing of regular expressions and great regex documentation
  • Browserstack – Test web sites on live virtual machines with just about every web browser.? Many mobile devices and OSs available as well.
  • Siteimprove – Web governance, scans for broken links, spelling and grammar problems, unwanted content, accessibility problems and more.
  • Ghostlab – Synchronized web development and testing
  • BrowserSync.io – Open source synchronized browser testing
  • Ghost Inspector – Automate front-end testing, checks the operation of specific functionality and page elements
  • Invision – Tool for collaboration on prototypes and mockups
  • Macaw – Responsive prototyping tool, outputs?HTML5 and css (also Froont, WebFlow, Adobe Muse, PineGrow)
  • Google Web Designer – Creates interactive HTML5-based designs and motion graphics, good for custom banners (Also Adobe Edge Animate)
  • Microsoft Edge Browser / Firefox Developer Edition

Learn more about creating quality content for the web

We spend a ton of time and effort on technology, design and other work that goes into building websites, but our effort is wasted if the content of our websites isn’t what our users need.

For our May WebTalk, we’re going to discuss writing for the web.

We plan to cover topics including

  • identifying your audience
  • writing content that is useful, clear and friendly
  • staying organized
  • proper usage of page titles and headings

The slides for Writing for the web are available in Google Docs.

Google will now label mobile friendly sites in mobile search

We have a new incentive for going mobile!

Earlier this week, Google announced a new mobile-friendly label to help users identify responsive and mobile sites at a glance from?their mobile device. ?To check if your site has the label, just search from your phone or tablet. You can also use Google’s Mobile-Friendly Test?to check your site and review the documentation in their Webmasters Mobile Guide.

Mobile friendly label used in a search result

More at the Google Webmaster Central Blog.

Source:?Google?via Digital Trends

 

Why mobile first?

If you?re new to the concept of mobile first, its simply the practice of designing and developing websites starting with the mobile experience.

Hearing the term mobile-first a couple years ago, I thought?how dumb, web surfing is best done on a huge monitor! ?We should just give the one or two mobile users out there separate mobile sites.

Two years and several responsive sites later, I get it.

The growth of mobile has been discussed before, so lets cover other benefits.

Using a mobile first approach improves:

  • Mobile experience (duh) – mobile becomes first priority instead of an afterthought
  • Content – the small screen compels us to write concise content that is focused on user needs
  • Accessibility – screen readers and mobile browsers thrive on clean, semantic html
  • Usability – simplifying our interfaces and prioritizing content over navigation leads to sites that are easier to use
  • Speed – the constraints of mobile bring us to remove unnecessary cruft; reducing ornamentation, graphics and fancy javascript makes everything faster
  • Development time – starting small and adding features for larger screens results in leaner code

Where to go from here

We have a few points on?how to think mobile first?under the Go Mobile strategy page. Then definitely read?Mobile First by Luke Wroblewski. Everything here is rehashing ideas from Luke’s book.