creative

What’s a Hamburger Button? It’s the Hamburger that’s good for you.

There’s a hamburger you should try. It’s becoming really popular, people who try it seem to like it, it doesn’t make you (or your app) feel bloated…

Ok, enough of the poor wordplay, of course I’m talking about a Hamburger Button – that little three line icon you would have seen on apps that hides the primary navigation system until you tap on it.

Why talk about it? We build a lot of mobile sites and apps here at Fly Digital and have started seeing a real trend in clients moving away from tab bar navigation to the Hamburger way of navigating. It’s becoming a more widely accepted way to manage navigation on smaller screens.

Is it going to replace the tab bar? I think it will. The traditional tab bar that runs across the footer of many apps takes up a fair percentage of the screen real estate and usually only allows for 5 options at any one time. The Hamburger method takes up a tiny amount of screen space and can reveal a menu system that theoretically can be endless. These two reasons alone are going to move more app developers across to this method.

How does it work? In most cases, tapping the Hamburger icon slides the main content across to the right revealing a vertically scrolling view of menu items. Some apps also replicate this behaviour by allowing you to swipe across the main content.

The screenshots above show how the Facebook app on iOS does this. Below is a closeup of the Hamburger icon and expanded menu from the Teambox app also on iOS:

Why ‘Hamburger’? Well the icon itself has been around for a while but was originally designed to represent a set of drawers that when opened reveal additional content. However as it’s been used more widely in the mobile world (and probably in a bar somewhere on a Friday during lunch) developers have recently decided that the three layers looked more like a stylised burger instead, hence the name.

Our top 5 web design tips for new websites

We’re going to assume you’ve got your branding and look & feel sorted – we’re not here to tell you how to come up with the actual design of your site. But from a technology point of view if you’re embarking on a new web design project either yourself or through an agency here are our top 5 tips to help get the most from your new layout:

Web Design Tip 1: Think like a search engine

Page titles, meta descriptions and content are key when it comes to Search Engine Optimisation but so is layout. Looking at your design from a search engine perspective is often a good way to pickup issues before you head into the development phase.

Is your navigation easy to find, text based and not reliant on any scripts like Javascript? Will all images have accompanying text that a search engine can read? Do article pages have clear headers at the top of the content? Have you, on every page you’re building (including the homepage) at some point described what the page is about? Think relevance. The more relevant a search engine sees your page to the content you’re trying to optimise for, the better you will fare.

Web Design Tip 2: Try it on a tablet (and a phone)

Once you’ve got a layout save it as a JPG and load it on your tablet. See how it looks, is it easy to read the text at that size? Are navigation elements going to be easy to tap on? Now do the same on a smartphone. How does it look?

This is the time to confirm if you are going to commission a responsive design template or optimised views for mobile users. And if not, why not? It’s not too late to change your mind at this stage of the process before development has started.

This is also the time that you can have a final sanity check to make sure you’re not loading any components like Flash or applets that might not run on tablet devices at all. If your web dev agency is recommending them make sure they have a very very good reason for doing so.

Ideally, do this step right at the beginning of the project. We often take wireframe sketches and load them on an iPad to make sure we’ve got things like image spacing, line lengths, navigation options and general layout correct before opening up Photoshop. It’s very quick to do and can save you a lot of time in the future.

Web Design Tip 3: Show your kids

Show your website to your kids (unless you’re developing the next version of Playboy.com) and ask them what they think it’s about. I believe that if you can’t explain an idea to a 6-year old then you don’t have a proper grasp on the idea at all. The same goes for design. If kids don’t get what you’re trying to sell or do through a quick glance at the design, might your customers have the same problem?

Web Design Tip 4: Faster is better

Take a look at your design and start counting out all of the items that you think will take longer to load, that’s things like pictures or videos or promo panels or animations, etc. If you get to 5 or more then stop and consider how this might affect how website will load. Page loading speeds aren’t just important for a good user experience they’re also considered by Search Engines when ranking your site. So make sure your pages will load as quickly as they can.

Web Design Tip 5: Do you really need all those social media icons?

Finally, does your layout have Facebook, Twitter, Google+, YouTube (and so on…) icons on it? If yes, do you really need them on there. Yes you want to grow your likes and followers, but are there better ways to do this? Could you put your icons in the footer rather than up in your header? (That’s the first place I look, and it doesn’t affect the design nearly as much). Could you add them to your “contact us” page instead? Do you really need that big Facebook like box on there or are there better uses of that space on your site? For bigger brands, do you actually need to tell customers you are on Facebook or could they work that out for themselves?

What are your top tips in the Design phase of a project? Let us know your thoughts below.

A subtle logo update and losing the cursor pointer

For those of you who know Fly Digital you’ll know it’s run by a guy (me) who is a bit of an aviation nut. That’s why the logo features that flying cursor pointer with its aerobatic smoke trailing behind (well that’s how I see it anyway).

However I had started to feel using the cursor pointer it was a little dated and didn’t sum up the services we provide here at Fly, so this week I had the logo updated very slightly and replaced the cursor pointer with a more generic streamlined shape.

Here’s the comparison – this was the old logo:

…and here is the new version:

A bit more modern looking hey?

I’d also been having some issues with the cursor pointer when reversing the logo out on black which I do quite a lot (like on the new website header). It never rendered well in white but the new streamlined shape solves that problem as well:

Just a bit of housekeeping on the logo rather than a rebranding, but one that I hope will help the company image ongoing.

Let us know your thoughts in the comments below. As a small business owner do you like your logo or have you recently gone through a redesign or rebranding exercise as well? I’d love to hear from you.