Mobile-First, Responsive Web Design - HTML
Terminology
'Mobile-First'
Typically, mobile devices are the lowest common denominator when it comes to loading web content (although, especially in developed countries, the gap is closing with 5G). Mobile devices may be using 3G connections, be in bad coverage area, and/or the user might be paying for 'wasted' data. Oh, and there is the battery life.
We should design our content for the 'small screen' display first. We should be wary using 'large' images or 'high resolution' images, for example, when they are not needed for the 'basic' display.
Responsive Web Design
Related to 'mobile-first,' we layout our content and design for the 'small screen' first, and then then use media queries to progressive enhance our experience for larger screens. In this way our site 'responds' to the increased screen size. We'll understand more about this when we move to CSS.
Separation of Concerns
We will start our work by focusing on HTML. The role of HTML is to describe or markup content - nothing else! Our design or the 'look and feel' of our site should have little to no dependence on our HTML. That should be governed only by CSS (later).
A 'Typical' 3-Column Layout
We're going to build a 'typical' 3-column layout that's commonly used for marketing websites. This is a really rough sketch of the 'mobile' view. We'll scale it up from here to include 3 columns and apply some flexbox.
__
We'll also eventually apply some JS so that we an make the 'bars icon' show us the navigation menu on 'click'.
HTML
Let's start with just the HTML for the 'home page.' Try this Emmet snippet:
(header>figure>img)+(nav>ul>(li>a)*4)+main>((section>h2+(p>lorem)+a)*3)+footer>ul>(li>a)*4
Don't worry too much if the snippet above doesn't make sense. Emmet is sort of like shortcut keys. You can use a lot, a little or not at all...just make an effort as time goes on and you will get there.
One other thing - we are not going to go over all the HTML tags or anything close to that (our focus is going to be on JS). Nor, do we need to spend time doing that - we will breeze through the most common semantic tags, and once you get the hang of those, you can review the MDN reference to find anything 'specialized' that you might need for a project. HTML just kind of goes on and on - opening tags, some closing tags and some attributes and values in between - don't overthink it.
With HTML, one of the best practices to follow for SEO, accessibility and overall 'clean code' is to use semantic classes. This simply means that whenever a tag is available that more narrowly describes exactly what your content is, use that instead of just <div> or <span>.
For now, if you are not familiar with any of the tags that just go used use this reference..
Generally, and most importantly, we are breaking our page up into 4 distinct parts inside of <body>: <header>, <nav>, <main>, <footer>. It's important to keep these 4 distinct elements as 'siblings' so that when we convert all of this into a Single Page Application, you'll be able to follow along.
Speaking of siblings, we should note that when we write HTML, we are 'growing' a Document Object Model(DOM) 'tree-like' structure. So, in the above image, notice the 4 elements that are on all adjacent - on the same level. It behooves us to keep this parent-child and sibling hierarchy when we get into CSS and JS.
'Placeholder' Images
Lorem Picsum will be a handy way to quickly include some fun images into our page. For example <img src="https://picsum.photos/200" alt="Lorem Picsum">. In that example, note the alt attribute - making it a habit to include some alternative text for all of our images can help with accessibility, SEO, and also if there are just issues with our images being 'broken.'
However, if an image is purely decorative and serves no 'real' content - you can just leave the alt tag's value as an 'empty' string: alt="" - Why do we bother including it at all?...because, by leaving it blank, we are communicating that we are not just being negligent, but that we intentionally are leaving it blank because the image is purely decorative.
On the subject of 'purely decorative' images, if the image is purely decorative, then it probably should be included as a CSS (look and feel) background image instead of as content in our HTML. We'll look more at that later.
Retina Images and Responsive Image Basics
Although most of our responsive design revolves around responding to different screen sizes, there are many other potential factors that we could account for. One of the more useful ones is to serve up 'retina' images for high resolution devices (2x and 3x, etc.). This way, we are not wasting bandwidth grabbing images that are overly big or too low quality, etc.
To do that, we can use srcset attribute. Here's how that looks:
<img srcset="https://picsum.photos/200,
https://picsum.photos/300 1.5x,
https://picsum.photos/400 2x,
https://picsum.photos/600 3x"
src="https://picsum.photos/600" alt="Lorem Picsum">Note that we specify the 'retina' resolution and include larger images as needed. srcset will load the appropriate image for us! As a fallback for really old/stupid browsers, we still include src.
We've really just scratched the surface on what we can do for responsive images. There can be a lot more for demanding designs including art direction. MDN Reference on Responsive Images
Go ahead and fill in some custom text or other content however you want to. When you're finished,commit and push your work.
Last updated
Was this helpful?