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.

About these ads

6 Comments

  1. Hi Doug!

    I read your earlier post (“Design” on January 16th) that referenced a number of changing parameters in presenting information on the web. There’s no doubt that the web and browser world has changed over the years!

    I’m not convinced that navigation bars are on the way out. I’m also not convinced that serving up device specific pages (originally m. -prefaced low-bandwidth text-only content in the pre-smartphone days) is the only way to go.

    One of the strengths and key benefits that the iPhone and iTouch brought to the world was the respect for page aesthetic and design, rendering full-pages as full pages. I wouldn’t go as far as you have in saying that Apple’s website isn’t “mobile friendly.” I’d say that their page — regardless of the device size — is designed to focus your attention very specifically. I still recall Steve Jobs initial iOS demo highlighting how the Safari mobile browser was DOM-aware as he demonstrated how a simple double-tap enlarged that portion of a properly-coded page. Part of what we have suffered through in recent years has been the viewing of old-style non-mobile-HTML on new-technology-based mobile browsers —- now, over seven years on, there are still times when I shudder at the limited effect offered up by some “phone-sized” page layouts — some sites/themes just don’t render well on phones.

    Recall the WPTouch plug-in for WordPress that became the big thing when Smartphones arrived? It offered an immediate answer to serving up a mobile-friendly site for Smartphones (and later tablets) — and offered the familiar mobile menu icon (“hamburger”) as replacement for the navigation bar — while respecting the full-page design on desktops and larger screens. It provided a wonderful alternative to coding multiple-pages for multiple screens.

    The new easy answer that has become the big thing over the last while is the “responsive” layout — a page that re-draws and re-scales itself as the size of the viewport changes. Your current theme offers this flexibility — noticeable on a desktop computer if you reduce the width of the browser window — as it repositions your navigation menu twice along the way and offers the “windows” icon in the upper right as a way to access the sidebar content as the page width decreases. (Is there an option in your WordPress Flounder theme to include the navigation menu items (preferably at the top of the list) in that window menu in that once we get to the smartphone screen size? It would make sense to include your navigation bar items there, as they seem to have disappeared at that point.) Responsive design attempts to provide a one-size fits all approach to page layout — for those instances when you just don’t have the time/inclination to specifically code for multiple screen sizes. I’d say that most bloggers and small companies fit into this category. Unless you have a full-time web development team at your disposal (or are just really keen to maintain multiple versions of your site) — responsive design is the new way to go.

    As highlighted by the previous commenter — navigation is very important (recall “site maps” in the days of old?) — it is the framework upon which the content of your site is built. Whether it be the new-fangled tag- or category-based meta-classification or the older pre-defined page-based navigation, viewers need some way to make sense of the big picture of a site — regardless of their browsing device.

  2. I used Expression Web from Microsoft to create my home page (not the same as my blog) and it gives me the option to test my page in a number of browsers. And I do. I’m thinking now that tools for creating web pages should also have options to show how a page would look on a small device like a phone or tablet. I wonder if any do that now?

  3. I love this stuff. I find interface and design to be really fascinating. I also wanted to mention that handsome, charming, bald model in some of those images :)

    I’m a fan of the idea of responsive web design, since I don’t want to have an app for every site I visit. I did (and sometimes still do) find the “mobile version” trend to be really frustrating, as the developer would often create a site with a reduced feature set, and would have prevented me from pinching to zoom (a nasty trick to play on a smartphone user). I’ve been told to check out http://960.gs for a gridsystem that can help with responsive design.

    The WordPress theme (“Ryu”) on my blog is responsive, and it’s interesting to watch the page redraw and reorganize as I shrink the width of the browser window or increase the zoom on the page. I like that it include a hamburger menu at the top for the extras (Twitter, Flickr, and my archives), and that the post-specific extras (tags, categories, etc.) move from being a sidebar to being inline as the window gets pretty narrow.

    Interesting note: Google developers apparently refer to the hamburger icon as a “hotdog”: http://www.omgchrome.com/google-chrome-wrench-menu-to-be-replaced/

    I prefer hamburger, myself.

  4. This is fascinating. I found it especially pertinent because i’m reading this on my phone. I now have to go see what my blog looks like in this size, which I wouldn’t have thought of before. Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s