Building a Website

Why is Responsive Design Important?

People access the World Wide Web with a wide variety of devices: large desktop computers, laptops, tablets, phones, even watches. Responsive design is the approach we use to create web pages that function well at any screen size by resizing automatically.

Principles of Responsive Design

Fluid Layouts

Fixed width layouts can't adapt to different devices. Using flexible grids allows a web page to resize proportionally and automatically depending on the screen or window size. Examples of CSS used for flexible layouts are Flexbox and CSS grid. Both have their strengths and weaknesses for particular layouts.

Flexible Images

Images have their own inherent size and need to be able to scale along with the rest of a page's content. Using a max-width property of 100% lets an image scale smaller but not go over its native size. Other media such as videos will likewise need to be scalable.

Media Queries

Media queries apply a specific set of CSS rules based on a device or browser window's width. Media queries can also be used to apply a set of rules for other situations such as printing a web page

Mobile-First

The mobile-first approach means a site starts with considering a mobile layout first. Then media queries are used to change the layout for a larger device or window. This is often an easier way to build a website, as the content is arranged stacked in a single column first, then expanded for larger screens.