Mockingbird

“Mockingbird makes wireframing frictionless, freeing you to try new ideas and iterate rapidly before settling on a design that works.” This tool allows you to drag and drop your text boxes, search bars and buttons, making the mockup process quick and easy. It allows you to link pages together and send out links of your work to colleagues and clients.

52 Weeks of UX

52 Weeks of UX is a blog created by two specialists in interface design, user experience, and social web applications. Their insightful weekly posts are a must read for any designer looking to better their user experience.

10 Tips for Better Print Style Sheets

Print style sheets don’t need to be that complicated. Follow these tips for making a print style sheet and you’ll save your users frustration and ink!

Top 5 Ways to Browser-Test your Website

One of the most frustrating parts of web design is finalizing your design, only to realize it renders dramatically differently in another browser. Try out one of these browser testers long before you release your site. While it’s OK for the design to vary slightly, you want to make sure your content remains accessible.

If you’ve run across a great article that you think would be helpful to the rest of us, we’d love to hear from you! Post a comment, send an e-mail to our office e-mail account or hit us up on Twitter.

I had no idea how useful microformats could be and definitely did not know how to implement them. The main thing I look from Emily Lewis’ presentation was how easy and beneficial adding microformats to your sites can be.

Why are microformats useful and why should you consider using them?

They are easy (so why not use them). Microformats are based in html and xhtml, which means you don’t need to learn a new language.

They add semantics or meaning to your site. Microformats enable machines to understand the type of content on your site.

“Ultimately, The Semantic Web is simply an extension of our current web, but with better information and meaning (semantics) that will allow computers/machines and humans to work together more effectively. And while microformats aren’t one of The Semantic Web’s formal specifications, they do support that goal of machine-human cooperation” - Emily Lewis

With microformats you can get more meaningful search results. Using Google Rich Snippets Google is making it easier for consumers to get relevant information. Right now Google is taking microformats in webpages to pull information from hCards, hCalendars and hReviews and including it on search results pages. For example, if you search for a restaurant in Google and yelp.com has reviews for it, the review will show up right on the search results page. The reason this works is because of a little bit of code that basically tells Google that it is a review.

Microformats encourage web standards and consistent markup.

Who is using microformats?

The University of Florida! The UF Phonebook uses hCard for all of its entries. This makes it easy to add someone to your contacts. (Create your own hCard)

yelp.com uses hReview (Create your own hReview)

New York Times uses hReview in it’s travel section

New Blogger pages that are unmodified use hAtom classes

Facebook uses hCalendar to mark-up events (Create your own hCalendar)

Here is an example of a site that uses many microformats including hResume.

For more information I recommend checking out microformats.org. And also Lewis’s book and presentation.

Before:

<h3 id="contact">Contact Information</h3>
<p>Web Administration<br />
124 Yon Hall (east side of Ben Hill Griffin Stadium)<br />
Gainesville, FL 32611<br />
Phone: (352) 273-1141<br />
E-mail: <a href="mailto:webmaster@ufl.edu">webmaster@ufl.edu</a><br />
Twitter: <a href="http://www.twitter.com/ufwebadmin">@ufwebadmin</a></p>

After:

<h3 id="contact">Contact Information</h3>
<div class="vcard">
<p><span class="org fn">Web Administration</span><br />
<span class="adr">
<span class="street-address">124 Yon Hall (east side of Ben Hill Griffin Stadium)</span><br />
<span class="locality">Gainesville</span>, <abbr class="region" title="Florida">FL</abbr> <span class="postal-code">32611</span></span><br />
Phone: <span class="tel">(352) 273-1141</span><br />
E-mail: <a href="mailto:webmaster@ufl.edu" class="email">webmaster@ufl.edu</a><br />
Twitter: <a href="http://www.twitter.com/ufwebadmin" rel="me">@ufwebadmin</a></p>
</div>

We know there are plenty of colleges doing advanced and really interesting work. Whether you have a staff of developers, graphic designers, and HTML/CSS experts or you are a one-person web shop, there is something the web community could learn from you! And come on, who doesn’t want to show off their hard work?

For the next few months, my fellow student Web manager Morgan and I will be seeking out and sitting down to chat with as many college and organization’s web teams as we possibly can. We will then feature them on this very blog, to fill you in on all the exciting information we have learned.

Let us know what you’re working on, and if you’d like to talk with us soon you can comment below or e-mail webmaster@ufl.edu.

Due to recent changes in Facebook’s Privacy Policy, it’s clear that this isn’t the case. In fact, if you don’t take a proactive role in educating yourself of these changes, you may unknowingly provide access to your photos, notes and thoughts to the world.

Fortunately, there are wonderful websites dedicated to educating on the latest updates to Facebook, including instructions on how to fine tune your Facebook privacy settings.

It’s important to keep up with the latest updates to the various social media sites to ensure that your privacy is being kept as private as you intend, but as I learned from the seminar, when you post something to any public site, no matter how private you think it might be, there are no guarantees it’ll stay that way.

Additional Resources:

• The 3 Facebook settings every user should check now - ReadWriteWeb.com

10 Amazing Grid Systems

Some of you with a print background might be familiar with grid-based design and these CSS-based grid layouts are an attempt to bring those two worlds together. Grid layouts were created so designers could quickly move from design to standards-based implementation without having to custom code the layout. WebHostingSearch.com put together a list of 10 currently used systems with a brief description and list of features.

Web Development Skills That Will Keep You Working

Update: The site is currently down but Google has it cached.

Although this article was written back in 2008, we ran across it very recently and it still has some practical information. Do we think that you have to master all of these skills to “keep working”? Not necessarily, but nonetheless this article provides links to some useful information, including programming frameworks, Wordpress template creation, and more.

Optimizing Wordpress for Search Engines

One of the reasons we love Wordpress is because it does a good job building posts that are search engine friendly. That said, there are always things you can do to improve your pages. This SixRevisions.com post provides tips on how to set up Wordpress so your pages are SEO optimized.

Installing Wordpress as a Subversion Checkout

Here at UF Web Administration, we use Subversion, a version control system that takes some of the worry out of updating our various web pages and other applications. The great thing about Subversion is that it tracks changes we make. If our changes create an issue, we can revert to a previous version held in Subversion.

This post teaches about how to implement Subversion with Wordpress installations. This allows us to update our Wordpress installations directly from the official Wordpress repository.

If you’ve run across a great article that you think would be helpful to the rest of us, we’d love to hear from you! Post a comment, send an e-mail to our office e-mail account or hit us up on Twitter.

A description from the official E4H event page:

The Workshop Summit Series lets you build your skill set without having to leave your computer. Each Summit is a virtual conference—all you need is a computer and broadband internet connection to attend.

The Workshop Summit Series consists of three hour sessions spread over two days.  Attendees can chat with each other and ask questions of the presenters throughout the day.

This workshop features some powerhouse presenters, including Molly Holzschlag, Aarron Walter, Emily Lewis and, of course, the talented and very tall Christopher Schmitt.

Topics taught in 3 hour blocks are: CSS3, HTML5, Findability and Microformats. Please note the start and end times of these sessions as they do not align with standard office hours.

RSVP Links:

• HTML5 Workshop: Thu 14-Jan 10:00 am - 1:00 pm at 2215 Turlington
• CSS3 Workshop: Thu 14-Jan 3:00 pm - 6:00 pm 2215 Turlington
• Microformats Workshop: Fri 15-Jan 10:00 am - 1:00 pm 2215 Turlington
• Findability Workshop: Fri 15-Jan 3:00 pm - 6:00 pm 2215 Turlington

Using Canonical URLs

We understand that it’s a bit self-serving to have one of our own pages on this list, but it’s too good to ignore. Have you wondered why your listing appears twice on Google? What about if you should have a WWW and non-WWW domain? The answers are here!

Complete Beginners Guide To Interaction Design

Web sites are no longer merely an online brochure but something that people utilize and interact with. Why not learn the basics of how to develop the optimal user experience? This guide will show you how!

247 web usability guidelines

The folks across the pond at UserFocus have developed a 247 entry guide to evaluate the usability of their web projects. In addition to the list, they included a helpful excel spreadsheet which automatically creates a final project score based on how well each element fares.

Firebug

If you work on Web sites, this add-on is a must! Firebug allows the developer to edit HTML and CSS in real time right from the browser. This is a fantastic way to quickly troubleshoot an issue without even having to open an HTML or CSS editor.

Sketchboards: Discover Better + Faster UX Solutions

Although this article isn’t new, it’s something Joe ran across during his sojourn in user experience design. The sketchboard “is a low-fi technique that makes it possible for designers to explore and evaluate a range of interaction concepts while involving both business and technology partner.”

If you’ve run across a great article that you think would be helpful to the rest of us, we’d love to hear from you! Post a comment, send an e-mail to our office e-mail account or hit us up on Twitter.

http://www.webadmin.ufl.edu/resources/tutorials/canonical_urls/

In our research, we’ve noticed lots of UF Web sites responding on multiple URLs. The tutorial explains the benefits of sticking with one URL and how to configure your server in the cleanest possible way.

If you have any questions, please post them below.

Screenr

Ever wanted to show someone (or multiple people) how to use a website or piece of software but didn’t have time to visit them? Screenr is an easy way to create 5 minute recordings of your computer screen and voice. It works by using your web browser and optional microphone without having to install additional software.

Chalkmark

Chalkmark is an online prototype testing tool created by Optimal Workshop, the same folks that brought you Optimal Sort, the online card sort. This tool allows you to test the response time and efficacy of design prototypes, saving you time, money and (possibly) sanity.

10 Tools to Improve Your Site’s Usability on a Low Budget

Although this article isn’t necessarily new, it’s certainly timely, as budgets have continued to shrink and offices are expected to do more with less. Early usability testing prevents wasted efforts later and this collection of inexpensive tools should help.

Color Blender

Having trouble coming up with a web site color scheme? Plug in two colors and let Color Blender create transitions between the two.

If you’ve run across a great article that you think would be helpful to the rest of us, don’t be shy! Post a comment or send an email to our office e-mail account.

Over the summer, the On-line and Electronic Subcommitee of the Strategic Communication Committee considered official Facebook use. Out of that review, Web Administration worked with UF’s General Counsel to craft a policy that accommodates the new opportunities available with the need to maintain a professional presentation and message.

University of Florida Facebook Page Policy

Posts and other content specifically added by administrators of the University of Florida Facebook page are official University of Florida content. Opinions expressed by other Facebook users do not necessarily reflect the opinion of the University of Florida. User provided content is not screened or evaluated during the submission process.

All content is bound by the UF Acceptable Use Policy. Further, users are expected to abide by applicable laws, regulations, rules and policies including the University Student Code of Conduct, the University’s Sexual Harassment Policy, and other regulations and policies concerning public communications.

We reserve the right to remove content.

We encourage users to report content that violates Facebook’s Code of Conduct by using the official Facebook procedure.

Join the University of Florida Facebook page and show your spirit as part of The Gator Nation!