Book Image

Mobile First Design with HTML5 and CSS3

By : Jason Gonzales
Book Image

Mobile First Design with HTML5 and CSS3

By: Jason Gonzales

Overview of this book

<p>The mobile first design philosophy aims to develop websites that will be lean and fast on small screens without sacrificing a tablet or desktop experience. Using HTML5, CSS3, and simple, standardized modern web tools you can make one site to rule them all.</p> <p>Mobile First Design with HTML5 and CSS3 will teach you the tools you need to make a modern, standards-based web page that displays beautifully on nearly any web browser—essential knowledge for anyone who makes websites!</p> <p>In this book, you will learn how to set up a project from scratch and quickly get up and running with a full portfolio website that will form the base for making almost any kind of web page. Learn to develop web pages that fit the web conventions we all have to conform to. You will learn how to make responsive image slideshows; image galleries with detail pages; and bold, eye-catching banners and forms. Best of all, you will learn how to make these things fast without compromising quality.</p> <p>This book will walk you through the process step by step with all the code required, as well as the thinking that goes behind planning a mobile first responsive website.</p>
Table of Contents (14 chapters)

The gallery detail


So, let's have a look at the content we want on this page and how to strategize the layouts for different devices.

The main things, I think, most people want to see in a portfolio of any kind are a few key images and some lengthier, detailed text describing images.

Here is the layout we will need for mobile screens:

The smaller squares, shown in the screenshot, will be the thumbnails that users can touch or click on to show the larger image above the smaller images on the page. The first thumbnail will be the default image that will be displayed when the Gallery page loads. We will also highlight the thumbnail that is currently active, with a border. In order to do this, we will need to make both full-sized and thumbnail-sized images of all the images. The description for each image will be below the thumbnails (and that's completely appropriate in my book). If your images are compelling enough, people will scroll down to read it.

Now, let's look at the opposite end of the...