Reference Guide: Building a Mobile Friendly Website
Tags: ui, mobile, css, beginners
Published: 2019-04-02 09:13:20

---
title: Reference Guide: Building a Mobile Friendly Website
published: true
description: Brief descriptions and examples of the tools you will need to make your project beautiful on devices of all sizes. Now with 3x the links as the leading brand!
tags: ui, mobile, css, beginner
---

<img src="https://thepracticaldev.s3.amazonaws.com/i/nndbkjpgob84vdn17y8w.jpg" />

If you're a new web developer you've probably made some small web-apps or websites that you want to show off to your friends and family. However, most of those people will likely be checking out your nifty web-app on their mobile device. If you designed your project on a desktop you may not have thought about how it looks or works on a mobile device. If that's the case you probably received plenty of feedback from those you shared your project with who either used a mobile device or sub-1080p display to check out your cool new project. 

Now you're exploring how to make your project **mobile friendly** and I'll _introduce_ you to the tools you need to make that happen. All of these tools are useful for making your website _responsive_ or _adaptive_, but there is no definitive way to use them to make your project look great on devices of all sizes. It entirely depends on how your website is used and what you need displayed.

The goal of this post is to not overwhelm you with a ton of information, but instead give a brief overview for each tool with links to more in-depth information so you can skip to the part you want to implement or just get an idea of what is available for when you need it.

# Viewport

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
>The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%.

>The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
-MDN

"A pixel is not a pixel." Devices with higher DPI (Dots Per Inch) or PPI (Pixels Per Inch) can make designs made for desktops look off. The average desktop monitor can range from ~80dpi to ~200ppi where a mobile device can often be more than double that.

[MDN: Viewport Meta Tag](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)
___

# @viewport
```css
@viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
```
>The @viewport CSS at-rule lets you configure the viewport through which the document is viewed. It's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as Microsoft Edge).
-MDN

[MDN: @Viewport](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport)

___

# Viewport units! (vw, vh, vmin, vmax)
```css
div {
  width: 50vw;
  height: 50vh;
}
```
>The new units – vw, vh, vmin, and vmax - work similarly to existing length units like px or em, but represent a percentage of the current browser viewport.
-[Miriam Suzanne](https://css-tricks.com/author/miriam/) @ CSS-Tricks

 <br />

>- 1vw: 1% of viewport width
- 1vh: 1% of viewport height
- 1vmin: 1vw or 1vh, whatever is smallest
- 1vmax: 1vw or 1vh, whatever is largest

>-[Chris Mills](https://dev.opera.com/authors/chris-mills/) @ Dev.Opera

[CSS-Tricks: Fun with Viewport Units](https://css-tricks.com/fun-viewport-units/)
[Dev.Opera: CSS Viewport Units: vw, vh, vmin and vmax](https://dev.opera.com/articles/css-viewport-units/)

___

# @media queries
```css
@media screen and (max-width: 900px) {
  div {
    width: 5vw;
    height: 5vw;
  }
}
```
>Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
-MDN

[CSS-Tricks: CSS Media Queries](https://css-tricks.com/css-media-queries/)
[MDN: Using Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)

Another option would be to create whole stylesheets that load per screen size, aka the 'Adaptive' model
[CSS-Tricks: Resolution Specific Stylesheets](https://css-tricks.com/resolution-specific-stylesheets/)

___

# CSS Grid
```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}
// If you had 9 divs inside a div with the classs .container 
// this will create a 3 x 3 grid of those 9 inner divs with 5px between them
```
>CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. 

>You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element's children (which become Grid Items).
-CSS-Tricks

The **fr** unit is a fleixible unit for defining CSS grids. 
>The fr unit (a "fraction") can be used when defining grids like any other CSS length such as %, px or em.
-[Robin Rendle](https://css-tricks.com/author/robinrendle/) @ CSS-Tricks

[CSS-Tricks: Getting Started With CSS Grid](https://css-tricks.com/getting-started-css-grid/)
[CSS-Tricks: A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
[CSS-Tricks: An Introduction to the fr CSS unit](https://css-tricks.com/introduction-fr-css-unit/) 


___

# Flexbox
```css
.container {
  display: flex; /* or inline-flex */
}

```

>A flex container expands items to fill available free space, or shrinks them to prevent overflow.

>Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

[CSS-Tricks: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
___

# Responsive Fonts: em and rem

```css
h1 {
  font-size: 2rem
}
```
>While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.
-[Chris Coyier](https://css-tricks.com/author/chriscoyier/)

[REM vs EM – The Great Debate](https://zellwk.com/blog/rem-vs-em/)
___

# calc()
```css
.content {
  /* Subtract the header size */
  height: calc(100% - 50px);
  overflow: auto;
}
```
>calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy.

>The most useful ability of calc() is its ability to mix units, like percentages and pixels.
-[Chris Coyier](https://css-tricks.com/author/chriscoyier/) @ CSS-Tricks

`calc()` can really save your butt when you have tight rules, but also need responsive design.

[Hardcore CSS calc( )](https://medium.com/buildit/hardcore-css-calc-bdfb0162993c)
[A Couple of Use Cases for Calc()](https://css-tricks.com/a-couple-of-use-cases-for-calc/)
___

# Adaptive vs Responsive
- **Adaptive** takes your current structure and scales it for many sizes.
- **Responsive** serves different templates based on the user agent and the device type.

[dev.to: The Adaptive + Responsive model - Mattia Astorino] (https://dev.to/equinusocio/the-adaptive--responsive-model-45mn)
[CSS-Tricks: The Difference Between Responsive and Adaptive Design](https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/)

# Other tools:
[Device Mode in Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/device-mode/)
[Detect device viewport size](https://www.mydevice.io/)