Category: development

Hey good lookin’…introducing W&M’s new responsive design

Cross-posted from the W&M Creative Services Blog

Back in April we mentioned that we were working on a new responsive design for the main W&M website (www.wm.edu), and after a few browser fights (thanks Internet Explorer), a dozen test devices and many hours coding and tweaking, we launched our new design on July 23, 2013. (Grad school sites will follow suit in the coming months.) Now every office, every academic department and every other page on the W&M site adjusts its layout to best accommodate how you are viewing the site, regardless of what device you’re using (desktop, laptop, tablet or mobile).

The announcement

To announce the launch our office made a little stop-motion video (our first!) starring the computers, phones and tablets of various Creative Services staff members:

The motivation
desktop

Desktop/laptop view of the W&M website. The green bar on the left is the page navigation, center light tan area is the main content, and the darker tan boxes down the right side are the supplementary content.

The idea behind this change was spurred in large part by the fact that our mobile and tablet visits have gone from less than 2% of our site traffic in 2009 to over 17% of our traffic this summer. With so many mobile and tablet visitors (and more sure to come) we wanted to ensure everyone could easily navigate and view all of the content on our website, not just our homepage (which we made responsive last year).

Prioritizing

So what was involved in this redesign? Up first was evaluating which parts of any given page are the most important, and it is, unsurprisingly, the main content. That main content is why you search Google, click a link in a social media post, or work your way through navigation menus. This needs to be front and center (and top) regardless of how you are looking at the website. So, after our global site navigation and header, the most prominent thing you will see is always the main content. We then ordered the rest of the content: page navigation, supplementary content, etc.

The major changes
tablet

Tablet view. Here the right column has been moved below the main content area and the top “global” site navigation has been adjusted from one row to three.

As you begin decreasing the width of your browser window we adjust the global navigation to become three columns rather than one row (since the single row will no longer fit).

We then move the right column, which contains “widgets” with photos, Twitter feeds, related links and other supplementary content, down below the main content area.

So, with this first batch of changes nothing is removed, only rearranged to best showcase the content (this is a key feature of responsive design). Once the page width is even narrower, the menu on the left side of the page drops down below the main content as well (keeping its familiar green background for continuity). However, keeping in mind that page navigation is a useful and important part of the page, we provide a “Site Menu” link so you can quickly get to that area when you need to. In between all of these steps the content is stretched to fit the width of the page, and photos and tables are resized to be as visible as possible.

Those with a careful eye may also notice a few style tweaks, all made to enhance the user experience. We removed busy lines from the menus, adjusted the color and size of the content headings, and increased the font size and line height of the content. All of these updates were made to give the site a bit more space to “breathe” and to make things easier to read. We also ensured that our treatment of text links is consistent throughout the site, helping with the overall usability of the site—if a word is bright green (underlined or not) it is always a link.

Cheap as free “mobile version” for all, no app needed
mobile

Mobile view. A link to the site menu replaces the menu itself and the main content comes up front and center, with supplementary content following.

One of the best parts about a responsive design is that it is a seamless improvement for the folks creating the web content. Nothing changed in Cascade (our web content management system) from the web editor’s perspective. They still enter their page title, content, photos, links and so forth, just as they always have, except now the content they entered is mobile (and tablet and desktop) “friendly.”

What’s next

Currently our team is focusing on updating our four graduate school sites with their own responsive designs. Along the way we’ll also be making a variety of supporting sites responsive (those W&M sites not hosted in Cascade, like the directoryW&M Experts and W&M Events).

What do you think of our new design?

More

Responsive Design Resources

(Cross-posted from the W&M Creative Services blog)

As we’ve gone through the process of redesigning the W&M website to follow responsive paradigms we’ve amassed a list of resources we’ve found useful, ranging from general topic familiarity to issue-specific tools and tricks. Since there are many organizations out there starting to take a look (or are already knee-deep) in a responsive design, we thought these links may be of interest to others as well:

General
  • Responsive Web Design – Ethan Marcotte – The article that more-or-less started it all
  • Responsive Retrofitting – Since many folks don’t have the luxury of a full rewrite
  • Common Misconceptions About Touch – Steven Hoober – Since fingers and touchscreens are what have prompted us to even really need a responsive design in the first place, it’s best to know what you’re getting into
  • The State of Responsive – Stephanie Walter – A great summary of the current state of the art
  • Improving UX through Front-End Performance – Lara Swanson – Just making your site adjust to different sized screens doesn’t make it mobile friendly
  • Printing the Web – Hans Christian – Since  we’re trying to accommodate all kinds of devices, can’t forget paper (plus it helps you focus on your content, which is helpful in any size and medium)
Tools, tips and tricks
Retina images

Many of these links were discovered courtesy of two mailing lists: Responsive Design Weekly and CSS Weekly.

What other responsive design resources have you found that have been helpful?

More

How to tip the odds in your favor in search results – Headings, images & content (part 3 of 3)

(cross-posted from the W&M Creative Services Blog)

So you’ve set up the framework for your page, placing it in the appropriate spot on your site, giving it a readable URL and meaningful title, and filling in the description metatag. Next we will take a look at what goes into the main content area on your page.

Useful Headings

Headings help to create a hierarchy of information on your page. One way to think of headings is as if you were writing an outline of your page’s content like you did back in middle school for a research paper. If you skim the headings do you get the gist of what the page is about? W&M’s Web Writing & Style Guide encourages you to use headings thoughtfully and sparingly, which is also good practice for SEO. Use heading tags where it makes sense. If there are too many headings on a page your users will not know where to start visually; they will not be able to quickly determine what content is important, and they cannot easily scan to find what they were looking for on the page. Keep in mind, if your user cannot find what they’re looking for amongst a sea of headings, how will the search engine?

Images with “alt” text

Images may seem like just a nice visual element to add to your site but you can optimize them for search engines as well. All of your images should have “alt” text that is descriptive and can serve as a reasonable alternative (thus the “alt”) to the image if it cannot be displayed or is being “seen” by a screen reader for those users with vision impairments.

Another helpful SEO tip is to give your files meaningful names (just like your folder System Names). Rather than IMG0123.jpg, name it crim-dell-bridge.jpg (being sure not to use spaces, capitalization or any special characters aside from dash (-) and underscore ( _ ) ). Google looks at file names just as it looks at the URL and page name of your site, so giving it a meaningful name will help both the search engine and yourself find images.

Descriptive Links

Anchor text, the clickable text that users will see as a result of you adding a link to your content, should tell users (and Google) something about the page you are linking to. Avoid using “click here” or similar phrases. Instead describe where the link will take the user. This way it is easier for the user (and search engine) to scan the page and find relevant links as well as understand what the page you’re linking to is about.

Quality Content

Putting up clear, quality, relevant content on your website, whether in the form of an informative page title, well structured links, or useful image descriptions will help your page become more relevant to search engines. However, what influences your website more than any of these factors is the main content of your page. Creating compelling and useful content is what drives users to come to your page in the first place, and is what will prompt them to share that content and create the buzz that helps build the reputation and credibility of your site.

Content Questions to Ponder

If you are finding that your site does not appear where you expect it to when searching for a particular term, examine your content (this includes your page title, links and headings as well as the main content). Do you mention the search term you’re looking for anywhere in your content? Is it important enough that you should adjust your page title to include the term? You never want to “stuff” your page with search keywords to try and increase your rankings. However, if you find that people are searching for “agenda” when you are using the word “program” you may want to tweak your content to use that more common search term instead.

So with SEO it pretty much boils down to: write good content, name things clearly and concisely, and just generally be “friendly” to your users. These steps will take you a long way in making your site more relevant to Google and its searches, both on wm.edu and on Google’s main site. Happy searching.

More

How to tip the odds in your favor in search results – Titles, links & metatags (part 2 of 3)

(Cross-posted from the W&M Creative Services Blog)

We started with a quick overview of what Google says to concentrate on in your search rankings (do what’s best for your visitors) and how the W&M site search works. Now let’s move on to your actual web pages, starting with the things you create first when you make a new page.

Clear Site Hierarchy

Try to structure your website with the most important information “up front,” either linked from the homepage or very easily accessed from it. Using this kind of hierarchy in your site helps both users and search engines determine what is most important on your site.

Readable URLs

The system or file name is pretty much always the first thing you set when creating new content and it is what forms the URL for your page. For your system name try to be as descriptive as you can. Use dashes (-)  to separate words if you want a multi-word system name, for instance “meeting-minutes” rather than “meetingminutes.” Using a character like the dash or underscore to separate the words makes the URL easier for Google (and your users) to see what your page is about, a page like “www.wm.edu/folder1/folder2/index.php” is much harder to remember and figure out what the content is about than “www.wm.edu/about/history/index.php.” If there are key words in your page URL those will also be indexed in Google’s results, so this is one more spot where using meaningful names for your pages can help improve your search rankings.

Concise and Effective Page Titles

Each page in your site should have a short but unique title that clearly indicates to both Google, and the person viewing your site (either in search results or actually on the page) what the page is about and how it differs from other pages on your site.

Metatags (where needed)

Years ago the keywords metatag was a factor in search engine results but in recent years Google has begun ignoring the keywords field, mainly because sites were “stuffing” the keywords field to bump up their search results rather than putting in the most relevant keywords for their site. So this is not something you’ll need to worry about for your page.

A page’s description metatag gives Google and other search engines a summary of what the page is about. Although these do not directly influence the search results any longer, they are still important as search engines may use them as descriptive snippets for your page if it turns up in their results. Something to note, if the search engine finds text it deems more relevant to the user’s search, such as a sentence containing their search term, then that may be used as the summary for the search result instead of what’s in your description metatag.

As with page titles, the description for each page should be unique and specific to each page. If you copied the same description from page to page, how will users be able to distinguish which of your pages they want to visit when they come up in a search result? If all of the results from your site appear the same the user may skip your site altogether since it is unclear.

In the next post we’ll look at how the main content of your page affects your search rankings, with tips on how to improve those rankings using your images, headings and general content.

More

How to tip the odds in your favor in search results (part 1 of 3)

(Cross-posted from the W&M Creative Services Blog)

There is no magic bullet for getting your site ranked highly in Google’s (or any other search engine’s) search results. However, there are a handful of best practices that can help you make your pages more relevant to users and thus more likely to become top-ranked results in Google, this is referred to as SEO (Search Engine Optimization).

First, a starting thought from Google’s SEO Starter Guide (emphasis mine):

You should base your optimization decisions first and foremost on what’s best for the visitors of your site. They’re the main consumers of your content and are using search engines to find your work…Search engine optimization is about putting your site’s best foot forward when it comes to visibility in search engines, but your ultimate consumers are your users, not search engines.

Search results on wm.edu

On the W&M website we use a Google Custom Search Engine which, when you boil it down, is just Google’s normal search engine except it’s results are restricted to only look on a particular set of sites (in W&M’s case, anything ending in “wm.edu”). So all of the following tips from Google’s SEO Starter Guide will apply just as well to a site’s search results as to Google’s (although they may not match exactly).

In the next two posts we will work from the top down on a web page, from page URLs to image descriptions, exploring how each element affects search results — stay tuned…

More

Better Facebook statuses with links

Having links, photos or videos in your Facebook status updates is shown to increase engagement by your fans. When there is more than just a plain text status update you are more likely to capture your audience’s attention and stand out in their news feed if you have an interesting visual element.

Facebook auto-generates a thumbnail or small image preview when you include photos or videos in your status updates. If you are linking to a webpage in your update (which you can do by simply pasting the URL into your status), Facebook will create a preview of that link to include with the status by looking on that page for a suitable title, description and image to use as the thumbnail. The title and description of the preview typically come from the page title and the first bit of content on the page. The image is pulled from anywhere on the page that Facebook thinks is a suitable image. If there are no images found on the page you are left with just text, which is not as intriguing for your fans.

You can assure that there’s always an image to include by using one of two methods: adding an “image_src” link tag to the head of your HTML document, or by including an appropriate image on the page (this can either be included to supplement the content of the page or hidden from view with a bit of CSS styling).

The syntax for adding the image_src link is:

<link rel="image_src" href="http://site.com/image.jpg" />

By including this code in your HTML header you are telling Facebook to use this, and only this, image for your page. This is useful if you want to enforce consistency when folks link to your site by having the same logo or photo associated with your links. However, the side effect here is this will restrict a user from selecting any other image on your page (if there are any available) as the thumbnail for the link.

The second option is to have an image in the body of your page somewhere, either in the content or hidden from view on the page. This allows you to have both a “default” image to use if there isn’t one available on the page, and to allow selecting a more appropriate image from the content if it is available.

If you do not want to show the image you can hide it with:

style="display: none;"

added to your HTML image tag, this will hide the image from view in the browser, but allows Facebook to still see the image and include it for use as a link thumbnail.

Bonus Tip: You can trick Facebook into having two links in one status update by pasting the URL of the first link into your status update, adding a space at the end so Facebook recognizes it as a link and adds the preview, then you can delete that URL, compose the rest of your status update, and paste in a second supplementary URL.

More

Full-screen video playback for Android

AndroidSo you want to have video playback in your Android app? This is pretty straightforward to do once you know what you’re looking for and, aside from a few (rather tedious to figure out) small snags which I’ll go into later, can be completed relatively quickly.

What we wanted to do for W&M’s Dress the Griffin app was, when a button was pressed, open a video fullscreen, automatically play it, and when the video completes, return to the previous screen. It took me a while to find the correct Android widget to use, but once I did, things were pretty straightforward (I went off-track for a bit trying to get a MediaPlayer to work, but it turns out there’s a VideoView explicitly for doing what I was looking to accomplish).

The two main files you’ll need for a full-screen video player are a new Activity class that will create a VideoView and set it as the main content view until the video playback has completed:

package yourpkg;

import android.app.Activity;
import android.media.MediaPlayer;
import android.media.MediaPlayer.OnCompletionListener;
import android.net.Uri;
import android.os.Bundle;
import android.widget.VideoView;

public class VideoPlayer extends Activity
   implements OnCompletionListener {

	private VideoView mVideoView;

	@Override
	public void onCreate(Bundle b) {
		super.onCreate(b);
		// Bring the video player to the front
		setContentView(R.layout.videoplayer);
		// Get a handle on the VideoView
		mVideoView =
			(VideoView)findViewById(R.id.surfacevideoview);
		// Load in the video file
		mVideoView.setVideoURI(
			Uri.parse("android.resource://yourpkg/raw/videoname"));
		// Handle when the video finishes playing
		mVideoView.setOnCompletionListener(this);
		// Start playing the video
		mVideoView.start();
	}

	@Override
	public void onCompletion(MediaPlayer mp) {
		// The video has finished, return from this activity
		finish();
	}
}

And a layout XML file to show your video fullscreen:

<?xml version="1.0" encoding="utf-8"?>
<!-- Create a full-screen layout
	The video I'm playing back is portrait/vertical so
	set the orientation accordingly.
-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<!-- Create a full-screen VideoView -->
    <VideoView
        android:id="@+id/surfacevideoview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    />

</LinearLayout>

Once these are set up you are pretty much ready to go, all you’ll need to do is start the video playback activity, spurred by a button press or something similar:

Intent videoPlaybackActivity =
	new Intent(v.getContext(), VideoPlayer.class);
startActivity(videoPlaybackActivity);

and you’re off.

The three main things you have to be aware of are file size, aspect ratio, and video encoding.

File Size: Try and make your video the smallest file size and lowest resolution that you can tolerate, since this will be played back on a myriad of devices with a wide range of memory limitations.

Aspect Ratio: Keep in mind your video will be letterboxed to fit the screen dimensions of each device, so make sure you can handle the smallest size and screen density that you can (depending on what devices you plan on supporting). For more about supporting multiple screen sizes the Android documentation offers a pretty nice overview.

Video Encoding: This caused me more problems than anything else. I was presented with a lot of “Sorry this video cannot be played” messages, blank screens that would immediately kick back to the main screen, or blank screens that would only play the audio and not the video on my way to finding the correct video encoding (and all of those symptoms are frequently, if not exclusively, caused by incorrect video encoding).

The Android documentation’s list of supported media formats was a good start, but even when I thought I had the correct encoding I was still having major issues with playback. Luckily a great open-source multi-platform video transcoder app called Handbrake came to the rescue. After tweaking seemingly every possible combination of controls in Handbrake I ended up back on what was essentially the “iPhone and iPod Touch” preset. So here are the video export settings for Handbrake that worked for me for video playback for Android:

  • MP4 format (so end up with a .m4v file)
  • MPEG-4 video codec (with “constant quality” setting QP 14)
  • AAC audio codec, 128 kbps

The only change from the “iPhone and iPod Touch” preset is that the video codec is changed from H.264 to MPEG-4. This tweak wasn’t really intuitive from the documentation (which made it seem like either H.264 or MPEG-4 should’ve been fine) but this is what ultimately worked for me.

Happy full-screen video playing!

More

Image placeholders for your website mockups

This is a nice way to ease into the week (courtesy of an afternoon article in NetTuts+). Rather than using boring solid-color boxes as placeholders in your website mockups here are two (cute!) alternatives: placekitten (my personal preference) and PlaceDog. For either one you just put your image dimensions (width & height in pixels) after their URL and you’ll get a placeholder image (so something like: http://placekitten.com/200/160)

PlaceKitten Sample

PlaceKitten Sample (200x160)

PlaceDog Sample

PlaceDog Sample (200x160)

Or for a slightly more serious version, you can pull themed images (based on tags) from Flickr with flickholdr.com
FlickHoldr Sample

FlickHoldr Sample (200x160, ocean)

More