Armed with a copy of Mobile First by Luke Wroblewski and Hardboiled Web Design by Andy Clarke I set about making my site responsive.
Before I share the details of my journey, I’d like to add that the two books mentioned above were annoyingly good. Annoying in the fact that after reading each page I had to put the book down and try out what I’d just read.
The Objective
I was getting tired of my old site. There was content and functionality on there that I didn’t like and my analytics suggested that users were not finding certain things useful either. As well as the obvious responsivness, I wanted to:
- Reduce HTTP requests
- Simplify core colour palette to use a single green colour and black
- Develop stronger visual identity
- Improve typographical hierarchy
- Reduce portfolio items to better demonstrate my competencies and skills
- Start to use HTML5 markup standards
- Improve mobile and tablet usabilty
Reducing HTTP requests
My old site had a bunch of plugins activated so I culled all but the ones that I really thought were essential. I was happy to see jQuery Colorbox go as it added a huge chunk of code to each of my pages and I didn’t feel that the functionality was needed any longer for my responsive site. I just removed image dimensions throughout and used:
img {
width: 100%;
height: 100%;
}
The CSS above allows my images to scale depending on the users screen resolution.
I also removed a lot of the single image files that were used in my CSS and combined to create sprites e.g. the icons I use for my social links are actually one file and the CSS positions it accordingly.
Sprite:
CSS example:
.social-linkedin a {
float:left;
display:block;
width: 36px;
height: 36px;
margin-right:8px;
padding:0px;
text-decoration: none;
background-image: url(images/social-sprites.png);
background-repeat: no-repeat;
background-position: -141px 0;
-moz-transition: all 0.2s ease-in 0s;
-webkit-transition: all 0.2s ease-in 0s;
opacity:0.6;
filter:alpha(opacity=60);
}
So you’ll notice that the class above will only show the LinkedIn icon due to the overall width and height and the background position of the image. My CSS uses a different class for each icon but each time the same ‘social-sprites.png’ is used.
For my existing video content I added the following CSS (found here):
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I then wrapped my video embed code like this:
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>
By deactivating lots of my previous plugins I’ve also managed to limit the number of CSS files used in my site. I can still reduce this down to one single file but at the moment, the plugin that creates my page numbers (on my blog list page and search results) also uses another CSS file.
I also removed lots of content from the sidebar (Facebook widget, generic text, blog categories) which has helped to removed page bloat.
Core colour palette and visual identity
My old site used multiple shades of green and I didn’t feel it was working very well. I’d also introduced a third purple colour but wasn’t happy with that.
For the new design I limited myself to a single green colour value (#6ECF50) and then solid black. This helped me create a stronger visual identity and also added more contrast which was one of my other objectives. My old site used more washed out greens and was a bit inconsistent.
I used the same colour values for my logo re-design and I wanted to create a logo that worked well as a central asset and was high contrast.
Improve typographical hierarchy
I’m a big fan of Typekit and I use their font service for my custom fonts. My H1 and H2 tag use League Gothic. I use H1 for all my page headings and H2 for sub headings. Any other heading that gets used in a page is simple wrapped with a tag. My body text is set at 14px and uses a font family or Helvetica, Arial, Lucida Grand and then sans-serif. I set the body text to a very dark grey (#333333) rather than black to help with readability – I just feel it reads better than using a solid black). I use a larger font for the date (18px) and lighter shade of grey again (#666666) to maintain the content hierarchy. For links I use my same green value (#6ECF50). By simplifying my font styles I hoped to meet the objective of improving my typographical hierarchy.
Reduce portfolio items to better demonstrate my competencies and skills
My previous portfolio had become bloated with items that showed a wide range of skills. I felt there were too many thumbnails and too much variety that could be confusing to prospective employers or clients. It was hard to see what it was that I actually did.
I decided to pick 3 main projects which used various skills and simply used thumbnails and a short paragraph of text to give and overview. If the user wanted to find out more, I included a link to a dedicated landing page for each project. Hopefully that will make it simpler for the user and also highlight my skills better.
Start to use HTML5 markup standards
I’m still really scrathching the surface of HTML5 capabilities so haven’t used any of the more advanced features. What I have tried to do is use the correct tags and markup to organise my content. My header, footer and sidebar are wrapped with <section> and my individual blog posts are wrapped with <article>. I also use <nav> wrapped around my top navigation bar, <header> wrapped around all the content in my header section and then <footer>, you guessed it, around all the content in my footer. It’s quite handy that WordPress splits it’s templates up like this too.
I’ve also used some HTML5 form features to help with my mobile experience too. Using type="email" and type="url" will make sure that the correct keyboard is displayed in iOS.
I used the HTML5 boilerplate template to help get me started but I spent time reading through the documentation so that I understood the best I could what each part does.
Using a responsive design to improve mobile and tablet usability
This was a major objective for me. I’d previously used the WPTouch plugin to display my site on mobile devices but felt as though I didn’t have full control over it. I wanted to design my site from the ground up for each device, in portrait and landscape and retain full visual identity.
I spent a long time looking at sites like Media Queries that lists the best responsive web designs. I wanted to see how other people were designing for mobile, tablet and desktop combined.
With the knowledge that I’d picked up in Mobile First I ran with Luke’s theory of a mobile user having one thumb and one eyeball. This theory suggests that a user viewing content on a mobile device is likely to be doing so whilst also looking around them and will only be using one thumb to navigate. For this reason I increased the size of my smallest buttons to be minimum of 22px in height and width with a minimum of 4 pixels of clearance between buttons. In practice, most of my content buttons and main navigation buttons much bigger than this.
I also decided to reduce the amount of content I displayed on mobile devices on my homepage. I go from showing 1 main image, 3 thumbs and some text (per portfolio item) at desktop (or iPad lanscape) to 1 main image, 1 thumb and some text at iPhone landscape. I then reduce further to 1 main image and some text at iPhone portrait size. At each size I always show the ‘More’ button that will take the user to the full content page which has full information no matter what device they use. I do this by using media queries in my CSS and alter sizes, visibility and positioning accordingly. If you’re viewing this post on a laptop or desktop with a modern browser, you can resize the browser window to see these designs appear at various break-points.
I also moved content around at various sizes to make the most of the screen sizes. Navigation goes from being left aligned at desktop size to centred on iPhone and iPad (portrait). My footer content goes from 3 colums to 1 column at the smaller sizes too. I adjusted margins and padding to improve my vertical grid.
I spent time making sure my content and font sizes were readable at various sizes but also paid attention to forms to make sure the fields were accessible when iOS keyboards appeared etc.
Feeback
When I was at a comfortable stage with my design asked around for feedback and was given some great tips by Tom Prior who made some great suggestions for my top navigation.
I’de also like to ask you, if you’ve taken the time to read this, to also feedback on what you think of the design. All suggestions very welcome.
Nice work! You inspired me to do one of my own (I gave you credit in the article, of course). Thank you! http://frontendpost.com/tutorials/flexgen-a-free-responsive-html5-single-serving-template/
Your demo works really well – thanks for the mention.
Nice post, I’m in the process of making my website responsive