Category Archives: Inspiration

CSS Animations - Val Head

At An Event Apart – Austin 2013, Val Head shared with us her knowledge of CSS animations. Here are my take-aways:

  • A few animation concepts to remember – all of which are CSS ‘easing’ options:
    • slow in / slow out – gives an organic/natural feel
    • follow through – where object will go past end point and come back – also a natural easing option
    • anticipation – where object winds up or sling shots into motion – this is opposite of ‘follow through’
    • cubic-bezier – where the object’s easing can be keyframed any which way you would like
      • Ceaser tool for easily creating these keyframes
      • You can use the same keyframes with different animations for different results
    • squash/stretch
    • arc – moves in Z-space (feels 3-d)
  • Where are the best places to add animation?
    • When hiding or revealing content
    • For subtle cues or clues
    • For demonstrations of products or services
    • For surprise and/or delight
  • 2 Deadly Sins!
    • Don’t require user to wait for transition/animation if they make a mistake
    • Don’t make your animations too slow. If you are wondering if your animation is too slow, it probably is.
  • Swapping classes with JavaScript is powerful when used with CSS to add animation – especially for play/pause of animation.
  • If your animations or transitions include critical content, be careful and always test it on devices/browsers.
  • My biggest take-away was that I haven’t been really taking advantage of CSS Animations.

An Event Apart

At An Event Apart – Austin 2013, Jeremy Keith shared his thoughts on new HTML5 features to be using as well as how he likes to build for short and long timescales.

Here are my take-aways:

  • Treat navigation as second. On mobile, you can decide to only place navigation at the bottom of your site. The nav icon can just be an anchor link (#nav) to the bottom of the website, where the navigation resides. Alternatively, the navigation icon could link out to a separate page that only has nav on it – has same experience for user, but different approach for designer/developer.
  • Why do we make password fields display as dots? This is just faux-security and doesn’t add any extra security, except from someone looking over your shoulder?
    • Jeremy Keith challenges us to make the password field real text by default and give the option for hiding it with the click of a button. This approach would increase the success-rate of logging in – which increases usability.
  • “Every user is a non-Javascript user while the website is still loading” —Jeremy Keith
    • Because of this, our progressive enhancements should include both CSS and Javascript. Javascript failing should not stop your website from loading fully.
    • Try conditional loading for 3rd party services like social buttons and embedded content.
  • Think in terms of performance load time as well as in terms of the many years your website will be used for. Short vs long time scales.
  • In the long-term, image formats may not stick around, but text formats will.
  • “The cloud – what a bullsh*t word” —Jeremy Keith
    • I didn’t know where he was going with this, but I found a blog post where he describes further about how the term, ‘the cloud’ just encourages ignorance about where things reside on the web. He compares it to Miasma theory which said that some diseases were caused by ‘bad air’, but the theory was later replaced when germs were discovered.

swag

At An Event Apart – Austin 2013, Karen McGrane shared some interesting facts and statistics on mobile web usage and her thoughts on disruptive innovation.

Here are my take-aways from the talk:

  • Some will say, “Why would anyone want to do ____________ on mobile?” It could be something like, do your taxes, apply for a job, etc. This sort of question limits us and discounts the fact that many of the world’s developing countries, poor and minorities can only access the Internet from a mobile device.
  • Disruptive Innovation = a product/service that is inferior in many ways comes out but ends up creating a brand new market of customers for their ‘inferior’ product or service
    • Examples of disruptive innovation include:
      • large, high quality furniture-sized radios vs smaller plastic radios
      • Offset printers vs desktop printers
      • DSLR camera vs smartphone camera
      • Kodak (bankrupt) vs Instagram (sold for 1 billion)
      • Desktop Internet vs mobile Internet
      • The connection I made and the example I can’t stop thinking about: DIY website solutions like Google Sites, SquareSpace, etc vs hiring a web designer/developer
  • The mobile-only user – someone who only accesses the Internet through their mobile devices
    • 45% of low-income people
    • 45% high school students
    • 60% Hispanics
    • 50% young adults
    • By not making the web mobile-friendly, we make a second-class Internet for people who might already feel like a second-class citizen
  • “Browsing the web on mobile can sometimes be like reading the web through a toilet paper roll” —Karen McGrane
  • There is no such thing as ‘writing for mobile’, there is just good writing. If it’s good enough for mobile, it should be on your regular desktop website.
  • Good content transcends platform
  • Responsive design won’t fix your content problems
  • Don’t ask, “Why do that on mobile?” Ask, “What else can we do on mobile?”

At An Event Apart – Austin 2013, Ethan Marcotte shared his thoughts on how our conversation about enhancing the web incorrectly centers around the map (people from different locations) instead of around the territory (people of similar demographics). Here are my take-aways from the talk:

  • Responsive design consists of three things: a fluid grid, flexible images, and media queries
  • A fluid grid is defined as target ÷ context = result. This is a formula for translating a fixed width layout (from Photoshop) to a fluid, percentage-based layout on the web.
  • We should be designing a layout system – just like Samantha Warren said in her talk.
  • We should use media queries to defend the integrity of our design.
  • The map is not the territory – meaning all people in one particular locale have widely different access to the web.  A physical location on the map can’t be easily categorized as having the same access to computers/internet.
  • Because the map is not the territory we need to design for reach (meaning faster loading websites)
  • In Africa, there are a majority of people who only have access to the internet from a mobile-device.
  • In fact, among minorities, the poor, and the developing world; mobile-only internet access is the main-stay.
  • Moreover, the developing world will soon overtake the developed world when it comes to mobile-use.
  • The biggest take-away for me: As a web designer, I need to craft mobile experiences that ensures  that people who might feel like second-rate citizens do not also have a second-rate web browsing experience on the only device they can access the web on: their mobile device.

At An Event Apart – Austin 2013, Luke Wroblewski shared his thoughts on how we should be designing for mobile creation. This means – how should we build web forms and interactive websites that take into account the user’s habits/posture when using their device.

Here are my take-aways from his talk.

  • The ‘mobile moment’ is where your mobile traffic exceeds your desktop traffic. Facebook recently reached this ‘mobile moment’
  • Most mobile use is in houses, not on the go
  • Ergonomics is now important for touch devices, since the mouse and keyboard barrier are gone. This means how we design the website/app should take ergonomics into account.
  • “It takes big changes to go small” – Tim Cook, Apple CEO
    • This means the mobile experience should have a focused and clear flow.
  • “Just in time education” is best when showing tips on using the website or app. This means only showing tips as the action is being taken. Avoid showing a full how-to guide up-front.
  • The answer for the debate between native apps vs mobile web is – They should both good for their own strengths.
    • The ideal world would utilize cross device usage – so you can pick up where you left off – think reading books on Kindle, using Chrome for browsing on various devices, that remembers what you viewed/searched

My summary:

As I begin building websites for mobile, I need to research and test different ways that are ergonomically correct for users to interact with the device. This involves how large to make buttons, where to place them on the screen and much more.

Hilton Lobby

At An Event Apart – Austin 2013, Kristina Halvorson shared her thoughts on content strategy for the web. Here are my take-aways from the talk.

  • Create consistency in your content
  • Create cohesiveness in your content
  • The content is not for us, it’s for the audience
  • The story informs the format – think content first. My interpretation – The content informs the design
  • Move fast and break things
  • Activity doesn’t always equal productivity
  • Having a strategy keeps us accountable.

Process:

  • A content life cycle consists of: strategy → plan → create → maintain → audit
  • Process is not your god… it’s OK to break the rules

Roles:

  • In each project, think RACI
  • R – who is responsible?
  • A – who is accountable?
  • C – who is consulted for sign off?
  • I – who is kept informed?

An Event Apart

I was lucky enough to attend my very first web design conference this week. It was amazingly inspiring and gave me a lot of things to think about – mostly a lot of things I need to do better at in my work. It was great to be in a room full of 400-500 other folks with the same mindset, skill set and goals as me. It was also great to hear talks by some of the people I’ve been learning from for many years – through their blogs and books.

I’ll be sharing my take-aways from each of the speakers. One blog post at a time. First Up – Jeffrey Zeldman.

At An Event Apart – Austin 2013, The Godfather of Web Design – Jeffrey Zeldman – shared his 10 commandments of web design. Below I’ve shared them and how I interpret each.

Thou shalt entertain

My interpretation: Stop focusing on ‘techy’ details and make your websites fun and playful – through conversational content.

Test everything

My interpretation: Always test your websites as well as testing your basic assumptions about how you create those websites (things like ALT tag usage, etc)

Thou shalt iterate

My interpretation: Never stop tweaking, revising and making your websites better, but always ‘ship’ your ‘minimal viable product’.

Thou shalt ship – “If you can’t delegate at the pixel level, you’ll never ship”

My interpretation: Do your work efficiently and get it out in the public and then go back to #3

Engage thy community

My interpretation: Think about using more ‘social’ features with blog comments, like Disqus, and embeddable comments

Love they user as thy self

My interpretation: Create the website you want to see and use – make it responsive – aka device agnostic – and put the most useful content on top of the website

Remember content and keep it holy

My interpretation: content comes first and navigation is second, use larger text for relaxing experience and remove extraneous design bits.

Thou shalt make magic – not perfection

My interpretation: Make your websites magical, but that doesn’t mean making it perfect. Focus on previous commandments and ship the minimal viable product. Think Instagram, it was ‘magical’ but not perfect at first – because it didn’t allow for sharing, commenting or even have a website presence, only app presence.

Thou shalt prioritize

My interpretation: Do most important thing first (obviously) and think about using Github ‘issues’ feature to help prioritize.

To thine own self be true

My interpretation: Focus on what you are great at.

Photos were taken from my home office window every 3-5 minutes from 11am – 5pm on the day of a snow storm.

Good design adds value of some kind, gives meaning, and, not incidentally, can be sheer pleasure to behold; it respects the viewer’s sensibilities and rewards the entrepreneur.

—Paul Rand

Hard work is a prison cell only if the work has no meaning.
—Malcolm Gladwell