While just about everyone uses mobile devices to access websites, most new web developers have limited practice writing applications for mobile devices. This is because most training is done on a laptop computer. If you haven’t had much practice coding websites for mobile, here are a few ideas on how to build responsiveness into your websites to make them better for mobile devices.
Viewport
An important first step in building a responsive webpage is telling the browser how to display the initial dimensions and scale. This is done by including viewport settings in a tag.
Example: <meta name=”viewport” content=”width=device-width”>
This should be placed in the <head> section of your webpage. Note that you should make sure your elements are responsive before using the viewport settings. Otherwise your webpage may actually look worse!
For a great discussion of viewport see this article on Mozilla
Layout
Your layout should be designed to be responsive from the ground up. A popular way of accomplishing this is using a grid system. Elements are strategically positioned on columns and the columns are adjusted to appear vertically when the screen size is small and horizontally on larger screens.
W3schools.com has an excellent guide on how to use grids when designing your layout
The latest HTML5 syntax introduced the flexbox which can be used in conjunction with grids to make aligning and spacing elements easier. Here is a guide on how flexbox works
Elements and Media
Now that you have your basic layout design, you need to make sure the elements can adjust their size as needed. This means avoiding absolute CSS units such as cm (centimeters), mm (millimeters), in (inches), px (pixels: 1/96 of 1 inch), pt (points), and pc (picas).
Instead try to use relative units such as:
- em (relative to font-size of element)
- vw (relative to 1% of the width of the viewport) – remember the viewport above?
- vh (relative to 1% of the height of the viewport)
- % (relative to the parent element)
You may need to get creative with media elements like images and video. In many cases you can set the width and let the height scale automatically. Often it is a good idea to set maximum size values so quality isn’t compromised on larger screens.
@Media
With the introduction of CSS3 we have Media Queries that can adjust content based on width, height, orientation, and resolution. Note that this is not compatible with older browsers, but should work on modern browsers including mobile devices.
This is where you can specify the number of columns on your layout grid above based on the width of the device. Here you can also manually adjust the size of elements if you are not able to use the relative units above. In fact, many times developers adjust the relative units for smaller screen so some elements appear larger and therefore easier to select with a finger.
Example: @media screen and (max-width: 620px) { CSS code… }
Refer to w3schools.com great overview of Media Queries
Helpful Frameworks
If you are thinking this is a lot of work you are right – it can be. Fortunately there are many frameworks you can use that have responsiveness built in. These frameworks can make building responsive webpages much quicker and easier.
Some of these include:
- Bootstrap: https://getbootstrap.com
- W3schools: https://www.w3schools.com/w3css/defaulT.asp
- Foundation: https://get.foundation
- Pure: https://purecss.io
- Semantic UI: https://semantic-ui.com
- Materialize: https://materializecss.com
There are many others so I encourage you to explore and find what is right for your project.
Hopefully this introduction gives you a place to start learning to build responsive webpages. It is extra work to build webpages that work equally well on mobile devices as they do on regular computers, but it is a must for building any professional website.
Top comments (1)
Cool, these are the settings that I was looking for all the time, I could not solve the problem with displaying the page in one of the browsers! Thanks Author, you're just cool! Also here is a great guide on responsive design gapsystudio.com/blog/what-is-respo.... If you are new to responsiveness, then read this information.