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.
Archive for the ‘Website Design’ Category
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
Design for Internet Explorer
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.
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 ]>
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.
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.
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.
Instead of giving you a single favicon.ico file, RealFaviconGenerator generates all the pictures and HTML code you need to get a cool, mobile- and tablet-ready favicon.
Responsive Design Sites: Higher Ed, Libraries, Notables is a list of responsive university and library websites created by Eric Rumsey. 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.)
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.
State of the mobile web — sources is a collection of current statistics on Internet use on mobile devices with links to their original publications.
Stop resizing that browser, you’re gonna wear it out!How many times have you heard that one? Well okay, maybe not so many times, but if you develop responsive design web sites, you know what I’m talking about: with every DOM or CSS edit you’re dragging that browser edge back and forth, testing your changes and looking for anything broken.
Ultimately, most of this effort is an attempt to emulate the screen size of different devices.
So what is a developer to do? Thankfully, there is a growing number of browser-based tools available that emulate the screen sizes of a wide variety of devices. Different tools come with different feature sets and varying levels of utility, of course. We’ll look at several of them here.
A very useful list of services for fast side-by-side comparisons at different sizes. Am I Responsive is particularly nice in that it works with localhost so you can use it on projects still in development.
In the mobile development world, a device emulator is a desktop application that emulates mobile device hardware and operating systems, allowing us to test and debug our applications and see how they are working. There are also operating system emulators that don’t represent any real device hardware but rather the operating system as a whole. These exist for Windows Mobile and Android.
On the other hand, a simulator is a less complex application that simulates some of the behavior of a device, but does not emulate hardware and does not work over the real operating system. These tools are simpler and less useful than emulators. A simulator may be created by the device manufacturer or by some other company offering a simulation environment for developers.
Firtman has compiled a list of 37 resources for mobile device emulators and simulators. We almost never have all the resources we need for development, particularly mobile.