22 04, 2013

Considering Drawer Style Site Navigation

By | 2016-05-27T10:13:29+00:00 April 22nd, 2013|Categories: Web Development, Creative Design|Tags: , , , , , |

Lately we have been utilizing a drawer style navigation in our designs to provide a better user experience in our websites. The request for quite a bit of content in the drop downs themselves (mega drop downs that span the full width of the site no matter which tab you have clicked) in some of our more complex higher-ed sites also creates the problem of covering up the content of the site and proving tricky when the site responds to mobile screen sizes. Putting the navigation in a sliding drawer is proving to be a unique solution that translates beautifully to mobile in responsive design.

If you look on Mashable, a popular news article site, the nav drawer does not shift the page down, but is a full width mega drop down menu. Compare to the University of Wyoming, a site recently developed by Beacon, which has a drawer based nav.

Mashable mega drop down navigation

University of Wyoming drawer based navigation

Whether or not this is the right nav for your site will probably be based upon a lot of factors like what type of content is in your drop downs and what type on content is on your homepage. If you have a lot of content in your navigation it may be worth while to put that navigation in a slider so that the homepage remains visible, even when the navigation is open. Also, you need to think about what your navigation does on mobile devices and tablets and how to best integrate this with your drop downs. Mashable.com serves up a different navigation for it’s tablet users, for example, simplifying the menu, so they put it in a side drawer. On the higher ed sites we develop here at Beacon, we need to provide a consistent navigation for users on every type of device, so we might use a similar drawer on both mobile and desktop, but just change the navigation to stack taller on smaller devices and open and close subsections. This also can allow us to integrate deeper navigational tiers in the main nav on mobile devices so we can keep the content area cleaner and simpler.

This solution can be elegant and it even translates very well to touch devices that do not have the ability to open menus on-hover. This keeps the experience more consistent through all the screen sizes by utilizing an on-click drawer.

Ultimately decisions like these need to be made on a case by case basis.

22 03, 2012

Top Mobile Browsers

By | 2017-06-16T12:40:13+00:00 March 22nd, 2012|Categories: Web Development|Tags: , , , , , , |

Within the mobile phone landscape, there are at least ten operating systems (OSs) and fifteen browsers that require consideration when testing. Web developers should concentrate their testing efforts on smartphones. All good mobile browsers run on one smartphone platform or another. To get stats of popular browsers in your country there’s only one source of mobile browser market share information: StatCounter.

Apple, Google, Samsung, and RIM default browsers are among the top browsers because they support touch events and are all based on the WebKit rendering engine. The next level of mobile browsers include Opera Mobile, Palm WebKit for webOS, and MicroB, the Gecko-based default browser for Nokia’s Maemo OS. These browsers do not support touch events, and zooming varies in each implementation. From a pure CSS and JavaScript point of view however, you’ll encounter few problems. Of the three, Opera Mobile is the most important, because it serves as a default browser for many Windows Mobile devices where the vendor decided IE wasn’t good enough. Currently, it’s an alternative for Nokia WebKit on Symbian, the largest mobile OS.

Below is a list of all the current mobile browsers, there special features, operating systems, and devices they can be found on. Some of the browsers do not come default on phones but are among the top browsers used today.

  • Opera Mobile
    • Key Features: Multiple tabs, Zoom-in
    • Operating System: Windows Mobile, Symbian
    • Devices pre-installed with Opera:
      • Nokia N90
      • Sony Ericsson P1
      • Sony Ericsson XPERIA X1
      • HTC Touch Viva
      • HTC Touch Diamond
      • HTC Touch Diamond2
      • HTC Touch Pro
      • HTC Touch Pro 2
      • HTC Touch HD
      • HTC HD2
      • Meizu M8
      • Creative Zii
      • Samsung i900 Omnia
      • Samsung i8000 Omnia II
      • Sendo X
      • Motorola ROKR E6
  • Opera Mini
    • Key Features: Compressed downloads for fast browsing, Zoom-in
    • Operating System: Java
    • Devices pre-installed with Opera Mini:
      • Motorola V980, E2, L7, i1
      • Nokia 2610,3120c, 2700 Classic, 2730 Classic, 3500c, 3600, 3600 slide, 3710 fold, 3720, 6085, 5130, 5230, 5500, 5310, 5610, 3110, 7373, 6131, 6233, 6600 slide, 5070, E65, N95, N71, N73, 5000, 3110c, 6288, 6103, 6080, 6303, 6300and 8800 Arte
      • Sony Ericsson K310i, K530i, K550, W200i, W760i, Z530i, Z550i, Z780i, W910i
      • Samsung X160, E570, E420, F480, X510, X650, E900, E250, U700, ZV60, D900i
      • LG K880, KU250, KE970, and KU311
      • SAGEM My411x and P9521
      • BenQ-Siemens EL71 and EF81
      • BenQ EZ1 fight
      • Orange Rio (ZTE-G X991)
  • Skyfire
    • Key Features: Display rich websites with Flash or widgets like YouTube, customizable zoom feature
    • Operating System: Android, iPhone, Symbian, Windows Mobile
    • Devices compatible with Skyfire:
      • Android 1.5, 1.6, 2.0, 2.1, 2.2
      • iOS 3.1.3, 4.0, 4.1
  • Safari
    • Key Features: Display rich websites like YouTube, zoom feature, excellent touch-based user interface
    • Safari accounted for 62.17 percent of mobile web browsing traffic in October 2011
    • Operating System: iPhone
    • Devices:
      • iPhone
      • iPod touch
      • iPad
  • Google Android
    • Key Features: Display rich websites, zoom feature, touch screen interface
    • Operating System: Google Android
    • Devices:
      • Android powered phones
  • Microsoft IE for Mobile
    • Key Features: Standard browser features
    • Operating System: Windows Mobile
    • Devices:
      • IE Mobile comes loaded by default with Windows Phone and Windows CE.
  • Firefox Mobile
    • Key Features: Mutiple tabs, Awesomebar, password manager, Add-on support, PC-syncing
    • Operating System: Nokia Maemo, Windows Mobile 6.0 (alpha)
    • Devices:
      • Android 2.1 and above devices with an ARMv7 CPU
  • Dolphin HD
    • Key Features: Gesture browsing, Webzine, tabbed browsing
    • Operating System:  Android, iOS
    • Devices:
      • Android
      • iPad
      • iPhone
  • Blackberry Browser
    • Key Features: Standard browser features
    • Operating System: BlackBerry OS
    • Devices:
      • Blackberry devices
  • S60 Web Browser
    • Key Features: Standard browser features
    • Operating System: S60
    • Devices:
      • S60
      • Symbian Mobile Phones
      • Nokia N8
      • Nokia E6
      • Nokia E7
      • Nokia C6-01
      • Nokia C7
      • Nokia X7
      • Nokia 603
      • Nokia 700
      • Nokia 701