Responsive Design - how does this look on your mobile?

Since I built this website in early 2012 I have built many responsive sites and I use the 'mobile first' approach now (unlike on this site!). Further down the page is my original write-up of the process I went through to create this site.

If you're looking for a developer to build a responsive site then please contact me to discuss your project.

Here's what I wrote in 2012 after I created my first responsive site

This website is the result of a good few hours spent reading about responsive design. Thanks to Ethan Marcotte's excellent and entertaining book (Responsive Web Design) I was forced to change the way I think about building websites. Now it seems so obvious - don't build device-specific versions of a website, just build one that can adapt (respond) to the device it's being viewed on - but it just hadn't occurred to me until recently that there was a better way to build.

The design of my site is intentionally very simple, for two reasons: 1. I'm not a designer, 2. I wanted to try out the new techniques I'd learned on a small scale to begin with, having always built fixed width sites with everything measured in pixels.

It wasn't difficult to put the site together using the principals of responsive design. One thing that did trip me up though was the way the iPhone enlarged the body text in landscape orientation. Thanks again to Ethan Marcotte for a solution to that - I was poking through the CSS for one of his sites and saw this:

            body {
                -webkit-text-size-adjust: none;
                text-size-adjust: none;
            }
            

which looked really interesting and sure enough did exactly what I'd hoped - so now this site when viewed on an iPhone in either landscape or portrait, looks pretty good in my opinion.

What other devices / breakpoints?

This being my first responsive project I only set one breakpoint, at 650px. Bit of an arbitrary number, arrived at by trial and error. I didn't want a different layout for a tablet - just desktop and mobile. The layout is 1140px wide on any device that can support that. Anything that can't just shows it at 100% wide until we reach the break point, when things adapt and shift around.

Navigation

Something that I will be investigating further is the best way to provide a more usable navigation tool when the site is viewed on a small device. I'm not sure if what I've done here is good or bad, but here's what I did...

Styled an unordered list for the top navigation and added an anchor below it (hidden on devices wider than 650px). Added a copy of the top navigation just above the <footer> (hidden on devices wider than 650px), then did the old switcheroo on the breakpoint... hide the top nav, show the little top anchor and show the footer nav. Clicking on the little top anchor simply takes you directly to the bottom of the page where the footer nav is now visible and has nice big buttons for thumbs to click on. If anyone has a better idea for this (one with less duplication of markup) then I'd love to hear it (feel free to disqus below).

To Do

Something that is bugging me right now is the way the top nav drops down when the device width is about 775px - this needs a bit more work. Anyway, I'm quite pleased with the overall result but I would really like to hear any comments, words of wisdom, suggestions, questions etc. I think responsive layouts are the way forward, even if a separate mobile version is required in some cases... with so many new web-enabled devices coming it makes sense to try and make websites that can respond to them.

I'd like to know what you think

blog comments powered by Disqus

From My Blog

Test Popup

Read More

Default Theme

Read More

Light Box

Read More