Part 9b. Mobile Friendliness

In this part, we will learn about creating web pages that are mobile-friendly, so that your code looks just as good on your grandmother's old phone as on your techie uncle's huge 4K monitor. We will also address other device-friendly tweaks that your code might need if  you suspect that your target audience might try to send your web pages to their 2D printer. But we will warn you ahead of time that this might not be an easy task.

Nevertheless, we want to give you as many of the tools you will need as possible to help you through this process. To be perfectly honest, one of the biggest pains in web development is trying to make an old website mobile-friendly as an afterthought. However for new projests, we strongly recommend trying to think about mobile-reponsiveness from the very start. And the reason we say that is because it is much easier to convert a web page that looks good on a phone to a web page that looks just fine on a bigger screen. Two of the tools we use that will help you the most here are Google Chrome's Dev Tools and Media Queries. These are both huge subjects, so without further delay, let's dive right in.

Mobile Responsiveness

This can be a huge subject to discuss to be sure. However, we have some tips that will prevent this from becoming a daunting and all-consuming task. You have probably noticed that mobile-responsiveness is somewhat built into all of the CSS projects you've done here. Of course one can spend an exorbitant amount of time writing media queries while attempting to make each website pixel perfect. But for the most part, that can be a huge waste of time. In general, mobile-responsiveness should always be a primary consideration rather than a secondary thought. And to reach that mobile device-friendly goal, we offer this list of guidelines to follow when creating web page layouts.

1. As previously stated, always consider mobile-responsiveness as one of your primary design goals from the very beginning, instead of an afterthought to be dealt with later. Constantly test your web layout design by reducing the width of your web browser screen to view how all of the elements on your webpage appear on narrow screens, on wide screens, and on all other screen sizes in-between. If you do it right, the number of media queries you have to write later will be greatly reduced.
2. Take advantage of flexbox as a layout tool as much as possible. You can always nest some divs inside of other divs, so let flexbox calculate the space-between required by all of the elements in your page layout. Remember that you can use flex-direction: column; when appropriate, rather than always having to use the default flex-direction of row. And remember to use flex-wrap: wrap; to deal with your many different possible page widths dynamically.
3. The width of your document body should should never exceed 100%, regardless of the screen size it is viewed on. For that reason alone, it is often better to assign the width of longer elements in % percentages rather than in px pixels or even rem rems. Never allow elements that are going to be wider than your smallest page widths to be assigned widths in pixels or rems. If you ever get a horizontal scrollbar at the bottom of your webpage, then figure out which elements are too long and are exceeding the width of the document body. Reducing the width of any element that exceeds the width of your document body on the smallest screens is one way to achieve 100% mobile-friendly page layouts.
4. While the width of webpage is a constant concern, the height of a webpage generally is not. Setting a document body rule of min-height: 100vh; will make sure that it never is an issue. Remember that vertical scrollbars are the way we navigate through long web pages regardless our device's actual screen width. When working with a width, we usually use a % percentage, but when working with a height, it is preferable to use a vh viewport height.
5. Create some CSS reset rules that help establish mobile-friendly page layouts. Margins, padding, and borders can sometimes betray you, so setting box-sizing: border-box; for your document body will help to make sure that the size of some elements like divs never grow beyond the sizes you intended for them. Also setting a wild card rule of
   * { margin: 0; } will ensure that you are never betrayed by the default CSS margin rules of any element. And don't forget that we talked briefly in the last part about loading the reset.css file before  loading your regular stylesheet. By doing that first, you can often streamline and optimize this process along the way.

Media Queries

When all else fails, we have to fall back onto our knowledge of how to write effective media queries. Although hated by some web developers, they are the essential tools that solve web layout problems for which there are no other solutions.

Media queries are so important that entire professional careers have been launched on the ability to write them. If you've ever tried to send a web page to your printer and found that it printed lots of pages with bad results, that would be the fault of web developers for not writing media queries to deal with how those web pages are interpreted by 2D printers, as well as by how they are displayed on devices with screens.

Printer-based media queries are a deep subject that we will sidestep for now. However, a basic knowledge of how to write media queries to make your web pages mobile device-friendly is definitely a subject that we will cover here.