HTML documents are displayed on many devices such as smart phones, tablets, laptops, desktop monitors and TV screens.

The main difference is the scaling factor and the available screen area available to display your HTML document along with the ability of the user to change it. This impacts both the width and height of the viewing area of your HTML document.

Viewport

The viewport is visible area of a web page. It more commonly is used in context with mobile devices. The viewport is smaller and fixed to the display size on a mobile phone. On computer screen the viewport is larger and because of web browsers are opened in windows the viewport is adjustable.

Scaling

Various devices will scale an HTML document withing the viewport to how it will appear on a desktop.

Mobile devices are likely to render an HTML document scaled to show a typical desktop screen width.

Generally speaking matching device scaling is more desirable. It is not necessarily automatic. To specify using the device scaling you use the meta element. Details on using it are covered in the upcoming lessons for this section.

Width and Height

The good news is that the width and height of the HTML document is automatically handled for you.

The height of your document is virtually unlimited. What cannot be seen is available for viewers by scrolling the document.

The width is where you may have issues. The good news for text is that it is contained within the viewing area because it is word wrapped to fit.

Media such as graphics need to be designed to fit the smaller device widths. The problem is a small graphic image will also appear small on larger screens. Media scaling requires CSS ¹ and document layout to fit on devices.

Testing Mobile Friendly

The best place to test your HTML document is on the actual device. That usually means the document has to be uploaded to a web site. It also means you need to have the device to test.

An alternative is to use mobile simulators. Your web developer tools may have simulators. For example Chrome has a button to toggle a mobile simulation view on and off.

Once mobile simulation is turned on your HTML document is overlayed with ways to examine how it renders in a mobile view.

1. This menu has a choice called Responsive and a list of devices. The Responsive choice make the mobile view independent of any device parameters. It is recommended as the default work mode.

2. The orientation button toggles between a portrait and landscape view. Available when viewing in a device mode that has orientation. Not available in Responsive work mode.

3. The resize bar is a quick way to resize to common device widths.

4. There is an options menu for further customizing the mobile view.

What is Responsive Design/Development?

Responsive HTML documents change their styling and layout depending on properties such as width of the viewport. Styling and layout is handled when you study CSS ¹

What is Mobile First Design/Development?

Mobile first is an approach of design and developing an HTML document so it is best viewed in a small device such as a smartphone and making adjustments for larger devices.

For example starting with smaller heading fonts and then making them larger for wider displays or having a single column layout and then having multiple columns for wider displays. Fonts and layout you learn more about when you move onto CSS ¹. Good news is that the default single column layout for HTML documents is friendly to all devices.

1. See Anyone Can Easily Learn CSS and Anyone Can Easily Learn CSS Layout.