Web Redesign on a Dime

Web Redesign on a Dime

Tools, tips, and tricks to revamp or upgrade an institutional website
 

AT A TIME WHEN HIGHER ED institutions are facing deep budget cuts, delayed projects, hiring freezes, or even worse, it has never been as important to have a website up to par as it is now. So what can you do if your latest web redesign was done a few years ago and there’s no sign that the long-awaited budget to launch a major overhaul project will become a reality in the upcoming budget?

Don’t let such a strategic marketing and communication channel fall even further behind. Instead, get creative and try to tackle a complete DIY redesign. Or just begin with small, incremental website improvements.

Institutional websites should not be designed as an exercise of style, self-expression, or political orientation.

“If you don’t have the time or resources for a full-scale redesign, you can do incremental redesign, a little here and a little there,” explains Stewart Foss, founder of eduStyle, the web design gallery dedicated to higher education websites, and co-author of The eduStyle Guide to Usable Higher Ed Homepage Design, an e-book. In fact, it’s possible to fix most problems without the need of a redesign committee or a substantial budget. If these incremental redesigns are subtle, most people won’t even really know what has changed, just that the website is better.

Not sure where to start with a redesign-on-a-dime project? Compiled with the help and the suggestions of several web professionals working in universities and colleges across the country, the following list of inexpensive—and often free—resources can help an institution’s web team achieve great results on (or without) a budget during three key steps of a website redesign or realignment.

Most web design experts agree on the importance of the research and discovery phase for any redesign project. To know where you want to go, it’s crucial to know where you are and what your competitive environment looks like. Whether in search of the latest trends, tips from people in the trenches, or just inspiration, make sure to look at these websites.

— eduStyle: This constantly updated web design gallery was launched in January 2007. It is powered by more than 2,000 higher education web design professionals. Users submit, review, and comment on websites from institutions of higher education. Access and membership to eduStyle are free.

— Edu Checkup: Launched in October 2008 by Nick DeNardis, associate director of Web Communications at Wayne State University (Mich.), this video blog is the perfect companion to the eduStyle gallery. In each episode, DeNardis reviews and evaluates a website, pointing out worst and best practices along with some practical tips.

— Future Endeavor: Authored by Tony Dunn, web content management system coordinator at California State University, Chico, this blog offers observations and analyses of web design principles implemented on university websites. Started in 2006, it was developed as a personal space to gather information, prepare the case of the redesign project, and build a strong foundation for a website redesign currently implemented in-house at Chico.

User-centered design is (or should be) at the center of any redesign project. Institutional websites are meant to be useful and used by their target audiences. They should not be designed as an exercise of style, self-expression, or political orientation. While traditional usability studies are known to be very costly, the following tools are helpful in basing design decisions on facts and not mere assumptions.

— Google Analytics: The analytics application offered by Google is one of the best tools out there. Widely used by institutions across the country, GA requires a two-step installation process: (1) copy GA code snippet, and (2) paste GA code in the website’s footer. It offers user-friendly reports on web usage with powerful filters and overlay click tracking, and it is 100 percent free to use.

— Crazy Egg: Need to get more visual insights on how a website is used? Then this easy-to-use web service can help you reach your goal. On its heat maps, Crazy Egg shows the hot links of a webpage and will even segment those clicks by different criteria (e.g., referrers, search terms, operating systems) with its new Confetti feature. Offered as a subscription in several tiers depending on the amount of tracked usage, it starts at $9 per month for up to 10,000 visits.

— SurveyMonkey and LimeService: Surveying current web users about their needs and expectations can help you work in the right direction. Both SurveyMonkey and LimeService allow for free online surveys, up to a certain number of completed surveys. SurveyMonkey will then bill by the month, starting at $19.95, while LimeService will charge by extra bandwidth usage (starting at $8 for 50MB).

Once the groundwork has been done, it’s time to get started with information architecture, design, content, and web development. These tools can help make a big difference in the time required to complete these last steps.

WordPress can help get a website launched and maintained in no time and on a dime.

— Gliffy: With a full-scale redesign, it’s crucial to have a clear picture of the future website structure. That’s when Gliffy online diagram software comes in handy. This web application, offered free in its basic form, can help in producing professional site maps for any project.

— iPlotz: Wireframes should be the first step of any web design work. Only focused on the placement of content, they help make decisions on structure but not form. This time-consuming process can be sped up by iPlotz. This free web application allows users to create clickable, navigable mockups and wireframes for prototyping websites.

— Adobe’s Kuler: For those with limited knowledge in color theory, this free web application (which requires only a free Adobe ID) will help make color choices for designs, with color palettes created from a submitted color or a photo.

— Frameworks: Whether you’re planning to code your CSS layout, add some AJAX magic, or even add more evolved features to your project, consider the many frameworks and code libraries available for free online. These can help you jump-start your web development project and reduce the time necessary to complete it at no extra cost.

— Firebug: The favorite free add-on of many university web developers, Firebug is composed of a series of tools available right from the Firefox browser window. It lets you edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. The small application is also very useful for implementing changes on the fly during design review presentations or for testing new ideas in a snap.

— WordPress: Well-known as one of the best blogging platforms on the market, this free web application can also act as a light yet powerful content management system for small decentralized websites. Perfect for powering news websites, WordPress can help get a website launched and maintained in no time and on a dime.

— Browsershots: As you progress in your web development project, you’ll have to make sure the resulting website looks good in different browsers. While browser-compatibility isn’t the big issue it used to be a few years ago, there are still some differences. Browsershots is a free open-source web application that will take screenshots of a web page using different browsers on different operating systems. Just submit a web address and select the options you’d like to test.

Thanks to Stewart Foss from eduStyle, Matt Herzberger from Florida International University, Lisa Du Bois Low from Texas Tech University, Paul Branham from Central Wyoming College, Patrick DiMichele from mStoner, and Michael Lofstead from Lesley University (Mass.) for suggesting some of the above-mentioned tools.

Karine Joly is the web editor behind www.collegewebeditor.com, a blog about higher ed web marketing, public relations, and technologies. She is also a web editor for an East Coast liberal arts college and a consultant on web projects for other institutions.


Advertisement