Nostagia, in CSS

The other day I was working on a table and I realized that the colors I was using for table striping reminded me of that old green bar printer paper--you know, the kind with the tear-off strips of holes on the side? A little bit of tinkering later and I ended up with some css for green bar paper and ditto-machine ink. I'll probably tinker with it some more to make the holes better and try out text masking to give the effect of a bad ditto run-off, but here it is:

See the Pen Ditto by Pam Griffith (@pamgriffith) on CodePen

Someone should write this, part 2

Tezcatlipoca as a jazz musician in the 1920s. Quetzalcoatl should show up and sass him, but then maybe they end up saving the world together. Or maybe not. There should be speakeasies and Gatsby-esque decadence. It might take place in the same world as American Gods and Anansi Boys.

Freelance rates survey

Results of the 2013 freelance rates survey

I quit freelancing and got a full-time gig so I could stop having to think about this sort of thing, but this would have been super-nice to have when I was just starting--it won't tell you what you specifically should charge, but having a ballpark of what other people might be asking would have been fantastic. So, promote, share, and enjoy.

Privacy and autocompleted usernames

I dislike sites having access to information (e.g. from a social network) that I haven't explicitly said they could have. I also get peeved at sites like Quora being very pushy about getting me to log in, in particular with said social networks, presumably so they can track what I, as a particular individual, am interested in, in addition to anonymized stats.

So given that, I was kind of annoyed earlier today when I discovered my twitter avatar appeared next to the login box on the top of a Quora post.

I had third-party cookies disabled and it's not in an iframe, so they weren't getting it from facebook, and it was still there after deleting all (39!) cookies from the domain... So how did they know that?

It turns out removing the username and password autocomplete for Quora also removed the avatar. Filling in the email field again put it back. The site was able to detect the autocompleted username and potentially figure out who I was and what pages I visited even though I wasn't logged in--I doubt there was any intent to collect the autocompleted name, just a cute embellishment when someone intentionally fills out their name as an extra indication of who they are logging in as, but there it is.

When I browse sites while logged out I generally assume that they don't know 100% exactly who I am--there are things they can do to correlate IP address and even browser, OS, plugins, etc., but there's work involved and it's not bulletproof. But when my browser auto-fills a username, it's telling the site exactly who I am--I could screw with that, of course, by putting in someone else's email address, so it's still not 100%, but still, I'd just rather they didn't get that information at all...

Werewolves in Star Fleet

There aren't enough scifi/fantasy crossovers. Think urban fantasy in a space opera setting, or perhaps...werewolves in star fleet. I was thinking of the latter the other day when I was wondering what effect space travel would have on lycanthropy (I don't remember how I got on that particular train of thought)--is it just Earth's moon, or will any full moon do? Could you avoid the effect altogether by staying out from between any moons and their nearest star? Anyway, I'm no author, but I'd like to see someone write that, and after searching a bit I'm disappointed that it doesn't seem to exist already (I did, however, find Nazi Werewolves from Outer Space). I think there are a few interesting story possibilities...

Story 1:

The story universe's equivalent of Vulcans come to earth and set up an international space federation of some sort, but they insist that all of earth's sentient species be allowed to join--

"What do you mean, all? Like, dolphins?"

"Well, those too, if they want, but we were thinking of the humanoid creatures like werewolves and elves."

"Wait, what‽"

Fairytale creatures cautiously come out from under their hills and whatnot, humans reel from the double revelation that not only are they not alone in the universe but they aren't even alone on their own planet. Prejudice on all sides, but eventually it fades into the background noise with all the diversity of a galactic civilization. Perhaps there is a realization that "you may be weird, but you're our kind of weird."

Story 2:

None of the above has taken place, werewolves and the like are still covert. One of them decides join the story universe's star fleet equivalent, perhaps to fight some threat to all life on earth. Mother and father are aghast--"It can only end in tears!" Perhaps the academy goes ok, with some sticky situations with roomates or exams on full moons, but it's a lot harder to hide things on a spaceship, and this next planet we're visiting has how many moons‽

Story 3:

Bad vampire and werewolf romance in space. I don't actually want to read this, but imagine the melodramatic cover art possibilities.

Addenda:

  • The chief engineer leaves a saucer of cream for the brownies in the engine room every night. The other engineers think this is a bit eccentric, but you can't argue with the ship's safety record.
  • Space ships and stations have to be redesigned not to use iron to comply with non-discrimation acts so fairies can work and live in space.
  • Fairy glamor makes for great spies and diplomats. Fairies are also great at negotiation.

IAS13 - Revolutionising GOV.UK

This is part of a series of notes from the Information Architecture Summit from 2013. All posts will be tagged IAS13. This talk was presented by Paul Annett.

  • Before:
    • hundreds of government department websites make it hard to find stuff, have to know how gov works to know where to look
    • 1 in 5 phone calls to help lines were for failed digital transactions; web transaction costs 1 penny, phone call costs 6 pounds
    • locked into contracts, can cost 75,000 dollars to change a line of code
  • starting to replace everything with single gov.uk
    • created Government Digital Services (GDS) cabinet office with control of all user experience across all digital channels
    • fix publishing
    • fix transactions
    • open API
  • citizen needs information (next public holiday, do I apply for X) and services (taxes, renew passport)
    • most digital services can't be done online, working on digitizing and improving
      • some services can be prioritized based on frequent use (register to vote vs apply for burial at sea)--created metrics of transactions for each department of each service, all publicly browsable
      • started with 25 of the most important services that will set the bar for all the others
  • private sector ecommerce has design patterns, but government transactions are obligated, complicated, infrequent ("grudge transactions")
    • users don't compare to other governments, compare to google and twitter, need to measure up
    • want people to prefer online to phone or face to face
  • proof of concept in 2011 to start conversations
    • just a taste of what could be done without bureaucracy overhead, use to convice polititions that this was the right way to go
    • public, invited feedback, have continued to iterate design
    • initial prototype didn't worry about scalability, main focus was feedback
  • design principles (published, want to change how government organizations think and work, explain process, evolve over time)
    • start with needs (user needs, not departments or stakeholders)--if you don't give people what they want in private sector, they go to a competitor; in public sector, competitor is the more expensive channels like phone
      • analyzed search terms on old sites, used to prioritize content on new site and uncover user needs
    • do less, focus efforts on what needs to be done: government should only do what only government can do--cut out things like tips on keeping bees, reduced number of pages and closed things that other non-gov sites could do better
    • design with data: user testing on prototypes, analytics
    • share information, e.g. with call centers, who have rich information on exactly what the problems are with digital services, create shared responsibility for keeping things running smoothly
    • do the hard work to make it simple--online services are on top of complex processes and legislation--hard to simplify something when specific procedures are enshrined in law
      • don't over-simplify, people can feel sped through without being given time to think on forms that are too short and simple; people have trouble trusting government services that are too simple, "can't possibly work that way"
    • iterate! don't treat websites like rockets, they're services so you can refine them over time
    • build for inclusion
      • the people who use gov services the most are the people who are most vulnerable and hardest to reach--need to allow people to register to vote without email or computer; accessibility is not just checkboxes, needs to account for real use
      • people who haven't used a computer don't scroll--the fold is back! don't have to avoid scrolling, but consider it, especially on things more likely to be seen by people who haven't used computer before
    • understand context and environment (job center, home, hospital bed)
      • government transactions are often related to stress and suffering, being asked to make very serious decisionts--slow people down, give them the time to make those decisions wisely, consider emotional context
    • build digital services, not websites
      • many services have elements that aren't digital, design for those--some can be digital, but some won't
        • e.g. may have alternatives to signing using webcam, try to make people's lives easier
    • be consistent, not uniform: not every pattern works in all situations, agencies have guidance on how to design services but also freedom to experiment and work out what works best as they go along
    • make things open, share with colleauges, users, etc.--why they have alpha, github, etc., allows feedback, lets people to contribute better code, enable world to build services that are bigger and better on their data
      • also paying back open source community
      • the public paid for it, they own it

IAS13 - Brown Dirt UX - Creating Impact Without Permission

This is part of a series of notes from the Information Architecture Summit from 2013. All posts will be tagged IAS13. This talk was presented by Adam Polansky.

  • How can I position myself to do my best work? Be known as a trusted advisor, convince the people who make decisions
  • Jeffrey Gitomer: "Trust forms the foundation for everything you do in business & everything you do in your personal life"
  • trust audit: how much to people who work with trust you? then next layer out (bosses, decision makers)
    • we trust people when they give us something of value, and value is subjective and often a reaction to pain
    • what do they value?
      • time - province of development, how much time does it take to build?
        • developers are asked for time constraints before requirements are set
        • when developers say something, it's not open to discussion, they have an opaque skill set
      • money - provice of business (acct managers, founders, directors)
        • the person who is on the hook for getting what the user wants is actually on the hook for what the business wants the users to want (what they actually need to buy may not be what brings in the biggest margin)
      • quality - province of user experience
        • time and money cause pain, bad quality has a further pain horizon than the others so it's easier to sacrifice now and pay later to end pain now in other attributes
  • what can you do now to speak to what other people value?
    • heuristic analysis
      • provides a way to give quantified view and aggregate instead of arguing opinions
    • remote usability testing
      • often offer freebies, pick something to test and go out and use them--won't be comprehensive, but provides an indication
        • some have video you can show, words come from someone else's mouth--an expert is anyone who comes from more than 50 miles away
    • guerrilla user research
      • spare time, weekends, don't bother anyone with the details of how you're going to get this information, just provide outcomes and don't have anyone argue tradeoffs
    • competitive audit
      • apply the above to competitors
      • put in comparitive spreadsheet, show outlying examples of people who do things a little different--helps come up with something unique that competitors don't do
    • prototype something
      • let people play with it and walk through using it, helps explain
  • an IA's job is to generate understanding--do whatever level you need to communicate to who you are communicating to

IAS13 - Design Guidelines: Real-Life Stories

This is part of a series of notes from the Information Architecture Summit from 2013. All posts will be tagged IAS13. This talk was presented by Rachel Sengers, Lesley Humphreys, Rob Fay, and Christopher Merkel.

  • Rachel Sengers: JDSU (test and measurement equip for telecom)--just started on the design guidelines process
    • kickstarted with workshop week with people from different products, functions, and offices: brainstormed topics, then broke into groups to work on different topics; workgroups continued on guidelines and governance after workshop week
    • management support got it started, workshops developed bottom-up support to keep it going: workshop representatives became embassadors, recommendations were made by people close to the products
    • strategic decision: visual guidelines first, interaction later
      • easier to implement in existing project and show tangible results earlier
      • easier for upper management to grasp
      • makes it look consistent even if workflows aren't
      • don't bite off too much at once--started small (even only key parts of major products) and iterate, hard to make something that covers everything possible right away ("low-hanging fruit")
    • visual design guidelines were made to allow product managers to customize as appropriate (guides had light and dark theme)
  • Rob Fay: Blackboard--started 5 years ago, mid-life of cycle
    • Multiple products were becoming siloed, wanted to modernize, increase usability and shared design framework across products, and free up resources used on re-designing each feature to innovate
    • Took blue-sky design goals to project groups and asked what was feasible now and how teams might move toward the ideal later
    • Design team made images to describe patterns with title, summary, rules of use, exceptions, jsp tags for engineers to use--later added accessibility and text considerations, links to usability research to justify the pattern
      • Most common pattern was standard page
      • Pages contain components and behaviors
      • Behavior can be referenced on its own, may not be visual (drag and drop is a behavior type not tied to page or component)
      • Pages are contained within page flows (e.g. checkout)
    • Tools
      • Used wiki to store design framework, but someone has to maintain it through iterative design cycles; formal steering committee was too much, though
      • Bug tracker is too formal for design process, didn't catch on; now they have a ux representative communicate changes to team instead of formal tracker and any ideas generated are brought back to influence the guidelines
      • Formal onboarding resources for new designers with a point person for each part
    • Design guideline process influenced company culture, created conversations with marketing and design teams on other products, which now look to the flagship product design team to create common patterns across products
  • Chris Merkel: Xerox--9 years
    • 2004 struggling with relevance, needed refresh
    • Brand book for early years in company, but too hard for brand team to manage for all of their products
    • Brand book turned into website, added web guidelines and transitioned between old guidelines to web guidelines (voice, color, layouts could be shared from print)
    • Added de-facto standards in use by various product groups for use in other products (e.g. added a blue used by industrial design team to Xerox red on website)
    • Products need user experience and branding approval, iterate until things get approved and add to brand book
    • Executives spread the word between product silos--even used for marketing, legal, professional services, etc.
    • Cross-product design guides made it easier to rebrand 2007-2011
    • Introduced formal brand training for any new employee
  • Lessons
    • get management support for money, people, and time
    • cross divisional participation
    • start with manageable pieces, grow guidelines over time
    • allow process to grow organically, get support from bottom up and don't force things

Changing element display order in css (without flexbox)

I was recently in a position where I had to build a responsive design that had an image on the left of some text that was centered vertically in the image:

Wireframe with image on left and text on right

But the small-screen version had the image below the text:

Wireframe of text above an image

Since the design was responsive, not a separate mobile site, I could either write the html so the image was before or after the text, but I couldn't have both. It's a lot easier to adjust things to the left or the right than it is to change whether they appear before or after something, so I ended up with the image after the text in the html:

<div class="wrapper">
  <div class="content">
  <h1>Heading</h1>
  <p>In good time, the Town-Ho reached her port—a savage, solitary place—where no civilized creature resided. There, headed by the Lakeman, all but five or six of the foremastmen deliberately deserted among the palms; eventually, as it turned out, seizing a large double war-canoe of the savages, and setting sail for some other harbor.</p>
  </div><!-- ((this is how I deal with whitespace between inline block elements))
  --><img src="kitten.jpg" class="image" />
</div>

The small-screen version with the text above the image doesn't need any adjustment, but how to get the image both on the left of the text and have the text vertically centered with the image? The new flexbox properties can do it handily, but until I stop supporting IE 9 and below it won't help me. Float:left can get it to the left but we won't be able to center vertically, inline-block can give us vertical centering but the image will appear on the right because it comes after the text in the source--or will it?

The reason the image appears on the right when both the content and image blocks are set to inline-block is that the text direction is left to right, but we can change that! If we set direction:rtl on the parent of both the image and text blocks, the first inline-block element will appear on the right. Of course, the text is still English, so the direction will have to be set back to left to right on the child elements:

.wrapper { 
  direction: rtl; 
} 
.content { 
  display: inline-block;
  vertical-align: middle;
  width: 30%;
  direction: ltr;
  text-align: left; 
} 
.image {
  display: inline-block;
  vertical-align: middle;
  width: 65%;
  direction: ltr;
}

This method appears to work everywhere I've tested that supports inline-block (in IE 6 and 7 it's best to just float the image and forget about vertical alignment). Opera does have a bug if you try to give the content element a left margin--the margin ends up at the left of the image instead of between them. Newer versions of Opera probably won't have that problem with the transition to Webkit, but if you need to support devices with embedded Opera and no browser updates it could be a concern.

Here's a demo, including some more complicated padding and margin:

demo page

(Unfortunately the popup isn't resizeable at the moment, you can open it up in a new tab if you want to see it switch over to the vertical design.)

Bonus links

I look forward to flexbox being ubiquitous so I can stop relying on silly tricks like this, but in the meantime here are some nice tutorials on it so we can all get excited about it together:
Understanding the CSS3 Flexbox
Using Flexbox: Mixing Old and New for the Best Browser Support

Adaptive icons

There's a nice little feature of the iphone that the icon for the calendar app updates to show the correct date and day of the week. It's a nice, quick way to see the date without checking, and it doesn't put the incorrect date into your head if you just happen to glance at a calendar icon with the wrong number.

The weather icon, however, does not update based on the current weather. It is forever 73 degrees and sunny.

The calendar icon on the left showing Friday the 25th, and the weather icon on the right showing 73 degrees

I understand that the phone just knows the date but it has to contact outside services to get the weather, but man does it feel like that 73 degrees and sunny is taunting me when the actual weather is 12 degrees and snowy.

Archives