It’s a very exciting time to be a web developer. The web is being accessed by a rapidly increasing number of devices (especially mobile ones), each with different operating systems, browsers, and screen sizes. This makes for a very challenging, but stimulating, job!
Here’s a brief round up of some of the latest developments, my take on them, and what they mean for your site. Pulling all these things together means that you end up with the best site possible for you and for your visitors. The site will be easier to maintain, will be faster, and will have better search engine results.
I’m a strong believer in the One Web: people should be able to access all of your web site quickly and easily, regardless of the device they’re using, the type of connection they are on, or any disabilities they have.
- HTML5 for the content;
- WAI-ARIA roles, landmarks, and labels to improve accessibility;
- Microformats or Schema.org to add extra semantics;
- CSS3 for the presentation;
Every device (phone, notebook, desktop computer) that views your site has a different set of capabilities. Progressive Enhancement means that I add the layers above piece by piece, adding only the features the device says it supports. This results in a lean site, that each device might experience differently: the experience is tailored to the capabilities of the device.
Responsive Web Design
Responsive Web Design is about embracing the flexibility of the web as a medium. The structure of your site, the content, and the blocks that that contain the content, should be fluid and flexible so that they can respond to the device viewing them. An important part of this is CSS3 media queries. These little bits of code allow the application of different presentational effects (most noticably layout), depending on factors such as screen size.
Rather than spending time trying to make your site look identical across every device, we can focus on the business objectives of the site and on sending the most appropriate version of the site to each device. Your site might look quite different on the small screen of a smartphone and the large, widescreen, monitor of a desktop computer, but it will look great on both.
Mobile First / Content First
Mobile First is a Progressive Enhancement version of Responsive Web Design, with a strong focus on screen sizes. I build the small screen version of your site first. Then, extra rules (and features) are added for progressively larger sceen sizes.
Mobile First is also about simplifying and streamlining. This means focusing on what tasks users want to do, what functionality they need, and what content they want. It also mean avoiding adding any extra cruft or distractions that would get in the user’s way, so that can do what they want to, as fast as possible.
Content First is about focusing on the content as the most powerful part of your site. This means providing relevant, interesting, and well-written content. It also means keeping an eye on your content, and having a plan for updating on a regular basis if necessary.
Progressive Enhancement means increased speed and the best possible experience for every user. Mobile First Responsive Web Design means that you create and publish the content of your site only once, and it looks and feels great on any device that it’s viewed on.