Sessions at edUi 2011 Conference on Friday 14th October

CSS3 is great…except for all of the vendor prefixes, and having to write the same styles over and over again. Enter Sass, the CSS meta-language that can solve these CSS3 woes. Sass makes it easy to add complex CSS3 styles. Style sheets become more flexible than ever with variables and mix-ins. Whip organization and specificity into shape with nesting and parent selectors. Dominate colors with Sass’s built in functions. Best of all, there’s no crazy syntax to learn—it’s still the CSS you know and love.

In 2010 NCSU Libraries released WolfWalk, a location-aware, mobile tour of campus history, as a native iPhone app and a web app. It was designed specifically with smartphones in mind. In June 2011 they released a new version with expanded content, but designed to be a joy to use on the iPad. In this presentation learn what led them to a different design for the tablet, how the interface was modified to suit the larger screen of the iPad, and things to consider when thinking about interface design for tablets.

Using Google Fusion Tables it’s possible to collaborate with others to create engaging maps, charts, and timelines, no programming required. This session will provide a step-by-step overview of the process and possibilities.

Personas can be powerful mnemonics for large amounts of data that would otherwise be buried in spreadsheets and reports. Being able to share and use personas effectively in the workplace can increase productivity and reduce development time. This session will provide tips on making personas work and provide guidance for making them part of a development process.

2010 was the year of web typography—the year new technologies came online that will forever change the way information appears online. As the dust settles from the advances of web fonts and CSS3, a new style of web typography is emerging, one that reflects print origins, but is also experimenting with the unique strengths of online communication. Learn about recent advances in technology through case studies at the boundaries of online typography. See how to use the new web typography to set your work apart from the rest of the herd.

Building a mobile app isn’t easy. Regardless of chosen platform or technology creating a memorable mobile experience has some pretty intense challenges throughout. However if you can get it right it can have some incredible rewards. After spending ten years building mobile apps for some of the biggest and smallest companies in the world, author and mobile designer Brian Fling shares his six rules for building amazing apps that will either you get you started or improve upon your next release.

Want more mobile? Then check out Brian’s half-day workshop “Designing Mobile Experiences“.

Author and designer Todd Zaki Warfel will show how prototyping with HTML5, CSS3 and jQuery is easier than you think. Whether you’re an HTML novice or presentation-layer pro, you’ll walk away with a number of practical tips and techniques for prototyping with HTML5, CSS3 and jQuery. You’ll learn how to:

Structure your prototype designs faster with HTML5
Take advantage of new input types to make mobile-ready forms instantly
Use CSS3 to sexy buttons without the need for background images or sliding doors
Use CSS3 selectors
Make effective use of jQuery transitions with only a few lines of code
You’ll walk away with a number of techniques that will help you craft flexible, bulletproof, effective and adaptable interfaces that make up an elegant user experience.

Learn how to conduct field research to inform the requirements, information design, and interaction design of a product.

When “everyone is a designer,” what does it mean to be a web/UX designer/developer? The rules of design engagement are changing. You may no longer be in control of the user’s visual experience. Succeeding in today’s web is more challenging than it has been in years. Yet challenges are opportunities, and today is the best time in over a decade to create websites and applications. Learn the skills and opportunities facing every designer today, from mobile and small screen strategy (and the difference between them) to the design principles of HTML5. Then put it all together with a holistic web design approach that puts content—and the user—first.

Follow the design and development of a highly interactive mobile website for McKinney Independent School District. Topics covered will include data-oriented design tactics and cutting-edge mobile web development technologies. Using the WillowTree-developed University of Virginia iPhone app as an example, learn how to leverage hybrid native app architecture to distribute web apps across the iOS, Android, and Blackberry platforms. Saddle up!

Employing practices from Kelly Goto’s “Web ReDesign 2.0: Workflow that Works,” Indi Young’s “Mental Models: Aligning Design Strategy with Human Behavior,” and Kristina Halvorson’s “Content Strategy for the Web,” UB School of Medicine and Biomedical Education is redeveloping its websites with information architectures and content strategies that align with the mental model-identified tasks of its audiences. This presentation will trace the redevelopment of a web page through the entire process, from content audit to production. Topics discussed will include techniques of stakeholder interviews, best practice review, a business case, mental models, wire-framing, usability, information architecture, and content strategy.

As WordPress becomes increasingly popular as a CMS for websites of all sizes, there is an increased need for custom themes. These can run the gamut from simple style edits to changing the architecture and usability of a site. Thanks to WordPress’s excellent documentation, nearly any webmaster can learn how to create custom themes. Learn the basics of theme creation, as well as a few tricks and resources. HTML/CSS knowledge is required, PHP knowledge is helpful.

There has been a surge in the number of tools that are available to conduct unmoderated (a.k.a. “automated” or “asynchronous”) remote usability testing. This surge is changing the user experience industry, forcing us to take a closer look at the benefits and drawbacks of unmoderated testing and whether we should incorporate it into our usability toolbox. In this session we will cover what can be learned from unmoderated testing, how it’s conducted, when it should be conducted, how actionable the data is, benefits & drawbacks, and an overview of some unmoderated testing tools that are currently available.

Quick Response (QR) codes create a bridge between real-world material and online resources. Move beyond the marketing potential of QR codes and see its impact on student and faculty engagement. Collect real time data sets, distribute campus-wide (or site-specific) information and deploy timely updates all from the scan of a code. The potential use of QR codes within a classroom environment has grown exponentially with the growth of the smart phone market. See how to engage and prompt creative learning environments through this use of mobile web technology.

jQuery Mobile took the “write less, do more” philosophy of the jQuery initiative and applied it to smartphones and tablets. This touch-optimized framework was developed to provide a rich experience for smartphone users while still retaining basic functionality for standard cellphones. Built on the jQTouch plugin, it was first released in October of 2010 and is currently in beta. Learn how the Illinois Institute of Technology released its first library mobile website using jQuery Mobile, and about the ups and downs of using early release code.

In the digital age, silos and organizational bureaucracy manifest themselves in organizations’ online presences. Learn to bridge these silos and overcome a bureaucratic inside-out mindset by visualizing the customer experience through a customer experience journey map that captures both actual and emotional aspects of the customer experience. Then, map in hand, write great outside-in web-based customer experiences.

The competition among universities to recruit students is heating up. Those universities that fail to deliver more targeted messaging will suffer. Today’s students want website content and services that are compelling and personally relevant. This product-neutral presentation will outline how personalization functionality within web content management software can enable a customized approach to online student recruitment and engagement. The presentation will include ten tips developed over the course of 80 university CMS rollouts.

CSS3 isn’t supported by every browser yet, but it can be capitalized on right now. With some careful planning and some different tools and tips, start breathing some new life into websites today.

The University of Mary Washington’s web redesign effort is a daring institutional experiment in using real-time activities of faculty and students as primary brand drivers—expanding beyond re-framing activities through press releases, canned video, and “brochureware” narrative, to connect institutional marketing messages with academic life. Building on the success of the large UMW Blogs WordPress community, students, faculty, and staff have familiar tools to deploy public Web content. UMW’s pioneering implementation of WordPress is a truly scalable, multi-network (not just multi-site) CMS. Starting with the community first, this remarkably open environment promises to transform UMW’s life on the web.

Not just for blogging anymore, WordPress is an effective platform for powering websites with a variety of types of content and structured data. Learn about new WordPress 3 features, the child theme architecture, custom plugin development, and mobile device optimization. Leave with plugin recommendations, code samples, and techniques for extending current WordPress sites and for developing new sites.

Instinct and gut feelings are nice, but numbers are better. Analysis and measurement are the “so what?” of content strategy, demonstrating content value. These elements allow quantitative evaluation of quality. Web analytics is an essential part of any measurement plan, but look past dashboard metrics. Meaningful insights require context to be useful. Learn how to develop an analytics strategy with methods for assessing content quality. Understand how to define meaningful metrics that support a web content measurement plan. Don’t just rely on gut feelings—create and maintain web content that proves to be effective.

This session will present an overview of how the UVA Library communications department’s web team created a map application that did not stop at the door to the building. Learn how Google Maps was used to display floor plans of the library integrated with indoor Street View to show panoramas of key areas, and how various web services were used to mash up data with the map, including using Fusion Tables with call number ranges to create a book finder.

Though the idea of “competition” on the web doesn’t come naturally to higher education institutions, thinking competitively about services and interfaces can yield insights into user behavior and uncover unexpected design opportunities. By introducing competitive usability testing to the assessment process informing a new search and discovery strategy, the University of Virginia Library established paths forward for complex design issues and helped reveal user experience pitfalls along the way. Learn about competitive usability testing, including ways to use data to drive UI development decisions and ensure administrative support for large-scale changes.

This presentation will teach how to build an effective web site and user experience with Drupal, explaining the development philosophies behind the Drupal framework. Anson and David will use recently completed Drupal sites to demonstrate powerful site building techniques and developmental approaches. The primary example used for this presentation will be a recent departmental intranet web application, demonstrating the idea of interoperable content among many contributors.

What makes a great design better than a good design? How do award-winning sites achieve the polish that sets them apart? This session will review a variety of visual design practices that elevate sites beyond the ordinary. You will leave armed with tools to delight users with a sophisticated style and better user experience on every site that you build.