CSS3 HTML5 Resume


Update


I have created a new CSS3-HTML5-Twitter Bootstrap3 Minimalist Design resume template. You can find the new Blogpost and the Free Resume Template here.



Lately, I've been looking into responsive design using CSS3 and HTML5. I have used responsive design to setup a Resume with a settings page and a contact form which also responds to the device width.

Link to CV

 

You can still find the archived resume presented in this post here.

 



The HTML


You will have your standard HTML5 document DOM:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Tudor Anghelina - Resume</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 


 I like to use viewport to fix the scaling issue on iOS devices, by setting the initial-scale to 1.
 
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">


After the declarations in the head of your HTML document you can proceed to inserting your content.
After learning a bit more about the new tags in HTML5 i have decided to use the following structure.


<body>
    <nav>
        ...navigation
    </nav>
    <header>
        ...header
    </header>




    ...website content




    <footer>
        ...header
    </footer>
</body>
</html>

From here on let your imagination take over and go with whatever design you think is right for your project.

The CSS 


The first step in creating a responsive website is understanding the needed syntax for the style.css file applied to index.html.





How i test the design


In my responsive design workflow, I start by testing the responsiveness to resizing the browser window. While this is a good way to start testing and see the results, I find that another step is really useful: I test the design on an iPad in both landscape and portrait view, then repeat the same test on an iPhone. 


Here is a screenshot of the contact form which also responds to multiple device widths.

Watch the Video


How do you use responsive design?


Do you have a different view about responsive design? Please comment on this post.