Web Design for the Real World

I don’t normally like “Real World” topics but this seemed like a worthy title.  On Twitter, I shared an article that I had read “3 reasons we should stop using navigation bars“.  The discussion is good and made me reflect on how things have changed in design over the extent of my memory and of the various changes in technology.

My first webpages were torture to create.  I had a book with the HTML tags and would do the creation in Notepad, making reference to the tags as I needed.  Tedious by today’s standards but the current benefit to me now is that when I’m working on a blog post or on a wiki page or a web page, I can quickly turn to the text behind the scenes to manually adjust things.  Or, if I’m on a web site and I wonder “How did they do that?”, revealing the source of the page unhides many secrets.

From working raw text, I graduated to the editor in Netscape and then to Frontpage and ultimately Dreamweaver.  I was on the OSAPAC Committee when we licensed the Adobe product for all schools in the province.  I did a whack of workshops and that was good – it forced me to learn the product in great depth.  Then, there were the Flash years.  That was a whole new level of programming, adding slices to objects, making music start when the web page was loaded, adding actions to mouse clicks, and so many other things that made individual school and teacher websites truly unique.  With this customization, all kinds of features stood out and said “This page is ME”.  Even the Student Reference Portal that students used had Flash menus for that sort of contemporary feel to it!  (At least, at the time)

Throughout the process, I would test my efforts on Macintosh and Windows, using a variety of browsers to make sure that everything was interpreted properly by the browser.  Remember the messages “This Site Best Viewed by …”  It has actually sparked a campaign.

Then, I got my first iPod.  I originally didn’t get it to be an internet connected device.  I just wanted a portable music player but it wasn’t long before I had it connected to the wireless and used it as a portable web device.  From there, I graduated to an HTC Legend smartphone.  The screen size was a whopping 320×480 pixels in size.  Quickly, you learned to rotate the device to change orientation and the important “pinch out” movement to expand an area of the screen for viewing.  Then, you scroll with your finger to get what you want to read on the screen.

All the while, developers were having better equipment to develop their websites.  When you’re developing on a screen with a size of 1600×1200, screen real estate takes on a completely different meaning!  Certainly, the notion of a navigation bar will take up some room leaving even less room for you to browse a website.  As noted in the article, developers want to be able to show you everything.  As web resources increase their content, is this what we really want or need?

In response to my posting the message, a couple of folks that I interact with daily offered some suggestions.

@dougpete I’ve started skipping page content, going direct to bottom nav bar. If I don’t find what I want there, I go to another site

— Linda Aragoni (@LindaAragoni) January 20, 2014

@dougpete This is something the “hamburger menu” can look after. Big question: should it be top-left or top-right? 🙂 — Brandon Grasley (@bgrasley) January 20, 2014

Both of these are good suggestions (although I’d never heard of the three barred menu as “hamburger menu”.  I decided to poke around.  Surely, Apple is mobile friendly…after all they were quick off the mark in mobile.

Surprisingly, no.  Check out the navigation bar at the top of the page.  Note that you’d still have to do some pinching and rotating to get what you want…  This is the regular web based page, looking nice on a laptop or desktop but resized to go mobile.

OK, how about Microsoft?

This was an interesting approach.  The site recognized that I was coming with a mobile device and shipped me a mobile page.  The important navigation is available via nice big areas on the screen.  You’ll notice a bulleted hamburger menu in the top right.  When you first visit the site, the menu is expanded.  Tap the menu and then menu items go away.

And, how about Google?  I headed over to Google Plus where you see Brandon’s hamburger menu again, top left.  (and Brandon’s latest blog post…)

Tapping the hamburger reveals a full menu of Google options.

It was quite an interesting experience taking a look at the differences in design.

Apple seems to have ignored mobile; Microsoft and Google have taken two different approaches to how the menu operates.

Now, importantly, how about “doug — off the record”?  It’s not coded by scratch – I use WordPress and a theme to present my content.  If you were reading last week, you’ll know that I’ve just changed themes.  How does my blog stand up?

I’m not displeased.  Visit the blog and you’re pushed the most recent blog post.  That’s not an unreasonable approach.  A post is probably of interest to people for roughly 24 hours until something else gets posted.

There is yet another approach that you often see when you reach a website on mobile.  You’ll be asked “Do you want to download our app?”  That gives the author a great deal of control over everything.  The problem, though, for me, is I don’t want my device full of individual apps for all the sites I want to visit.

In reality, I want the site to recognize the device I’m using and send me an appropriate page.  I want simple navigation and I want to be able to get where I want to go quickly.  I want the page to respect the device and the size of its screen and make things right when I visit the page.  Is this too much to ask?

So, from a time when we had to ensure that a site worked on a few browers, the developer now has to also be concerned about the size of the actual device.  I’ve seen designs chosen that are clearly designed for a full sized screen.  I would suggest this is so old school.  You need to be concerned about all possible traffic to your site.  In a world going increasingly mobile, the importance of this is only going to grow.


OTR Links 01/21/2014

Posted from Diigo. The rest of my favorite links are here.