Whether you (or your supervisors) like to admit it, what you do as a Cascade web editor is important and complicated stuff. You help W&M maintain a unified web presence. You create the content that serves to draw visitors in and showcase your department, office or program’s best attributes.
Why not stockpile a few resources? We provide the Cascade Writing & Style Guide, but there are great external resources to help you successfully communicate on the web as well. Here are just a few:
Fight Against Right-Rail Blindness – A great article recommended by Dave Malmquist (our fearless VIMS Cascade manager). Learn how your users are trained to ignore certain types of content in the right-column, and what you can do to maximize this valuable real estate. The good news? The base designs of our right-column elements win half the battle. The rest is up to you.
Free access to lynda.com – Thanks to Swem, IT and HR, W&M students, faculty and staff now have access to lynda.com, an online library that teaches the latest software tools and skills through high-quality instructional videos. By logging into lynda.com, the campus community can access more than 1,400 training videos on a broad range of subjects, including business skills, photography, design, music and video, home computing, animation, and web design and development. New courses are added every week.
Information Architecture: The Journey, Destination, and Return Trip – This is a free webinar presented by mStoner, November 20 @ 2pm. Registration required. Information Architecture (IA) is the way you organize, label, sequence and group elements on your site — from the smallest files and paragraphs to pages and entire microsites — all of it is managed through information architecture (description courtesy of Fran Zablocki, mStoner). If you’re looking to better understand good web structure and how users access info on the web, this could be for you. Please note: this is a live webinar, so we have not previewed the content. Some items discussed may not apply to the W&M website. Feel free to contact our office or your Cascade manager if you have any questions.
September 13, 2013
by Creative Services Comments Off
Have you found one of your widget images extending beyond the widget? To fix the problem, you’ll need to crop the image to the prescribed dimensions of 240px wide by 150px tall (or 209 x 143 for Mason). While Cascade’s built-in image editor is ok for simple resizing, you’ll likely have an easier time using Photoshop, or one of our recommended free image editors. Two of our favorites are PicMonkey and pixlr.com’s advanced editor — similar to Photoshop you can set your desired image size and make an easy crop to specific dimensions.
Reminder: Be sure to use an external image editor to edit and resize your images initially — do not upload high resolution images into Cascade. To help keep our shared database “sprite,” and allow us to continue to maintain up to 20 versions of every file in your history, we still ask that you not upload very large files of any type.
When the web was young and we were unsure of whether people would get it, websites had a lot of directions and introductions that are now unnecessary. Some of the most common:
Welcome to the Benneton College Weaving Department Web Page.
Click here to find out more!
On this web page you will find… Use the menu on the left… or Look below…, etc.
Eliminating phrases like, “use the menu to the left,” or “the Related Links on the right” is especially important for responsive websites. While the Writing & Style Guide discourages the use of relational directions in general, using this type of language is particularly confusing for mobile users—the item you’re directing them to will not always be “on the left” on a phone or tablet. Whether your site is responsive now (www.wm.edu), or will be in the coming months (the grad schools), eliminating language of this type will make your site more professional.
Currently responsive design has launched for the www.wm.edu website. Our grad school sites will also become responsive in the coming months. We’ll keep you posted.
One of our favorite things about the new responsive design is that editors still manage their content in the same way. (Anyone else thrilled about not having to learn a new process?) There are, however, a few things we recommend you review on your sites to optimize for both your mobile and desktop users:
A few font and spacing settings were adjusted to improve the user experience (increased line height and larger Headings 5 and 6, are two examples). You may need to remove extra line breaks or over-sized headings that you were using previously that are no longer necessary. Remember, only Headings 5 and 6 should be used, never Headings 1-4.
Gateway sections now lineup on the page horizontally. You may find this leaves excess “white space” on the page that can be minimized by re-ordering the sections.
Have you caught yourself using phrases like, “use the menu to the left,” or “the Related Links on the right?” While the Writing & Style Guide discourages the use of relational directions in general, using this type of language will now be very confusing to your mobile users (site menus and other elements shift locations on different devices and browser widths).
Back in April we mentioned that we were working on a new responsive design for the main W&M website (www.wm.edu). After a few browser fights (thanks Internet Explorer), a dozen test devices and many hours of coding and tweaking, we launched our new design on July 23, 2013. Now every office, every academic department and every other page on the W&M site adjusts its layout to best accommodate your device (desktop, laptop, tablet or mobile).
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:
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).
So what was involved in this redesign? Up first was evaluating which parts of any given page are the most important. As you might expect, it’s 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 the main content.
The major changes
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 (or view the site on a tablet or similar device) we adjust the global navigation to become three rows rather than one. We shift the right column, which contains “widgets” with photos, Twitter feeds, related links and other supplementary content, down below the main content. As the page width narrows further (or you view the site on your phone) the global navigation and search are collapsed, and the left menu drops below as well (keeping its familiar green background for continuity). Keeping in mind the importance of page navigation, announcements and events, we add convenient links to these elements just above the main content.
Throughout these incremental steps the content is shaped to fit the width of the page, and photos and tables are resized to be as visible as possible. Nothing is removed, only rearranged to best showcase the content. This is a key feature of responsive design.
Those with a careful eye may also notice a few style tweaks made to enhance the user experience. One of the most prominent usability improvements was to ensure that our treatment of text links is consistent throughout the site—if a word is bright green (underlined or not) it is always a link. In addition we removed busy lines from menus, adjusted the color and size of content headings, and increased the font size and line height of the main content. These and other small updates were made to give the site a bit more space to “breathe” and to make things easier to read.
Cheap as free “mobile version” for all, no app needed
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.”
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 directory, W&M Experts and W&M Events).
We often share tips and reminders about keeping your content arranged and looking good (cue Writing & Style Guide plug). But what about updates to the content itself? Whether your site launched last week or last year, one thing is for sure: the content will need updating.
Your website is likely still your greatest communication tool, and one users expect to be accurate and complete. While some updates are straight forward (What’s tuition this year?), others will be about keeping the most compelling information up front and center (I see they did a project in 2010. I wonder if they’re still active?).
Here are a few tips that may help you keep things up to date year round:
Do you need to track pieces of content around your site that consistently expire? Try a simple spreadsheet. Include the page URL, the item to update and when to do it.
Do you live by your calendar? Add repeating tasks to check particular pages. Don’t be shy with task details – it’s easy to forget why you told yourself to check the page.
Block time on your calendar to sweep through your entire site annually (at a minimum). This is a great way to catch pages you may have forgotten about, as well as catch all of the “evergreen” content that has slowly become dated.
How do you stay on top of your site? If you have tips or tricks that work for you, share them in the comments or over on the W&M Cascade Users page.
Last week we welcomed Lisa Crawford, our new senior videographer and multimedia producer. Lisa spent several years at Virginia Commonwealth University as a senior producer and teaching video production as an adjunct professor. She had the privilege of working as a production secretary for the Dreamworks production of Lincoln, directed by Steven Spielberg and as an assistant production coordinator for Herzog & Co. and Scott Free’s television movie, Killing Lincoln. Most recently she did freelance work as the executive producer and owner of her own production company, Blue Owl Productions.
Lisa will be producing mostly creative video projects that are consistent with the university’s communication priorities. She will play a key role in implementing a videography review process that will streamline campus video projects.
We’ve gotten past that first, awkward week and are beginning to load up her calendar with meetings to introduce her to many folks she’ll work and collaborate with on upcoming projects. Her first priority? She’ll be watching boxes of new equipment arrive in her office. You can’t buy a videographer just a computer and paper clips after all.
We are very excited to have Lisa on board and to see this new videography service take shape. Welcome Lisa!
If you’re managing web content for your office, program or department, you probably know about Tribe Responses (our simple form building tool). But, did you know that you can embed a Tribe Responses form in your Cascade site? Embedding your form allows users to submit and view their confirmation screen, all without leaving the comfort of your site.
Note: Only public forms may be embedded — in other words, those that are set for “anyone” to respond to, with no log in or password required.To help protect you from spam, ReCaptcha is used for all embedded forms.
Each holiday season, Creative Services works with President Taylor Reveley to deliver a multimedia greeting to the William & Mary community. Most years, the greeting takes the form of a single, short video. This past winter, we brought a fresh face to the greeting by featuring it in a custom microsite.
We’re pleased to report that yesterday, the Council for the Advancement and Support of Education (CASE) awarded Creative Services a Bronze Award in the Individual Sub-Websites category for our execution of the website. This award extends Creative Services’ CASE Award streak to seven consecutive years, and marks the ninth year out of the last ten that CASE has given Creative Services the nod for one or more awards.
While a greeting from the president is a simple enough idea, the holiday site takes things up a notch by also featuring holiday greetings and memories from alumni, staff, students and from William & Mary’s favorite mythological creature, the Griffin. Additionally, users were encouraged to upload Instagram and Twitter photos of their holiday experiences, and the site featured a feed of all their user-submitted photography.
On a final note, we are particularly proud of this award because the site was our first foray into optimizing for Retina displays. Most websites display fuzzy and pixelated graphics when viewed from an iPhone, but we crafted the holiday site to display sharply regardless of the end user’s device.
If we didn’t reach you in December, we hope you don’t mind a “Happy Holidays” in June!
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:
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