Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. Building a Website by Progressive Enhancement
  • dislike -7 11

    Building a Website by Progressive Enhancement

    1. October 2014
    2. Daily
    3. read 867

    When building a website you have a few ways to do the fancy stuff. One way is to start by creating the most advanced version you want (with all of the scripts, styles, etc.) and then make it render well in older browsers (graceful degradation). Another is just to decide you don't care about older browsers. A third is to start with a bare bones page, and add scripts and styles so it is readable and usable without them (progressive enhancement). In this series we will focus on the third option.

    Now that you know the theoretical stuff, we can create a simple page to illustrate the general approach. The site we will be creating will be just a simple information site: a few links, some text, images, and a contact form.

    We will use the widely adopted F layout (if you don't know what it is take a look at this great article on Web Design Tuts+: Understanding the F-Layout in Web Design).

    Step 1: Basic HTML

    Start by creating the index.html file with this HTML code:

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>Example Website</title> 
    </head> 
    <body>
    </body> 
</html>

    Step 2: Heading and Menu

    Now let's create a heading for our website. To comply with the rules we will just use the <h1> tag for it:

    <h1>Our Sample Heading</h1>

    After that we can create the menu. Usually you would use the <ul> tag for it, but since the page has to look decent without CSS, we will use the <nav> tag and put anchors in it:

    <nav>
    <a href="index.html">Home</a> 
    <a href="about.html">About</a> 
    <a href="offer.html">Offer</a> 
    <a href="contact.html">Contact</a> 
</nav>

    Note that even if you don't use indentation in your code (and you should to make it more readable) you have to do it here, since without CSS the tabulators (or spaces) between the links are the only thing that will separate them (the distance will be the same no matter if you use tabulators or spaces, the browser will take care of that). Of course you will not notice it since the browser has a default CSS for them.

    Here is how our page should look:

    Step 3: Example Content and Footer

    To get some sample text, you can go to http://www.lipsum.com/ and generate a few paragraphs. Now remember the rules: we will not put the content in any special container <div>. It has to be semantic, so we will use the HTML5 <main> element. Put the text in the <p> tags just below the menu.

    <main> 
    <p> Lorem ipsum dolor sit amet... </p> 
    <p> Nam aliquet tempor turpis... </p> 
</main>

    Now add the footer using the <footer> tag:

    <footer>Copyright &copy; 2014 SomeNonExistent Company. All rights reserved.</footer>

    The page should now look like this:

    You can create the About and Offer pages in the same way—they will not have anything special in them (you can add their names as <h2> tags just above the content).

    Step 4: The Contact Form

    The last thing to do in HTML is the contact page. Copy the contents of your index.html to contact.html and remove the contents of the <main> element.

    Now add the heading for the form (into the <main> tag):

    <h2>Contact Us</h2>

    After that we can add a <form> element with appropriate fields for the user to fill (since the server side of things stays pretty much the same I will not cover it here, so if you want to test your form you will have to write the back-end yourself):

    <form method="POST"> 
    <p> 
	    <label for="name">Your name:</label> 
		<input id="name" name="name"> 
	</p> 
	<p> 
		<label for="email">Your email:</label> 
		<input id="email" name="email"> 
	</p> 
	<p> 
		<label for="message">Your message:</label> 
		<textarea id="message"></textarea> 
	</p> 
	<button type="submit" value="Send">Send</button> 
	<button type="reset" value="Reset">Reset</button> 
</form>

    The <p> tags do not break the semanticity rule because the label and input combo is actually a paragraph. The contact page should look like this:

    The CSS

    Now that our page is working, we can start to make it look a bit better. Create a file and name it style.css. Now add this line to the <head> section of your document:

    <link rel="stylesheet" href="style.css">

    Step 5: Base Styles

    The first thing to do would be to change the fonts and overall shape of the page:

    * { font-family: Calibri, sans-serif; } 
body { width: 900px; margin: auto; }

    Two lines of CSS and you can see that the page looks a bit better as it's no longer using the default fonts.

    Step 6: The Header

    Now let's add some looks to the header: space it a bit, change the font size, and add the background:

    h1 { 
    padding: 100px 10px 20px; 
    margin: 0; 
    background: #dfdfdf; 
    font-weight: normal; 
    font-size: 3em; 
}

    Notice how we changed the font size—we used em instead of any other unit. This is because of the last of the rules explained in the first part of this series. Users can change the base size of the font and if we had, for example, used px, their settings would not be respected by our stylesheet.

    Step 7: The Menu

    After fixing the header's look, we can get on with the menu. We will also change the font size of the anchors, remove their underline, and add a background when they are hovered over or when they have an "active" class:

    nav { background: #aed8ff } 
nav a { text-decoration: none; font-size: 1.3em; color: #333; padding: 15px 25px; display: inline-block; } 
nav a:hover, nav a.active { background: #dfdfdf; color: #666; }

    Now add the "active" class to the appropriate anchors in your files so they are "pressed" when the page is visited:

    <a href="index.html" class="active">Home</a>

    Here is how it should look like now:

    Step 8: The Content

    We will not do much here, just improve the readability a bit by increasing the line height (don't forget about users' settings—we can change the size of purely visual elements like headers and buttons, but users set their default font size for a reason). We'll also change the font and add some padding:

    p { 
    font-family: Helvetica, Arial, Sans-Serif; 
    line-height: 1.6; 
    text-align: justify; 
    padding: 10px; 
}

    Here is the result (notice how the readability improved with such a small change):

    Step 9: The Footer

    This will also be just a little, cosmetic change: background, padding, and centered text:

    footer { padding: 10px; background: #dfdfdf; text-align: center; }

    Here is how the footer looks like now:

    Step 10: The Form

    The last thing to do is to fix the looks of our contact form. First, let's remove the padding and margin of the <p> elements:

    form p { margin: 0; padding: 0; }

    Now let's set the width of the <input> elements and <textarea> to be the same. We also set display: block on them to line them up nicely:

    form input, form textarea { width: 300px; display: block; }

    Finally we change the <button>s to take up half of the form's width:

    form button { margin: 10px 0; padding: 5px; width: 148px; }

    This is the final result:

    Conclusion

    This is the end of this part. In the next article, we will use some JavaScript (jQuery to be more exact) to add some interactive elements to our website.

    I guess some of you will think that this tutorial didn't show anything you didn't know about HTML or CSS. But look at it this way: We created a design that is based on its content and not on the designer's fantasy. Of course, it's pretty simple and not very good looking, but I didn't wanted to throw massive amounts of CSS and/or other assets here.

    The point is easy to see if you remove the stylesheet from the document—its layout stays the same and you can still use the page without problems.

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    Add a comment...
    4elements
    Comments

By - category

    By - date

      Copyright © 1999 - 2025 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News