Go Mobile First is a mobile-first starter theme for WordPress.
This isn’t a framework. Actually, it’s the opposite of a framework. I’ve removed as much as possible, so you have a simple, clean foundation to build on.
I’ve also added lots of comments to make things as easy for you as possible.
What is mobile-first? #
Mobile-first is an approach to web design that’s kind of like graceful degredation in reverse. You start with a collection of basic styles that work on all browsers (including older browsers and not-so-smart phones), and then add progressive enhancements for more capable browers/devices and bigger screens.
But mobile-first is about more than just how a site looks. While this theme is deliberately lightweight, you should also take some additional steps to improve the performance of your site.
What does it look like? #
Go Mobile First is a modified version of this site.
It includes a fluid single column layout, responsive text, and a collapsing navigation menu on smaller screens for browsers that support it.
Powered by HTML 5 #
This theme makes use of the new HTML5 semantics. If you haven’t used them before, you might want to familiarize yourself with them. Dive Into HTML5 by Mark Pilgrim is a good place to start.
Color Palette #
Go Mobile First uses a simple, muted color palette. Colors were chosen for their high-contrast and accessibility for color blind individuals.
Feel free to customize as you see fit (you might want to use the free Color Oracle app to check for accessibility).
- Link Blue: #0088cc
- Button Hover Blue: #005580
- Dark Gray: #272727
- Muted Gray: #808080
- Gray Lines & Borders: #e5e5e5
Go Mobile First uses a sans-serif font stack: “Helvetica Neue”, Helvetica, Arial, sans-serif.
I put a lot of effort into the typographic scale for the site. (You can read more about that process in Typography First Web Design.) It was built using Chris Pearson’s Golden Ratio Typography Calculator and Iain (not a typo) Lamb’s Typograph app.
The Scale: 14px, 15px, 17px (base), 20px, 23px, 26px, 30px, 34px, 51px, 68px, 85px, 102px.
Learn how to get the most out of Go Mobile First:
- A Brief Intro to HTML, CSS & WordPress
- The Go Mobile First Style Guide
- Using Icon Fonts
- Adding a header background to Go Mobile First
- Adding a sidebar to Go Mobile First
- How to trick out the performance of your WordPress site
Change Log #
December 12, 2012
Changed menu toggle on smaller screens to a button to fix Opera Mini jQuery bug. Updated default button styling to maintain link consistency.
November 6, 2012
Switched to jQuery.com-hosted CDN for jQuery to fix loading issues.
October 18, 2012
Fixed search form bug.
The License #
This theme, like WordPress, is licensed under the GNU General Public License as published by the Free Software Foundation.
Make Awesome Stuff #
I really hope you’ll use this theme to go make some cool stuff. If you do, I’d love to hear about it.
- More articles on...