Notes from #HEWebPitt

Without People, You’re Nothing by Georgy Cohen (@radiofreegeorgy)

Georgy Cohen’s presentation is about how as a web designer you can’t get around working with people, and that your work isn’t about pixels or prose, but rather people. The following is what Cohen states that web designers can do to help themselves:

  • Be a person first and honor your and other’s emotions in the workplace
  • Know that websites are great, but they don’t cure cancer
  • Emphasize with clients because change is scary
  • Always ‘take the high road’

Cohen states that web designers need to be the change, keep selling their practices in the workplace, and that they need to find ‘their people’ in the workplace to connect with, champion each other, validate ideas, emphasize education, and make a case.

“Teamwork Makes the Dream work”

Cohen further states that working in website design in higher education is isolating, sometimes you feel disconnected, but web designers have to find ways to communicate and connect with a community of people. To do this, Cohen states that web designers can:

  • Be transparent to clients about everything
  • Reduce redundancy in work
  • Share strategies over a social media group
  • Train others and have better meetings

Cohen closes by stating that web designers need to publish web guidelines, create tone and voice of text practices, and define what will not be on the web.

Creating Mobile-friendly Web Forms by Joe McGill (@joemcgill)

Joe McGill states in his presentation that forms exist for users to complete tasks, so web designers should make them easy and enjoyable. First and foremost McGill champions auditing all forms, comparing them against peer forms, and ask yourself the following questions (about forms):

  • Why do we need this info?
  • Do I have a style pattern for forms?
  • What HTML elements are in use?

Furthermore, McGill discusses and outlines a sixteen point process in his presentation (https://speakerdeck.com/joemcgill/mobile-friendly-forms) he uses to make mobile friendly forms:

  1. Limit inputs to less than seven, and try to implement dynamic input fields (exp. http://youtu.be/XUa5pfHdVwQ)
  2. Utilize label placement: <label for=”topping>What goes on a salad?</label> with <form id=”topping”>
  3. Always top-align labels
  4. Right-align labels to fields as opposed to weird spacing, or inline labels to replace blank fields
  5. Organize inputs into familiar groups
  6. Use multi-screen forms with progress bars and steps
  7. Implement usability improvements like checkboxes with smart defaults, and radial and drop-down inputs with smart defaults
  8. Use touch friendly targets that are at least 44 pixels by 44 pixels wide
  9. Make completion states obvious, buttons should look like buttons, and primary actions stand out
  10. Use flexible styles with max-widths of 100%, and utilize CSS instead of labels to align forms
  11. Eliminate distractions like excessive help comments
  12. Use obvious validation with errors
  13. “Captchas Are Evil!” They increase fail rates and extend form completion times
  14. Use Aria roles and test with different input devices
  15. Use HTML 5 input types – telephone, search, email – to change custom mobile phone keyboard inputs
  16. Add forms through progressive enhancement (https://speakerdeck.com/tmaslen/cutting-the-mustard-future-friendly-browser-support)

The Trouble With Tribbles: How LOL Cats ate Our Engagement by Jeff Stevens (@kuratowa)

Jeff Stevens of http://do-gooder.info/ states in his presentation (http://www.slideshare.net/kuratowa/the-trouble-with-tribbles-how-lolcats-ate-our-engagement) that our websites are in competition with kittens, memes, and viral videos. Indeed, web designers need to build better:

  • Headlines – use headlines like used on Huffington Post and Upworthy, that utilize the curiosity gap. Use http://www.upworthygenerator.com/
    • Words – choose the right words
    • Time Limits – define time limits in article titles
    • Teaching – utilize tutorials, teaching, introductions, etc.
    • Name Drop – popularity does equal clicks
  • Sharing – specifically Twitter, but for all social media
    • Check Twitterwonk (http://followerwonk.com/) to see optimal tweeting times
    • Use a link in every tweet
    • Only use a maximum of #two #hashtags per tweet
    • Ask for retweets instead of using RT
    • Persistent Sharing works 398% more
  • Content – over social media
    • Use memes for your school
    • Use BuzzFeed Advertising
    • Photo contests work!

Proactive vs. Reactive: A Cautionary Tale or Use the Tool, Don’t BE the Tool by (@shelleyKeith and @cgrymala)

Both Shelley Keith and Curtiss Grymala from the University of mary Washington (http://www.umw.edu/), when redesigning their university’s homepage, developed a presentation (https://docs.google.com/presentation/d/1bQmA22br9ZWGG0s1ou6oC1s6WrxJMkgm9DfjFAVla9c/edit#slide=id.p) about tools versus big goals. Grymala and Keith state that identifying tool is not a goal. Rather, web designers need to focus on identifying big picture goals, and planning milestones that impact them. To do this:

  • Talk problems, but also solutions
  • Squeaky wheels need oil, and oiling them builds good will
  • Focus on real problems, and not on minutia, like asking who is cutting the grass in the zombie apocalypse. An example is a client stating “I don’t like orange… replace it with blue,” when the website is broken.
  • Use your data and promote your wins
  • Remember, “Skeptical Hippo is skeptical” (HIPPO – Highest, Paid, Person’s Opinion)

Beyond Media Queries: The Principles of Adaptive Design by (@brad_frost)

These are all older versions of the same presentation that he has been slightly altering for the past three years: