Geeks With Blogs
Phubar Baz Musings of an HTML5 Programmer

I recently finished reading "Mobile First Design with HTML5 and CSS3" by Jason Gonzales. This book aims to teach you how to build web sites that can react to the device they are being used on. For example, if you're looking at a web site on a phone with a small screen you want the site to look different than if you're looking at it on a monitor with a huge screen. You just can't fit as much stuff on a small screen. The mobile first concept means that you first design your web site to look good on a small screen then work up to making it look good on the big screen. Most of the time as developers we do it the other way around doing mobile as an afterthought. As more and more people use mobile devices to access the internet this is becoming more of a necessity. You can't afford to alienate half of the visitors to your web site.

This book teaches you about responsive web design by building a personal portfolio site. The author uses a very specific tool for responsive web design called 320 and Up. 320 and Up is an open source project you can get from GitHub. It works with a CSS preprocessor called SCSS which makes it easier to manage your site's style.

Chapter 1 is an intro to reactive web design. Chapter 2 shows you how to setup 320 and Up then starts working on the homepage for the example website. He shows what it looks like on a large screen and mobile screen. This chapter is full of CSS and HTML showing how to build the home page header, hero image, gallery and footer. My only gripe here is that I wish there were more screen shots. It was hard for me to follow what his changes were actually doing without seeing it. Then he shows how to use @media queries to react to different device sizes.

Chapter 3 shows how to build a gallery page. Again it shows how the gallery panels would look on large and small screen and how to make it work responsively. Chapter 4 shows how to create a contact form. It uses some HTML5 attributes to make the form work better on mobile devices and some form validation. Chapter 5 shows how to build an "About Me" page. It shows how to use icon fonts that come with 320 and up to add some images.

The book has two appendixes. The first is on how to use the HTML5 boilerplate project, which contains everything you need to make it easier to create cross-browser HTML5 web pages. The second appendix talks about different CSS preprocessors and why you would want to use them.

If you're looking to learn how to build a reactive website and want to use a framework such as 320 and Up plus SCSS then this book will probably be helpful for you. If you want to learn more about how to use CSS media queries directly rather than through a framework then this book probably isn't going to get you there. I would have preferred a few more actual screenshots of what we were building to get a better idea of what how the code was changing the page. Other than that there are some good ideas on how to make your web pages look good on any device.

Posted on Tuesday, March 4, 2014 9:37 AM | Back to top

Comments on this post: Review: Mobile First Design with HTML5 and CSS3

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © PhubarBaz | Powered by: