Archive for the ‘Website Design’ Category

Is Your Responsive Design Working? Google Analytics Will Tell You

Smashing Magazine Logo

Google Analytics has some great multi-device features built in; however, with responsive design, we are really designing for form factors, not for devices. In this article, we’ll demonstrate how WURFL.js and Google Analytics can work together to show performance metrics across form factors. No more guessing.

Smashing Magazine is one of the best of the online webdesign magazine. It’s well worth keeping up with for new techniques.

Library Terms That Users Understand [eScholarship]

eScholarship logo

This document is intended to help library web developers decide how to label key resources and services in such a way that most users can understand them well enough to make productive choices. It compiles data from usability studies evaluating terminology on library websites, and suggests test methods and best practices for reducing cognitive barriers caused by terminology, and provides an extensive list of resources.

I’ve been meaning to post this for a while. Jargon is one of my biggest concerns about library website design. We use all these terms just assuming that our patrons understand them without checking that they do.

University Websites: Top 10 Design Guidelines

In preparing a new full-day course on designing university websites, we conducted a range of user studies. In total, we tested 57 higher-education sites with users in the United States, Canada, UK, and Taiwan. We recruited prospective students, both undergraduate and graduate, as well as parents of prospective students. Users were asked to think aloud while performing exploratory tasks

Theme Process Roundup

Screenshots of the Creative Librarian website as of January 11, 2014 on various screens.

This is an index of a series of articles I wrote on the process I went through creating the third theme for this site. It was spurred on by the release of WordPress with the new Customizer feature and my desire for a responsive, retina-ready theme I could re-skin when the desire hit me. The articles are listed in the order they were published but they’re each written to be read alone.

  1. Icon
  2. Responsive, retina-ready icons
  3.  Flat Design
  4. Responsive Design
  5. WordPress wrangling

Responsive Design

The Creative Librarian website at several screensizes

The Creative Librarian website at multiple screen-sizes.

Responsive design is a method of web design that has been developed in response to the almost infinite number of screen sizes designers are faced with today. Rather than create multiple websites or relying on browser-sniffing, it uses fluid design and a CSS3 feature called Media Queries to adapt the website design depending on the size of the browser window.

Media Queries have been used for years to specify print stylesheets. They are fairly sophisticated, accepting both a range of widths and arguments such as media (screen, print, aural), orientation (portrait, landscape), and color. They are commonly used to adjust the layout, typography and size of images and icons down for mobile devices, however, I used the “Mobile First” technique of using the mobile design as the default and making modifications as the window gets larger.

One of the additional problems with mobile devices (and one of the pillars of Responsive Design) is page load time. They often don’t have the processing power to load pages as quickly as desktops and often have data limits that make the large images of desktop websites prohibitive. A number of methods of changing images based on screen size and device are being worked on but there is no easy answer yet.

I discussed the responsive icons used on this site in an earlier article. In short, I chose an icon font for the limited impact on page-weight, the ease of resizing, resolution-independence, and the ability to style them with CSS. It was easy to implement using CSS :before and :after selectors and adds to the visual appeal and usability without adding noticeably to the download time.

Mobile Navigation in Responsive Design

Mobile navigation demo

Mobile navigation demo from Navigataur

How to deal with the menu is a common problem with websites on small screens. There have been a number of solutions offered, most using javascript. I used a pure CSS method from Navigataur to switch from a menu bar to a drop down menu toggled with the “hamburger” icon of three horizontal lines. It was a little tricky to set up but since I got it working I haven’t had any more problems.

Design for Internet Explorer

 

Internet Explorer logo

So Responsive Design is a great idea and media queries are supported in all modern browsers… (Say it with me) except Internet Explorer. Until version 9. Unfortunately, there are people who are still stuck with earlier versions of IE for one reason or another and others who simply don’t bother to upgrade.

Respond.min.js adds basic media query support for IE versions 6-8, which combined with conditional comments allows them to get essentially the same experience as those with more advanced browsers. All you have to do is call the script.

There are a couple of more workarounds in this design for IE. For convenience, I’ve combined them all into one code block. Part of this design relies on RGBa transparency in the CSS which, again, is not supported by older versions of IE. I used a conditional comment to reset the content background to the opaque color. It’s not as pretty but it’s functional and the transparency wasn’t worth a more elaborate workaround that would increase page load time to me. I had enough javascript weighing down the page already.

The last workaround for IE was a little script to add HTML5 support for older versions. I like HTML5 for its increased semantics and accessibility as well as how easy it makes to use common techniques like form validation. This script makes versions on IE that don’t support HTML5 recognize the elements for styling.

<!--[if lt IE 9 ]>
<script src="<?php bloginfo('template_directory'); ?>/_/js/respond.min.js"></script>
<style type="text/css">#page-wrap { background:<?php echo($cbgcolor);?>; } </style> 
<script type="text/javascript"> //Make IE 7 &amp; 8 recognize html5 elements for styling (function(){ var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption| footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|'); for(var i = 0; i &lt; html5elmeents.length; i++){ document.createElement(html5elmeents[i]); }} )(); </script> <![endif]-->

Those are the highlights of the issues that popped up in the design. As we can forget the older versions of Internet Explorer, it becomes much easier over time.

Flat Design

 

Windows 8 Flat Menu

App menu on a Kindle Fire

Skeuomorphism is the design style of making web interfaces look like physical interfaces, such as the book shelves on the Kindle Fire.

Flat design is the current trend seen in Windows 8, Apple’s IOS 7, and a number of color-blocked websites. I like flat design a lot as it fits with my own aesthetic of simplicity and minimalism. It forces the designer to focus on typography, shape and color contrast to maintain interest and usability. Many designers are using bright crayon colors along with it but there’s no reason more muted colors couldn’t work. It’s all in how you place them for proper contrast.

Flat design also makes responsive design easier with simpler designs that flow more easily between screen sizes and smaller file sizes.

When this theme went live, it was completely flat. As I’ve gone back since then and added back a couple of faint borders and subtle shadows. Not only do I find the result looks better but they also aid in usability by making it easier to distinguish between elements. Everything in moderation, even minimalism.

Responsive, retina-ready icons

With the advent of high-density displays (including Apple’s Retina), there has been a scramble in the web design community. Since the creation of the World Wide Web, small and low quality (compared to print) images were the standard way of dealing with slow connection speeds as computer monitors were not advanced enough to display the full size versions.

Now, web designer are being pulled in two different directions trying to balance screens that require high quality images with the increase in mobile devices whose loading speeds and data limits still make large images undesirable.

Screenshot of Ligature Symbols symbol font website

Ligature Symbols

When I decided to include a few icons in this design, I went looking through my bookmarks for possible solutions: icons at multiple sizes, SVG, pure CSS and endless icon fonts. I was drawn to an icon font as a solution because it solved the problem of multiple display resolutions while only adding one small font file to the download. Because font characters are drawn on the device, they have no resolution and look good on any screen. Because they are characters, they can be styled using the same CSS font rules, allowing me to resize as needed for different screen sizes and making them more appropriate for my plan to change the colors frequently.

Most desktop and mobile browsers now support webfonts and since I planned to use them in addition to text labels I didn’t have to worry about usability issues in older browsers.

I chose Ligature Symbols because it had all the symbols I was looking for initially and came with example code for CSS :before and :after selectors. This means no extraneous markup in the HTML file, it’s all done in CSS. Any browsers that don’t support :before and :after selectors or icon fonts simply don’t display anything.

Using CSS made it very easy to implement and as I added more symbols to the design, it only took a few lines of CSS without impacting the download time. The icons themselves add visual interest and make the site easier to navigate.

Responsive Inspiration

Emory University website at mobile width

Responsive Design Sites: Higher Ed, Libraries, Notables is a list of responsive university and library websites created by  . A nice starting point for research if you’re looking for examples to convince administrators responsive is the way to go or looking for inspiration for your redesign if you already have.

(For those wondering what I’m talking about, Responsive Web Design (RWD) is a method of creating web design that adapts a website to work better on multiple screen sizes from smart phones to large computer screens. The example photo is how the Emory University website looks on a smart phone screen. Follow the link and resize your browser window to see for yourself.)

Responsive Webdesigns in Libraries

The University of Tennessee, Knoxville's responsive website.

The University of Tennessee, Knoxville’s responsive website.

in The Mobile Challenge | The User Experience, Aaron Schmidt has some excellent points to make about the difficulty in using responsive design for library websites. The biggest two being that first we don’t know what users are trying to do from their mobile devices and second, that we often have little control over the presentation of the services we license for our users.

Meanwhile, a report from the U.S. Census Bureau shows that not only are more people using the Internet from mobile devices, there may be a significant part of the population that only accesses the Internet from a mobile device. Today’s smartphones are just as capable as most computers and significantly cheaper but their smaller physical screens and expensive data plans means they have particular needs that need to be addressed.

It’s a tough balancing act, particularly combined with the advent of high resolution screens on the same devices with data caps but one libraries can’t ignore.