Tags filed under ‘web design’

Marsha Riti

 


Created for the up-and-coming children’s book illustrator, Marsha Riti, the design for this site is a substantial overhaul of the blog site I built for her a few years back. The new “vintage cereal box” look matches her Mid-Century inspired illustration style, with her endearing artwork featured front and center. Keep an eye out for her forthcoming book, The Picky Little Witch, from Pelican Publishing!

Highlights for this project:

  • HTML5 and CSS3 goodness! Much cleaner, lighter code.
  • Custom, lightweight jQuery plugins handle the homepage portfolio viewer as well as the “candy-striped” dual-color post titles
  • Various features of the site are implemented as WordPress custom post types, making it super-easy for Marsha to keep the content fresh.
  • A dash of Typekit-powered font embedding makes the site’s typography consistently cute cross-browser.

Visit the new marshariti.com site.

UT Law Redesign 2010

Screenshot of the UT Law School homepage, redesigned

I’m pleased to announce that another of my long-term projects has launched: the latest redesign of the University of Texas School of Law website. This was the first major refactoring of the information architecture, HTML, and user interface of the site since 2003, and is a significant departure from the visual refresh of 2005. (My other major project was the new UT Law Events Calendar, which launched on the same day — it’s been a busy summer!)

The UT Law site holds anywhere between 3500-6000 pages (depending on how you want to define a “page”) spread amongst dozens of departments and organizations, with very little of the content in a CMS of any kind, and it’s accompanied by a dozen or more in-house custom applications written in three or four different programming languages, so this major change to the code was quite an undertaking. After consulting with our stakeholders, conducting some user testing, and evaluating other top-tier sites, I began the redesign with the intention that we’d need a great foundation to build off of, while retaining enough visual familiarity to the old site to not confuse our users needlessly.

Highlights for this project:

  • Brand new HTML5-based templates using clean, semantic markup with hooks for a flexible (but optional) grid-based CSS layout system
  • Completely redeveloped visual design, color scheme, and branding, with improved typography and layout
  • Newly designed universal UT Law header and footer, improving usability while taking up less vertical real estate
  • Standardized look-and-feel for internal law school departments and organizations, along with cleaner information architecture (many URLs have been shortened considerably)
  • Easier navigation through simplified, consolidated landing pages
  • Google Custom Search Engine integration available across the entire site, letting users search without leaving the UT Law site
  • Google Analytics’ new asynchronous code now site-wide, including subdomains, with dual tracking to forward stats on to the main campus Development office
  • Lighter HTML, smarter handling of cacheable resources, and browser throughput performance tricks give end users much snappier page load times (who loves image spriting? I do!)
  • Universal use of UTF-8 for better foreign language and other specialty character encoding support

Much work remains, however: the content across the site is currently being reevaluated as part of this project, and we will be working hand-in-hand with each department to ensure that the offerings are up-to-date, relevant, better organized, and more media-rich (where appropriate). Also, the homepage is a temporary placeholder while we work with our communications office to develop new material and focus this Fall semester.

Many thanks go out to my supervisor Mark Gunn, teammates Austin Kleon, John Croslin, Brian Borowicz, and awesome student worker Laura Davila for helping with the porting and making sure that everything looked as snazzy as possible for the launch date!

Hubbard/Birchler 2010

Screenshot of Hubbard/Birchler website

I once again had the honor and pleasure of working with my favorite contemporary artists, Teresa Hubbard and Alexander Birchler, this time to redesign and refresh the duo’s web presence. I created the first version of their site back in 2004 and it was time for an overhaul. This design is much cleaner and brighter, highlights their excellent body of work, and creates a framework that can be built upon as new pieces and publications are added. Some portions of the site are still a work in progress, so check back soon for further additions.

The Comics Curmudgeon, Redesigned!

Screenshot of the new Comics Curmudgeon site design

Always an honor to get to improve upon a personal favorite!

Some of my earliest childhood memories are of reading the newspaper comics: youthful confusion about the differences between Garfield and Heathcliff, Marmaduke and Howard Huge, the Lockhorns and the Family Circus, wondering who was reading those giant-yet-boring Prince Valiant strips on Sunday, pondering the bizarre evolution of Robotman. I’ve read the comics religiously ever since, missing only a handful of days over the past 20+ years. But there were so many strips I simply ignored, convinced they were stodgy hangers-on from decades long past, or else that they were unfunny legacy soap operas not worth the time to investigate.

Thankfully in 2004 Joshua Fruhlinger started reading the comics so we wouldn’t have to. His curmudgeonly commentary had an opposite effect, though: hundreds of thousands of people suddenly began to appreciate Mary Worth for all of her meddlesome glory, found themselves able to recite the sordid back stories of the girls of Apartment 3G, and learned new ways to determine whether or not you might in fact be a Plugger.

The Comics Curmudgeon is one of the few sites that I visit multiple times a day right in the browser (despite its handy RSS feeds), so it was a great honor to be given the chance to do a facelift of the site. Since I look at it so often, I figured I’d better do a good job. Not to mention that if I broke what was already a cherished site, I’d surely be mauled by his sizable community of rabid comics fans!

Some of the highlights of the redesign:

  • An awesome new logo up there in the header depicting Josh as drawn by Ces Marciuliano, writer of Sally Forth and creator of Medium Large
  • Brand new, handcrafted WordPress theme, designed to retain some of the lo-fi, Verdana-heavy charm of the old site while cleaning up the layout and typography considerably
  • A new jQuery-based @reply system for the comments section, modeled after the ad hoc format that his community evolved and had been manually typing in — his posts often reach 500+ comments, so this helps keep track of who’s talking to whom a bit
  • A new Advanced Archives page that lets users build the archive they’d like to see (ex: “Show me this month’s posts about Mary Worth that contain the word “meddle”, in ascending order, five per page”), also allowing for easy bookmarking of their search query
  • Cleaner, lighter code and speed optimizations on the server side to help offset the time it takes to pull down the large daily comics
  • A flexible “jello” layout that expands and contracts depending on the size of your browser window, to add a bit of whitespace and breathing room without breaking things for folks on smaller screens
  • iPhone and “other” mobile versions of the site (which double as low-bandwidth alternatives for those on dialup who’d like a speed boost) with AJAX comment loading

Hopefully it’s all a change for the better (I think it is!), and I look forward to hearing the feedback!

UT Law on the Go: New iPhone Web App

Screenshots of the UT Law iPhone app

Trying to keep up with the proverbial Joneses, today we launched an iPhone / iPod Touch mobile web app for the University of Texas School of Law. If you want to check it out on your iPhone right away, fire up the following link in Safari: http://www.utexas.edu/law/m/

I built it from the ground up with PHP, JavaScript, and a bit of elbow grease, pulling data from a handful of existing sources both on-campus and off. It makes use of the iUI JavaScript framework, which is a great resource for getting up and running quickly (but which also has some drawbacks — I’ll likely switch to pure jQuery for the next major version, but I’m also keeping an eye on the jQTouch project). A quick rundown of the features of the web app:

  • Directory Search — if you’re affiliated with UT Law School you can search our internal phone and email directory by name or department, using the native iPhone apps to place calls and send emails directly,
  • Event listings and Notices pulled from our existing calendar and Law Mail announcement systems,
  • RSS feed view of our press releases,
  • Recent Twitter posts from our Communications office (this will make more sense when/if we have more than one Twitter account posting official news, and can combine them into one stream here),
  • Maps: detailed building maps, Google maps that use the iPhone location services to guide you to our building, KML-based maps of public parking, nearby hotels, and restaurants,
  • and a psuedo-iPhone style photo gallery that’s pulled from our existing mini-gallery on the regular website, adding the ability to flick through the images (did you know that Mobile Safari adds nifty JavaScript events for multi-touch gesture support? I didn’t until this project…)

There are a lot of things already in the works for the next iteration. The number one goal is to support other popular devices, to live up to the ideal of “one web, any browser”. As a developer who has wrestled against the wide range of inconsistent desktop browsers and all of their HTML and CSS inconsistencies over the years, though, it was really, really, nice to work with a single browser that already supports HTML5 and CSS3 presentation out of the box. Now I’m spoiled.

christycarroll.com

chrsitycarroll.com

The first of my summer freelance projects is now live: the portfolio site for fabulous packaging designer, Christy Carroll. Love her work! Christy crafted the visual design for the site, and I implemented it in WordPress with a completely hand-tailored jQuery portfolio browser for the homepage. More to come soon…

adamnorwood.com

adamnorwood.com 2009

Freshened up my personal blog and portfolio site for 2009. While similar to the transitional look and content that you’ve seen for the past couple of years, this theme has been hand re-written from scratch and features many advancements over the old style. The entire site is better integrated through WordPress than ever before using features newly available in WP 2.7.1 (gravatars, per-post styles, threaded comments, etc), a handful of customized plugins, subtle jQuery enhancements, and Subversion to tie it all together on the backend. I’ve also moved to a new domain after about ten years of being at asnorwood.com. All of the old links should still point to the right place (or get you pretty close), but let me know if you find something missing.

The bulk of the improvements are behind-the-scenes, but I can at least say that the following changes make my life easier and me happier:

  • Uploading new portfolio work is much more straightforward.
    No more need for a separate gallery plugin!
  • The category and link organization is more sensible! Tags, too!
  • Better error-handling — hopefully you won’t end up 404 Not Found, but you at
    least have a sporting chance of getting unstuck now!
  • The search engine optimization (I hate that term) seems to be working
    already, too. Thanks, Google!
  • The search form pulls up better, more accurate results!

All of this tech stuff is secondary, of course, and I’m still trying to decide how best to balance the blog entries between my different interests. Maybe I’ll eventually split off into two or more distinct sites to keep things from rambling together. I’d also like to figure out a better way to incorporate the side-channel links (currently I’m using del.icio.us) and scrap-collecting elements (I love Tumblr for gathering quotes and other detritus, but not sure how best to tie that content in with my main site). Being nearly the fifteenth anniversary of my first website, you’d think I’d have this all figured out by now!

What do you think? What would you change?

Mixed Bag

mixedbag.marshariti.com

Another fairly straightforward WordPress theme built from the ground up. This time it’s for Marsha Riti’s secondary blog, MIXED BAG, which collects her project instructions, recipes, and Craigslist finds from around Austin (are you obsessed with midcentury modern furniture and weird old junk, too?).

Hold on to your hats

adamnorwood.com launched

Hey kids! I’ve relaunched my site, moving it to its new official home at adamnorwood.com (goodbye, asnorwood.com). It’s got a new, hopefully better design, a stronger WordPress backend (the bells and whistles have all been polished), and I’ve got a slew of new content coming down the pike (I know, the last real post on here was from…last July? Uh-oh). I’m launching it into the yawning chasm that is SXSW2009, so maybe everyone will be too distracted to notice any temporary glitches or missing bits. For you faithful who are reading this in a feed reader, I thank you and ask your forgiveness for the horribly jumbled updated feed that probably greeted you this morning!

Things to look forward to:

  • More posts on art from someone who’s trying to figure it all out, with more of a focus on the local (Austin, Texas) art scene
  • Posts on design and technology, including some lessons learned while building up my WordPress chops
  • More signal, less noise

As always, I’d love to hear any criticisms, complaints, questions, comments, or commiserations. Leave me your good words!

Paging Dr. Sbaitso

Accessible Rich Media
Some of the best panels and meetups I attended at this year’s SXSW (the famous technology/music/film/designer eyewear festival) were on accessibility and adaptive technology, a good forum to hear what’s stirring in those fields. In particular, it seems like there’s a growing open source movement to provide tools for users with special needs and to help web designers produce accessible content.

Closed source software like JAWS will face a real challenge as open screen readers like the NVDA project become more mature and build on the popularity of other software like Firefox — while NVDA is certainly lacking the features and polish found in the more widely-used commercial products, the price (free vs. $1000) and ease-of-installation certainly make it compelling.

I also learned about the following accessibility-checking programs and Firefox extensions, immediately adding them to my developer’s toolbox:

Content Colour Analyser

  • Colour Contrast Analyser, a great tool available for Windows and OS X that gives you two color pickers: one to choose a foreground color (probably your main text color) and a second to pick a color from the background to compare it with. It then gives you detailed contrast ratio information for the two colors along with clear indicators as to whether your site or application complies with the suggested contrast needed for visually impaired users and for colorblindness. It’s one of those tools that simply works as advertised.
  • Fangs, a screen reader emulator built as a Firefox extension. When run on a page, Fangs displays a mashed-together, color-highlighted, text-only version of your content as a screen reader would read it aloud. If you’re a sighted web developer, this is a handy tool for getting a quick impression of how your page will hold up under JAWS or similar. (Bonus points for having an attractive, accessible website)
  • The Firefox Accessibility Extension from the Illinois Center for Information Technology Accessibility. This tool helps you generate reports on various accessibility issues, can display information about your page’s semantics (headings, list items, links), lets you easily switch into various high contrast modes, etc. It’s a great companion to the awesome Web Developer extension.
  • You should also check out Color Oracle, the cross-platform color blindness simulator. It’s pretty sobering if you have regular vision like I do, and it will make you appreciate that yes, two different hues can be very, very similar-looking to a good portion of your audience, and yes that’s a big problem.

(It goes without saying that these are useful but imperfect tools, never capable of giving you the full insight that would come from actual user testing. The only real way to know what real frustrations an impaired user will have with your new web app or site? Get one to come in and give it a spin!)

The other good news coming out of the past couple of weeks is the support the major browser makers are giving to the WAI-ARIA suite of standards for making web applications and forms and controls more semantic and accessible. Opera 9.5, Firefox 3, and now even IE8 (imperfectly?) are slated to support ARIA (whither Safari?). The Secrets of JavaScript Libraries panel discussion at SXSW also brought news that jQuery will soon join the Dojo toolkit in supporting ARIA-enabled widgets (I think that’s where I heard the news, feel free to correct me if I’m wrong).

These are the kinds of open source projects that I really dig: good for users, good for shaking up the established software licensing model, and good for helping solidify support for web standards. Know of any other good tools?