Book Image

Web Design Blueprints

Book Image

Web Design Blueprints

Overview of this book

The book delivers simple instructions on how to design and build modern Web using the latest trends in web development. You will learn how to design responsive websites, created with modern Flat User Interface design patterns, build deep-scrolling websites with parallax 3D effects, and roll-your-own single-page applications. Finally, you'll work through an awesome chapter that combines them all. Each chapter features actual lines of code that you can apply right away.
Table of Contents (12 chapters)
Web Design Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Introduction to responsive web design


Let's be honest, you already know what responsive web design means. But for the sake of the age-old tradition of pedagogy, I'll explain. Responsive web design is designing a website to optimize for multiple different viewports. What this means is that in this part of the book, I'll be discussing various techniques for creating a webpage that will look good on mobile devices, tablets, desktops, and laptops, and so on.

I'm not a fortune-teller, but I suspect that mobile devices are not disappearing any time soon. In fact, in my work, I've seen the traffic move from desktop to mobile. In many areas, we see that mobile is the primary tool for people's search for information. If it's not the primary one, it's at least a growing audience. Or else, they are the audience that leaves a site that doesn't have a mobile Web presence. Therefore, the demand for web developers who understand responsive design is paramount to the industry. This skill is a must-have if you want to stay current in the developer workforce.

In this chapter, I will discuss responsive elements, layouts, media, typography, and navigation. You can jump ahead to a section you are particularly interested in or read the whole thing from beginning to end. If you follow along through the entire chapter, you should have a good starter template for a responsive website. We'll learn the following:

  • Responsive web design basics

  • The user agent

  • The media query

  • Responsive images with CSS

  • Responsive images with srcset

  • Responsive video

  • Responsive typography

  • Responsive layouts

  • Responsive menus with CSS and JavaScript