Preface

For decades PCs were the only devices that could be used to surf the net. Although there was an increasing variety of screen sizes, and then laptops and netbooks arrived on the scene, the differences between them were never that great for them to create any serious problems. As a result, most websites had static dimensions. They had fixed widths in pixels. There was even talk of “default resolutions” (960–980 pixels). Some designers even went as far as to design fixed web layouts in Photoshop, which were then converted (or they had converted) 1:1 in HTML and CSS.

The advent of the iPhone on the market in 2007 changed everything. This was the first smartphone with a comparably large touchscreen display and a Webkit browser, which enabled you to view websites in exactly the same way as on a desktop PC — at least, that was the theory. What soon became apparent was that there was actually a huge difference between scrolling through a website on a large flat screen using a mouse and doing it on a small smartphone display using your fingers (while sitting on a train or in a café). There was a growing call for adaptable layouts.

This meant not only scalable layouts with a flexible width — which had already been around for a while — but also those that actually “readjust” themselves to different sizes of displays to give the best layout adapted to the conditions. In other words, menu bars are minimized to icons, sidebars are shifted down or collapsed, and content is reduced to the essential facts.

Ethan Marcotte coined a term for this principle for the first time in 2010: Responsive Web Design (alistapart.com/article/responsive-web-design). This can be achieved based on new techniques provided by CSS3, primarily through using media queries. Since then, the following statement applies:

However, CSS3 has also revolutionized other areas of web design. It was occasionally called “Flash Killer”. You can now use transformations like those in Illustrator, filters as in Photoshop and, most of all, animations as in Flash (well, almost) — without any need at all for JavaScript programming.

This course is split into two parts to give you an in-depth insight into these different new techniques. In the first part, comprehensive exercises will familiarize you with the key new functions in CSS3. In the second part, you will learn how to design responsive web layouts using media queries. For this course, basic knowledge of HTML and CSS is required.

Frank L. Schad
Nuremberg, September 2016