- 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
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.
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
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.
More at the Google Webmaster Central Blog.
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
- Development time – starting small and adding features for larger screens results in leaner code