In this short guide, you will learn what responsive web design is and how you can easily add it to your own page using an HTML framework. The concepts of what responsive web design and frameworks are will be covered. Sample images will be provided to help you along the path.
Before you go any further into the guide, make sure you have the basics of HTML or CSS down first. If you need a refresher for either topic, have a read on HTML for Dummies and CSS Basics for Beginners to get a quick foundation.
What is an HTML Framework?
Before you get into using an HTML framework to add responsive web design, you may want to know just what an HTML framework is in the first place. Think of your webpage like a building under construction. You want to make sure the building is up to code and has guidelines in place to ensure it follows modern standards. This need for a standard form is where a framework comes in handy.
An HTML framework provides a built-in set of pre-defined options that help you with a specified need. A framework is a form of template that you can apply on the page to make things easier. As you will see in this guide, the target goal is to add responsive web design elements to a page using a framework’s template approach.
What is Responsive Web Design?
Now that you know what you want the HTML framework to do, we can cover what responsive web design is. As its name suggests, the responsive design aims to create a page that reacts in accordance with the actions of the user. These actions are things dealing with screen size when the user changes the window size or uses different devices. Quite simply, responsive design should be able to deal with changes from the end-user or device behavior.
How Can I Add Responsive Web Design using an HTML Framework?
There are a plethora of frameworks that you can choose from. For the introductory nature of this guide, the lightweight framework known as “Pure” will be used as an example. For direct details on the Pure framework, check out their official Github page.
Adding the Pure Framework into Your Page – External Stylesheet
The first thing you will need to do is get the Pure stylesheet loaded into your HTML page. As with any other external stylesheet, this will be placed in the head of the HTML structure. In the screenshot below, you can see it has been directly added underneath an existing stylesheet on the page.
If you would like to copy it for yourself, the stylesheet link source is set below:
<link rel=”stylesheet” href=”https://unpkg.com/purecss@2.0.6/build/pure-min.css” integrity=”sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5″ crossorigin=”anonymous”>
The Viewport Meta
The next item on the list is to add the “viewport” meta tag inside the document’s head section. The viewport is essentially where the HTML content will be seen by the end-user. If you are not familiar with what the details in the viewport tag refer to, think of it as a way to allow the browser to communicate the needs of width and scale of a page. These details can help you set up a better viewing experience for users on mobile devices by providing a mobile-friendly view.
In the screenshot below, a meta tag has been added with the attribute of “viewport” into the head section of the HTML page. The content details of this meta tag have been set to whatever the native scale of the viewing device is set at. Notice the “content” value is set to the device width with an initial zoom scale of one. This level is treated as the accepted normal value to help mobile users properly scale the site content. If this value was instead set to “no” or zero, the user may not be able to perform scale actions on their end such as naturally zooming in and out.
If you would like to copy it for yourself, the meta details are set below:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Testing with an example: A simple form
With the external assets added in and the page’s viewport details set, you can go ahead and try some responsive designs out of the framework. Remember that a framework makes things easier for you by simply providing you template for how it should work. Essentially, guiding you through your basics site setup with predefined templates for common design needs. In this next example, you will do just that by building a form using the Pure CSS framework.
In the example image below, a sample form has been created using the Pure CSS framework form template.
The template is provided below should you wish to try it for yourself:
<form class=”pure-form”>
<fieldset>
<legend>A compact inline form</legend>
<input type=”email” placeholder=”Email” />
<input type=”password” placeholder=”Password” />
<label for=”default-remember”>
<input type=”checkbox” id=”default-remember” /> Remember me
</label>
<button type=”submit” class=”pure-button pure-button-primary”>Sign in</button>
</fieldset>
</form>
Notice the use of the pre-defined Pure Framework class “pure-form” used in the form. This is how a template design from the framework is easily applied to your own HTML document. Through the use of these pre-defined CSS classes (already found in the linked stylesheet), you can quickly add elements such as tables and buttons that will behave with responsive action.
With the Pure CSS framework items in place, the form is now responsive to window changes, or rather, viewport changes. You can see this in effect with the example provided below.
The fields and button move to accommodate the changes to the window without losing their effectiveness. Just like that, the Pure framework’s template was used on the HTML document and is ready to work as needed.
A Sea of Frameworks – Extra Knowledge to Use Them?
Pure CSS is a great starting point for those who are new to working with an HTML framework. It has clear and direct application use that is easy to deploy. Not to mention the great documentation on the team’s GitHub page as well.
However, there is a bevy of options out there for you to work with. Notably, one of the more popular and vast reaching of those is the Bootstrap framework. This framework provides a massive set of templates to help ensure your HTML page is prepared for mobile users. You can learn more about Bootstrap here.
Another amazing HTML framework is Semantic UI. This framework provides a wonderful assortment of themes and responsive design elements to really make your own HTML sing. Some of the features are included with the Bootstrap framework, but this does have aesthetic options as a starting point. Learn more about using Semantic UI here.
One thing you might notice on looking through either of those frameworks is the use of elements from JQuery, JavaScript, Node, and other programming languages. If you really want to take full advantage of the power laid out by these frameworks, it would be an amazing idea to dive into the world of programming itself.
If you are just new to HTML and CSS, it could seem like a daunting task. However, if you feel comfortable with your current grapes on either of those, then programming is a definite goal you can achieve. Programming can jumpstart your options for new roles. Coding skills can help you make those new professional possibilities a reality. Not to mention letting you take on new design ideas for your own sake as well. Take the first step and enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
