There’s been a lot of chat lately about using the Hamburger menu and off canvas navigation – a few people have done user testing studies and concluded that it’s not as usable as having persistent tab navigation. Facebook for one.
However, for sites with more different sections to navigate, you can’t just stick it into tabs, you still need to hide some of that navigation and toggle it. So in this study they found that usability studies show that the hamburger icon can be replaced by using the word “Menu” in it’s place, and even more by adding a key line around it to make it more button-like.
I remember a colleague had a really good point about the icon itself, in that it is becoming a convention and the great thing is that it does not need localisation (If you used a button with “Menu” instead).
What’s always frustrating is that last year’s best practise conventions (or trends) can be this years no-no’s.
So stoked that I found this page in an old notebook of mine. I used it when I went to the FOWD 2010 conference, and heard a talk by Ethan Marcotte that changed my whole approach to making websites.
This and the stuff around it is a huge topic, but I wanted to write down things that I see and experience all the time on projects that I work on.
Responsive Design – or designing in a multi-device world- is very challenging, but also very exciting and rewarding when it works well. However, most agencies have found that they are changing the way that they approach build and design because otherwise designing for a multitude of screen sizes becomes extremely painful (and inefficient).
These are the main things causing problems that I see on projects requiring a responsive website:
Desktop Design first, then retrofitting anything below that resolution
Designing for specific breakpoints only (i.e. iMac and then iPad, then iPhone)
Designing fixed page layouts rather than flexible, modular systems
The waterfall method of design and execution: Client —> UX/Design —> Developers —> ouch —> Launch —> d’oh
Start generating patterns and systems that are flexible and responsive (demo.patternlab.io and Atomic Web Design). These could also become online style guides.
Get into the browser earlier, and have more iteration between Client-UX/Design-Development
Get a Content Strategy, write good content for online (this book)
This is a broad overview to a very big subject, and one that even the best teams out there haven’t quite figured out, but I wanted to write something down to express what I see as the main problems I experience in my job. I haven’t really touched on more technical and performance issues (progressive enhancement, responsive images etc) in this post, as that probably needs another post.
I recently wanted to start using real devices more as I develop web sites locally, using MAMP as my web server, so I can see how they respond to my code changes almost immediately. My starting point was to try out Adobe’s Edge Inspect, but I quickly came across the same problem that most people have: it doesn’t understand the local vhost configurations and so the page is not displayed in your connected device. What to do?
After some googling I found xip.io which was developed by the guys at 37signals to address the problem described above. The one thing I could not understand or find any direct answer to was: how do I install xip.io? After another hour of desperation, I found out that it is actually now part of the MAMP install (Version 3). You don’t need to do much apart from making sure your network settings are correct and adding some aliases.
I am using OSX Mavericks so apologies to developers on other systems.
So, here are the steps for getting this to work on any browser that is on the same wifi network as your master machine, using MAMP (free version) :
Make sure your local server has a fixed IP on your local Wifi network, you can grab the IP address if you go into System Preferences > Network > Wifi.
Let’s say your IP address is 10.60.85.140, and your local site has been setup in your httpd-vhosts.conf file* with a ServerName of “mylocalsite”.
In your httpd-vhosts.conf file add/amend the ServerAlias for your local site in the form [hostname].[server IP].xip.io. This would be “mylocalsite.10.60.85.140.xip.io” in this example case **
Restart your MAMP servers, and enter that URL into your browser on a connected device, and you should see your localsite there! If you are working inside a network with a proxy, you might need to just disable the Ethernet connection so it doesn’t interfere with your access.
ALSO – if you want to use Edge Inspect for remote debugging, just enter that same URL in your local browser, and you’ll be able to view the page in Edge Inspect on your connected device.
I hope this was useful, there’s certainly other solutions out there, but in the end this was pretty easy to setup.
Big shout out to @torharrington for help in figuring it all out!
*This is where your Virtual Hosts are usually configured. It can be found in Applications > MAMP > conf > apache > extra. In MAMP PRO you can do this through the admin console, but I’m cheap so I do it manually!
