Saturday, July 13, 2013

Case Study: Using Foundation 3 for redesigning West Virginia University’s Shared Research Facilities website

West Virginia University's Shared Research Facilities wanted their old website redesigned, to one that worked well on multiple devices and mobile due to specific nature of their users’ interaction with their website and its resources. They also wanted to move the site to WVU's in-house Content Management System for easy content maintenance and updates.
This case study is based on a previous version of Foundation, but my basic process still remains the same as described here (except for using the Sass version now). If you'd rather learn about my project using Foundation 4, the latest and greatest version of Foundation or learn about Sass, visit these links.

To Sass or Not to Sass
WVU Research Redesign
I had tried adaptive CSS frameworks earlier, incorporating media queries with set breakpoints; Jquery plugins etc. on previous websites and wanted to move on to a completely responsive, device-agnostic solution. Thanks to Luke Wroblewski's (of Mobile First, Bagcheck, Polar app and more) suggestion at An Event Apart conference; I took a look at Foundation… made detailed comparisons with other CSS frameworks eg. http://designshack.net/articles/css/framework-fight-zurb-foundation-vs-twitter-bootstrap/
http://responsive.vermilion.com/compare.php and decided it was indeed right for this project!
Foundation had every functionality I needed, and more, all integrated and so easily customizable!
Here is an insight to my process. This was my first of this kind, has yielded quick results and has a great potential to be used again!
Links: http://sharedresearchfacilities.wvu.edu/
More about SRF Project and Web Performance details on my Portfolio
  1. Went through our old website to be redesigned, looked at how the user experience and interface could be enhanced by modifying site architecture, presenting content in a better way, reorganizing, adding interactivity and considered what/how things needed to change on devices. 
  2. Had a quick read through of the Foundation 3 docs, components etc. and compared to other frameworks.
  3. Created first set of lo-fi wireframes after initial meeting with the client (internal) and improvised as I went along.
  4. Based on the plans, wireframes, I selected several CSS and JQuery components I needed. There were a couple of features that I ended up not using later, or added some later as it would happen in most projects and they were so easy to add/remove in CSS and Js, thanks to the nicely commented and organized code. Icon fonts were great; loved the hide-show classes; customizable panels, buttons, orbit, magellan, joyride were very useful for user-friendly, interactive presentation. Navigation was an icing on the cake!
  5. I started out with one of the basic templates from Foundation that was close to my wireframe. I changed quite a bit as I went along, but it provided a quick starting point and good for learning by example. In fact, it was so simple to use, I could learn as I go. Barely any learning curve.
  6. Modified the initial starter template to our needs and it served as a more hi-fi wireframe.
  7. Now for the pleasant surprise!! As many, I generally do a photoshop mock up for approval and feedback from our University web central, and to get design feedback from other designers at the university and then start coding after feedback. Here’s how this changed.
After the basic functional wireframe, I started playing around with it, customizing the colors, styles, CSS to match with WVU branding and presto, I already had a functional mock up for home and basic back page templates!!  I took screenshots of these (several screen sizes), posted for design feedback. Also gave live test area w/URLs so others could see how the design changes in different screen sizes so having to change each mock up based on suggestions was eliminated!
  1. I was able to incorporate several suggestions from other designers on the fly, and there I was, set with the basic design already coded. I started adding several interactive components as I went along according to my plans. Magellan, Joyride. It also provided a good style set for coding buttons, panels completely with CSS3 as I have been doing.
  2. There were a few short road-blocks which I passed through quickly, thanks to foundation github forum and the google foundation forum. I also learnt, researched a few things on my own which didn't take too long.

    Here are some quirks which may be resolved as
  1. There is a work-around to make panels line up in two per row by making them equal size (see home page panels).
  2. Some issue with Joyride went away when I grabbed the most updated code directly from github.
  3. Strange, but Magellan for some reason wasn't working with the minified version of JS!! and a few other minor issues.
  4. I used a non-js responsive table solution, vs the one from foundation.

     Overall, I completed the project in much less time than my previous web-projects, (between other projects in parallel) by combining the mock-up feedback and coding process and designing in the browser.
Single in-house designer-developer.

What about Internet Explorer?

This works well up to IE8 and somewhat clumsily on IE7. It was ok for our requirements of this particular website. I have conditional comments for older browsers to download newer versions.
I was thrilled by how much more improved the Foundation 4 is, especially the Sass version, mobile-first grid better semantic markup and streamlining of its features. Don’t miss it!!

Performance

I have basic performance optimizations in place (minifying CSS, JS, reducing http requests, compressing images etc.) based on web performance tests. There is scope for more as browsers and standards evolve. I have designed and coded the site to be both responsive and responsible as the stats below show.

As of this writing:
Webpage test stats to be about: 489K (1.7-2.6 secs) for Home page!!
Mobitest stats show download time for home to be about 3.3 secs, and a sample back page is about 2.8 secs (233K).
Obviously, it is on the lower end of the responsive site size spectrum, as I have tried to keep the overall size of the site small, whether desktop or mobile. reducing the size and number of images and the overall size of the website by using CSS3 to replace any images that I would've otherwise used for page elements, icons etc.

Optimizing site for mobile is good, but why should we assume that desktop users have all the time and bandwidth in the world and serve them a huge site with something that we think isn't truly essential? Optimizing for desktop, IMHO should be more about the specific functionality aspects than just bigger images/layout. Vice versa holds good too in assuming mobile users don't need something that desktop users have. Trying to use a true mobile first approach by making the site keeping the the most essential content and functionality required for any user. I am looking into the carousel stats and feedback too.

Wireframing for Web, UI, UX design

I see a lot of questions in forums on, “to wireframe or not to wireframe?”; which wireframing tool to use? etc. While things can be different based on the nature of your work, your needs, projects etc., here’s something that worked for me, which I shared recently with my colleagues at West Virginia University. It can work for you, even if you are not in higher-ed.

A wonderful tool called Balsamiq (no, it's not a typo)!
Here is my review of the desktop version of their product called 'balsamiq mockups' that I am using, the other versions have similar functionality. They provide a multi-user, monthly, cloud based option and other plugin options too.
It is free for non-profits and educators, but not for staff in higher-ed, although you may qualify in some ways.

What is Balsamiq?

Balsamiq is a lo-fi (only in looks) but highly functional wireframing tool that lets you create wireframes/lo-fi mock-ups using many readymade UI components, quicker than sketching or in photoshop (yes, even with ready psd UI components), and the best part… make them clickable (ooh!), link them to each other, even without the cloud based model (aah!).

Why Wireframe?

  • Let’s look at a scenario: You present the clients (internal or external), a sitemap/site architecture with all the sections, connectors, flow diagrams and what not; perhaps some sketches; a bunch of photoshop mock-ups; explain everything and I bet you still see some confusion during review, content posting (CMS), testing, about which content goes where, why we did this, etc.
  • I think, when clients see fragmented pieces of a website/UI model, they may have a hard time putting it together after a while, as they aren’t always working on these as we designer-developers are.
  • With linked wireframes, clients can focus on key elements of webpages, functionality, user needs, goals, interface, user-flow w/out getting bogged down with colors, design etc. (you are there to take care of those!). They like the “clickable” aspect, as they can see a quick working model of the key areas/features of the website/app.
  • The responsive workflow: We all love photoshop, but as much as we may hate to admit it, the regular photoshop mock-up workflow isn’t cutting it these days with responsive web design. Many of us are probably already trying different things, without even being aware of it ourselves. eg. http://www.wsol.com/a-more-flexible-workflow/ I will soon post a link to my recent experiment on a modified workflow here.
  • Wireframing, Styletiles, and now even interactive styletiles, CSS frameworks etc. are getting to be a big help to many of us with the new workflow/process. They are helping me and perhaps many others even "design in the browser" (yes, it isn’t really as shocking as it sounds), more so when you have a specific set of style-guides, color, branding and custom styles/rules for your University or Corporation.
  • It is quick and efficient! chop chop and you are done!

What do I like about Balsamiq?

  1. The lo-fi sketched look but hi-fi functionality which is very conducive for quick and good feedback.
  2. Simplicity and ease of use. Just like Photoshop… All the familiar shortcuts and tools you are familiar in photoshop: Zoom-in and out, ctrl-tab to move between docs, group, ungroup, lock, align, distribute centers, smart guides, grid and more, so you don’t have to learn one more new thing, when you have so much new to learn already!
  3. Here are some of the key features that I liked in balsamiq:

    • Great UI library, made even easier by 'quick add'. Start typing browser or button or navigation or icon etc. in 'quick add' input box and it will 'read your mind' and show all options! Just hit enter and customize.
    • Icon library.
    • Datagrid.
    • Mobile UI components.
    • Just start typing 'Lorem' and it will do the rest! Well of course, you can type in more descriptive content when needed.
    • 'Mock-ups to go': Sharing components, controls and GUI elements. You can make additional components and share or use the ones that others have created and shared (think symbol library).
  4. Great user-centered customer service from a conscientious company; a ton of resources and support forums.
  5. Best part… You can link between mock ups and even bundle/package the whole project into a single pdf with a group of interlinked files and send it over to clients or share it on dropbox etc.
  6. By the way, they have gotten rid of Comic Sans in the wireframe and use 'architect' font instead now, so breathe easy!
They (I mean the balsamiq folks, on their blog) even help you figure out what’s for dinner (not cook, though). Unfortunately no help with your taxes yet!!
Here is a link to some wireframes I have created using balsamiq (note that the linking between wireframes only works with the linked pdf document). http://www.behance.net/gallery/WVU-Research-Redesign-UIUX-%28wireframes%29-Screenshots/9527457

Friday, July 12, 2013

To Sass or Not to Sass?

First things first. If you are looking for advanced tips and tricks on Sass, to know everything about it, you might want to look elsewhere… like some of these articles listed here and a ton of others on the web. Some of these also talk more about cons, things to keep in mind etc. esp. the one on Lea Verou’s blog and one from CSS-Tricks.

http://css-tricks.com/video-screencasts/111-get-yourself-preprocessing-in-just-a-few-minutes/
http://css-tricks.com/musings-on-preprocessing/
http://www.codeschool.com/courses/assembling-sass
http://css-tricks.com/lingering-misconceptions-on-css-preprocessors/
http://css-tricks.com/sass-style-guide/
http://lea.verou.me/2011/03/on-css-preprocessors/
https://gist.github.com/pfulton/2730670
http://sass-lang.com/
http://thesassway.com/

Who is this post for?

If you are someone who has heard about Sass, kinda like it, not sure if you want to start learning it, since you have a ton of other new things to learn on your plate already, and want to hear from someone who has just made the leap into learning Sass, yes, this is the place.
Also, this post is not just about Sass, but more of how I incorporated Sass into my current project, things that made learning it easy (for my style of learning) and more fun.
To make things easy, Read/Do PART II only after you’ve read/done the suggested things (reading list) in Part I. It won’t make much sense otherwise.

Let me jump right in with some points/pointers in order.

PART I: Say hi to CSS pre-processors (Sass here):

  1. It might not be the best way to start learning or trying to understand Sass by getting on the main Sass website. Try the other websites first, starting with basics and experiences from people I have listed on the top.
  2. What is Sass in simple terms: I think of it as “CSS shorthand” … Writing CSS in a terse format, nesting selectors the way things make sense, using variables for the things you repeat (think of your brand colors, typography elements, media query breakpoints and more), keeping all your CSS for specific items separate (for some of us “monks”) but still be able to bring in only the bits and pieces we want together (@import) and then compiling it so it outputs CSS as we know it. Ooh compiling, command line… I am outta here… No stay with me… cue in some super-woman music and enters this amazing little software called CodeKit (more recently mixture.io and others do similar things, but I haven’t tried that).
  3. http://incident57.com/codekit/ Yes, CodeKit makes Sass and playing with Sass and frameworks just SO MUCH FUN! Compiling, command-line, Fuhgeddaboudit! It does it all for you. More about it later. Oh, btw, that’s just for Mac and there might be something called Scout app for Windows, I think Mixture.io works on windows as well. May be some others too. Check it out.
  4. Addendum: If you'd rather stick with CLI workflow, checkout Node JS with Grunt workflow.
  5. OK, sounds good, how do I start?
  6. Get a general idea about CSS pre-processors and Sass from the few links listed on top, read some basic articles, video tutorials if you wish, but don’t linger too long with nitty gritties to make you want to give up! Get an idea of mixins, learn about Compass, but you don’t need to start using compass right away. Baby steps if you’d like.
  7. I am guessing you’ve already decided on on which “flavor” of CSS pre-processor you want to use i.e. Sass (.scss) vs LESS. If you are not sure, to make it easy on you, I’ll say Sass, but if you want to find out for yourself, read this http://css-tricks.com/sass-vs-less/


PART II: OK, how do I really start? 

  1. Get CodeKit (or mixture.io or whichever software you’d like to use to make compiling easy). Of course you have just the straight command-line options as well. Read about CodeKit and how it works. It is more than just a Sass compiler. It concatenates, minifies your files and even reduces your image sizes further (like Kraken.io or such).
  2. You are gonna need a fancier HTML editor than Dreamweaver… this is no WYSIWIG stuff! I went for Sublime Text, go for what ever floats your boat.
  3. Now just get started on a project. Huh, but I am not ready yet!! Yes, you are. If you still aren’t sure, start on a smaller one.
  4. If it is possible to use a CSS framework in your workflow, it’s the easiest way to learn by example. Get a framework that has the Sass version. I chose Foundation 4 by Zurb and it is awesome! You can see how they’ve used variables, mixins, best practices and learn compass too if you wish and by the time you are done with the project, you’ve also learnt the basics and more of Sass. http://thesassway.com/projects/zurb-foundation
  5. Gone are the days of having to “customize” the framework and select only the components you need and still having to look at 100s of lines of code in your CSS if you have to edit something. With Sass, you just import the pieces you need for each template (home, back page etc.). Once you point your project to the framework in CodeKit, it finds all your imported Sass files for you. You don’t even need to specify paths for it, CodeKit just knows. Just watch this…
  6. http://incident57.com/codekit/video/frameworks.mov
  7. Now for something even better, if you have to customize a certain file a lot eg. _global.scss or _type.scss to fit your branding, leave those files alone in the framework folder and put a copy of those, with the same name in YOUR PROJECT Sass folder and customize all you want. CodeKit will first look for files in your Sass folder and then look in the framework folder.
  8. If you are customizing just a few things, just over-ride them in your home.scss instead after @imports where you are importing all Sass goodies.
  9. Remember, CodeKit concatenates and minifies all other .scss files and CSS for you and outputs a CSS named differently from your home.scss (with a suffix etc.) so make sure you are linking to that CSS file in your html file etc. (after this step it is just your basic CSS and HTML). Yes, this has to be all done locally and it may be hard if your CSS/Sass is edited by a team. Chris Coyier talks about it in one of those links.
  10. Codekit also concatenates JS files and minifies it. You can get several levels of minification. With JS, I find it the lowest level is better as some scripts don’t work with minification (make sure you have back-ups).
I’ve talked about variables, mixins @import, ease of using frameworks and more to inspire you to use Sass, but wait there’s more…
I can’t conclude without talking about the live refresh in CodeKit. Make some changes in your Sass (probably a bunch of changes, even better) wait, don’t hit save yet, Keep your browser window open on the side or other monitor (your project folder that CodeKit is “watching” for changes. As you would know from CodeKit docs, it only works with webkit browsers). Now hit save and see the “instant magic” in the browser window!!

I REST MY CASE!
This is just meant to be a pointer or starter or inspiration for using Sass and in no way a full guide/workshop or "how to"s on Sass. Hope it inspires you to use Sass in your next project.
Here is my first project, using Sass with CodeKit and Foundation 4 Framework, and yes the wireframes in the beginning werer created in Balsamiq.
http://www.behance.net/gallery/WVU-Research-Redesign-UIUX-%28wireframes%29-Screenshots/9527457

Some websites in higher-ed that I admire for their usability, design aesthetic and use of technology

My Design Sensibilities

My design sensibilities and ideology can be best summed up in the words of these great designers. As many of us, I may not have completely achieved these in the past, but my goal is to embody these in my current and future work and I find it refreshing that the current trends (and I don’t mean “flat design”) in web design seem to be on a similar path as well.
Minimalism is not a lack of something. It’s simply the perfect amount of something.
Nicholas Burroughs
Simplicity is not the goal. It is the by-product of a good idea and modest expectations.
Paul Rand
We don’t get hired to make pretty things or win design awards. We get hired to solve business problems.
James Bradley
The problem contains the solution. Michael Beirut

I think of good presentation/design as not something that just looks pretty/fancy or flashy but one that is aesthetically pleasing with good use of white space, typography, hierarchy, while conforming to web usability, accessibility (especially important in edu sites) and to new knowledge and developments in the field. These websites offer creative solutions to challenging issues particularly encountered in mobile and desktop.
NOTE: I am not the designer, developer of these websites, just an admirer and a learner.
As you may notice most/all of these are responsive websites, optimized to various screen sizes: desktop, tablets and smart-phones.

Carnegie Admissions website

http://admission.enrollment.cmu.edu/
  • Highlights their main features without the use of a huge auto-forwarding carousel (which are known to have several usability and performance issues based on latest data). Also the previous and next buttons for features are clearly shown to explore more, although they could be a bit more prominent.  
  • Great use of space in back pages with prominent and clearly defined headers embedded within great visuals serving two purposes, conserving space and to define the feel of campus with relevant graphics.
  • Responsive website; Scales well on all screens; Search is prominent and clearly defined to chose CMU or admissions site. FAQ, status and contact are easily available on top.
  • I like the ‘tag it’ feature to bookmark pages while browsing and to go back to them for review.
  • Social media shares are always available while scrolling. I wish there was an Apply now button included in the same way, available right when needed.
  • Good contrast and buttons nicely optimized areas for touch targets. The font-size in the copy could be larger esp. important for mobile.

Information Services at MIT


http://ist.mit.edu/start

  • As we know, IT websites have the challenge of having to handle a huge amount of content and information to varied groups of users and this website does a great job of presenting such a scenario in a clear and non-confusing way, delineating by color, typography, icons and even gives an option of audience based navigation in the footer. It also handles the dropdown menus very well in the desktop site, narrowing down the options right within content area in the mobile screens.

Boston University Today (their news website)


http://www.bu.edu/today/

  • I love it when websites that handle large amounts and varied types of content do a great job in making the website look simple and uncluttered.
  • A great balance of visuals and copy.
  • Great typography and hierarchy and use of white-space which hits the sweet spot to make each section stand out very well.
  • I like that the main image is not a carousel/slideshow and doesn’t take up humongous amount of space but offers to view more of those.
  • A beautiful understated, minimal and very well done design and layout! The light colored theme helps maintain the minimalistic feel and clarity.
  • Didn’t Like: Light blue in links is not a good color for readability (Jared Spool on usability) and it is better to use a much darker blue for links.


Stanford’s Do Research Website

https://doresearch.stanford.edu/
  • Having worked in the research office, I love how the website has consolidated the most common administrative and financial aspects encountered by researchers and presents a large amount of content in a non-overwhelming way with well defined and clear areas to expand content… Progressive disclosure in the right context is good (users get overwhelmed by too many choices presented all together).
  • Love how the most important, funding and contact area is clearly visible with good white space and separation as are the tabs with How to etc. items
  • Good use of breadcrumbs on the back-page and I like how it shows check boxes to show relevant content for the user in context.
  • Didn’t Like: I am dinging points for low contrast in the top-nav which is not good for accessibility (although it becomes clearer on hover) and the pop-up image-content light box is not fully readable on tablet. I can suggest a better responsive lightbox.

Great content and digital publishing

Engaging Content


http://research.duke.edu/

The Duke research website, is one of my old favorites for great engaging content on a website providing a variety of options in multi-media content for the user… videos, slideshows, blogs, features and even faculty blog-rolls for the users to explore. Although it can improve upon its design, I love it for its variety and engagement.

Digital Publishing


https://itunes.apple.com/us/app/ormagazine/id497535480?mt=8

With the future of print magazines questionable, Journalism Students at University of Oregon have shown to be early adopters by making the plunge to Digital Publishing (starting several years ago) and have created a digital magazine of their own with engaging digital multi-media content (not pdfs embedded on web) by collaborative effort of senior students working together as their class project. I had an interesting discussion with their professor and learnt more about their process. This is created as an interactive ipad app with a collection of a set of magazines created by the students each year/semester and is done completely in the Digital Publishing Suite (DPS) of Adobe Indesign.
https://itunes.apple.com/us/app/ormagazine/id497535480?mt=8

Boston Research Magazine


http://www.bu.edu/research/magazine/2011/

Boston Research Magazine has another take on making the magazine responsive and web based v/s the ipad app approach of University of Oregon.

  • Note: I specifically prefer the 2011 magazine layout v/s the 2012 as there are several accessibility issues (low contrast) in the 2012 version: The main image in that issue being a bit overwhelming, taking up a lot of real-estate on the desktop version of the home page.
  • A great desktop and mobile solution combined into one good responsive website. Great use of typography, hierarchy and color for delineating their content. Good graphics.
  • Scales well on mobile.
  • I like how the navigation is at the bottom which is known to be ideal for mobile and also works great on desktop making it quicker to get to.
  • Good clear hints for side-ward exploration of more articles (arrows).
  • Didn’t Like: Copy needs to be bigger for accessibility reasons and on mobile.