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)

Making a form plan


I know forms aren't exactly exciting, but we must get user info somehow, so we might as well make them look nice and not stodgy and cold. A clean and friendly form will be easy and minimal, gathering only the info we need. We also need to make the process of filling out a form as clear and free of frustration as possible. The 320 and Up framework is built to facilitate quite a bit of this, but we will still need to do the requisite planning to make sure it is just so.

Luckily, this isn't going to be too tough for our rather simple needs. Let's think about the bare minimum we need to collect in order to follow up with a potential client. Here are the things we need:

  • The prospect's name

  • The company

  • The e-mail address

  • The phone number

  • A message

A few important things to keep in mind are to make sure that the labels for all fields let users know what to put in which field. I think that the most compelling argument for a usable form goes like this:

People read from left-to-right and...