Recap: Live Debate: CSS Preprocessors, Useful Front-end Tools?

CSS Preprocessors are tools that allow front-end web developers to write CSS (the language for styling web pages) using variables and other logic that programming languages use. Many contemporary developers use them in every project and swear by their usefulness, while others are less enthusiastic.

While there’s little argument that tools like Sass, LESS, Stylus (and others) allow for things that plain CSS does not, there is room for debate as to whether those things are good and useful.

Pro-Preprocessors (Vince Speelman)

  • It won’t make you a better developer
  • saves time
  • saves effort
  • saves space
  • it’s fun

complexity

  • writing good / big css is complex
  • output remains complex
  • source is simplified
  • files are modular and digestible
  • patterns can be taught to devs of any calibre
  • DRY
  • may or may not complicate workflow
  • allows you to do more if you want to

extensions

  • math: I hate it
    • grids (singularity grid system)
    • vertical rhythm
    • modular scale
  • thinking: I don’t want to waste it
    • color-schemer
    • sassy buttons
  • big: huge helpers
    • toolkit
    • style guide

maintainability

  • fast changes
    • rhythm
    • fonts
    • color
  • modularity
    • break up files
    • separate concerns

The case against preprocessors (Brad Czerniak)

  • The dependencies, syntax, and features-by-keyword of preprocessors all necessarily add complexity rather than reduce it
  • Sass and other preprocessors have features that make bad practices look attractive and easy-to-do, and the ugly result isn’t something you’ll necessarily look at
  • Convenience features of Compass and other libraries are a poor substitute for knowing what the CSS is actually doing
  • While some tasks are quicker with variables, setting them up will always (always always always lol) be touching n+1 more places than doing it the regular CSS way

Recap: Designing in Time Constraints – Experience from Code Michigan 2013

Time has always been a factor in design. Cliff shares his experience from Code Michigan 2013 where he was part of a two-man team that designed an application in a three-day period.

Cliff went through key tips and tricks to design under strict timelines including wireframing and communication with your fellow team mates. Attendees got an idea of how to keep calm and focused during a very tight deadline and to come out on top without losing track of the big picture.

Recap: Fast & Cheap UX Research

At our August 2013 meeting, Refresh Detroit welcomed Jodi Bollaert and Megan Schwarz of Team Detroit, who shared their insights on fast and inexpensive user experience research.

Attendees included web designers, developers and user experience professionals who came from metro Detroit and Ann Arbor to learn about online and in-person research methods to improve their projects.

Thank you Team Detroit for the refreshments, hosting the meeting and for your support of Refresh Detroit events. It was our first time meeting at Team Detroit, and it was a great venue!

Notes from the Presentation

Before beginning user experience research, what do you want to learn? With over 100 user experience tools, how do you choose the best tool? It helps to identify:

  • Who is your target audience?
  • What will you test?
  • What’s your budget?

Challenges we face today with user experience research: three times as much to test (desktop, mobile, tablet) and short project lifecycles. Traditional testing can take up to two weeks to get the report. Web-based tools (like UserTesting.com) enables teams to do research at lower cost and less time, with fewer resources.

Why use UserTesting.com?

  • You need findings quickly (within hours)
  • Test can be completed in 15 minutes
  • If audience can easily be recruited online
  • Site is available online
  • Have resources available to do the tests, review the videos, take notes and report
  • Budget is a concern

Using unmoderated testing with Usertesting.com, you’ll be able to:

  • Test five people
  • Do remote research
  • Only spend 15 minutes
  • Get results in an hour
  • Keep cost to ~$250 on average

For mobile testing, Usertesting.com sends cameras to participants.

Analysis and Reporting

  • The team doing design and development, get the results within hours
  • Developed a UT report template – focused on actionable findings, including a few video highlights to underscore key themes
  • Deliver report in person (usually a few days later since it can take three to four days to review five videos, create report)

Team-based Analysis

  • Offer chocolate and caffeine to encourage team members to attend
  • Watch videos together
  • Practice active observation
  • Each team member documents key insights on sticky notes, one per note
  • Post stickies on wall, work together to sort out

Constraints/Lessons Learned

  • Avoid leading questions
  • Run a pilot test with one participant before launching the full study
    • Check that duration is about 15 mintues
    • Ensure your directions and questions are understood
  • Participant no good? Usertesting will find another one quickly for you

Even Cheaper Tools

5 Second Test

  • Offered by Usability Hub
  • Find out what users recall about your design
  • Free with Karma Points (which you get by participating in  tests) or monthly subscription pricing
  • Easy to set up
    • Upload screenshots
    • Add brief instructions
    • Use default questions or customize for your needs
  • Example shared: Team Detroit home page
    • 5 second test showed that users didn’t know what Team Detroit was about (was it cars? Detroit)
    • Updated home page to clearly identify what Team Detroit does

Click Test (Usability Hub)

Card Sorting

  • Method to help you organize content on a site
  • Example: videos for Ford site. Users asked to group content and write labels once all cards were grouped.
  • Card sorting resource from Boxes and Arrows
  • Consider Websort for online card sorting. Free for under 10 users

User Interviews

  • Qualitative research method
  • One-on-one conversations
  • Identify what your users’ needs are and why

Summary

  • Do-it-yourself user experience research will be used more often, but won’t replace traditional research
  • Talk to project teams. Find out their pain points. Get them involved in planning and observation.
  • Test early, test often
  • Test up to launch, test after launch
  • Share results when you get them (don’t wait)
  • Document findings & facilitate next steps
  • Be careful what you wish for! People get excited and want to do more. You’ll soon discover you need more bandwidth.
  • Just do it!

We’re hoping to have a link to Jodi and Megan’s slides soon. We’ll update this post when the slides are published online.