Posts Tagged ‘responsive web design’

Mobile-first navigation

Thursday, August 17th, 2017 | Programming

If you have a website, it is not enough to talk about “mobile-first design” anymore. We need to talk about mobile-first navigation, too.

The days of desktop computer terminals are gone. They’re not going anywhere, but most internet access is on a mobile device today. And has been for four years. We all design websites on these big laptop screens, but that isn’t how anybody else is looking at it.

So, we all started adopting mobile-first design.

You make the website look brilliant on a mobile, then re-arrange everything with CSS media queries so that it looks good on a desktop, too. Some people did it because they wanted to offer their users the best experience they could, others because Google announced they would be demoting sites that were not mobile friendly.

What about navigation, though?

Pages that you can read on a mobile device are a big improvement. But we forgot about navigation.

Take a look at The Washington Post’s website:

They have put a hamburger menu icon in the top left. Which is what a lot of websites do.

What’s wrong with this? It puts the menu icon in the on exact place that the majority of users cannot reach with their thumb:

Not great then.

Recently, though, there has been a move to clamp down on this. The UX community has begun to beat the drum of mobile-first navigation. Which is a good thing, because it is about time.

Thinking mobile-first

While web designers have been slow to adapt, app designers have not. Because they actually apps, no doubt. Take a look at most of them and you will see the navigation is on the bottom. Where your thumb is.

Here is the Facebook app, for example:

The NHS’s Change4Life website has embraced this principle, too. On the desktop, you get the navigation at the top:

But when you shrink your device to mobile size, the navigation fixes itself to the bottom:

Welcome to a much better world.

Worfolk Online re-design

Monday, May 25th, 2015 | News

I’m pleased to announce the Worfolk Online network is now responsive. The sites now look great across desktop, tablet and mobile – and we’re even supporting IE8 as well!

I’ve previously blogged about Lyrics Burger and Star Trek: Random Sector, but we’ve also updated:

Check out our updated sites:

  • Branch Planet
  • Greg’s Movie Reviews
  • TV Forge
  • Hardware Tutorials
  • Celeb Linkage
  • Authority Forums
  • Jimmy Turtlehouse
  • Maze Finance
  • Song Meanings

branch-planet gregs-movie-reviews

hardware-tutorials tv-forge

CWF responsive re-design

Saturday, May 23rd, 2015 | Foundation, News

A lot of the Chris Worfolk Foundation websites, such as this one, were already responsive. That is to say that they worked well across any device size. Some of them were not however, but I’m pleased to announce we have now fixed that.

I’ve already blogged about the Worfolk Lectures update but we’ve also upgraded many other sites across our estate too:

humanist-chaplains

perspective-course

Worfolk Lectures update

Friday, May 22nd, 2015 | Foundation, News

We’ve just relaunched Worfolk Lectures with a new responsive design. It looks great on desktop:

worfolk-lectures-desktop

It looks great on tablets:

worfolk-lectures-tablet

And it looks great on phones:

worfolk-lectures-phone

Lyrics Burger is now responsive

Saturday, May 9th, 2015 | News

I am sure that that like myself, when you want to look up some song lyrics, you instantly head off to Lyrics Burger. After all, it is the number one place to go for song lyrics in my opinion. Well, you will be pleased to know that it is now even better!

First and foremost it is now responsive, and looks great on a mobile device.

lyrics-burger-responsive

But there are lots more exciting changes both over and under the hood too. The URLs have all changed to nicer, cleaner ones. All the old ones will still work of course and redirect to the new location. We have also made the design cleaner (thought it was already full of semantic HTML5 goodness), improved the adherence to HTML standards, and added open graph tags so it is now even easier to share!