CSSKarma

display your <style>

designing the web since 2002

Archive for March, 2009

|

SXSW Notes pt. 5 – Presenting Straight to the Brain

Tuesday, March 31st, 2009

article banner

  • the brain has lots of distractions
  • peple have different learning styles that need to be looked at

Research

  • there’s no research that says using templates & bullet points are the best way to present
  • Book: Multimedia Learning
  • we have assumptions about communications that we can send info and someone will receive it without a problem

Types of learning

  • no learning
  • fragmented learning
  • meaningful learning
  • usually stuck in fragmented learning

Memory

  • sensory memory (unlimited)
  • long term memory (unlimited)
  • working memory (3-4 chunks of information retained in working memory)
  • sync both visual and verbal channels of communication in a presentation
    • the speed the brain processes verbal and visual are different
  • need effective information design
  • present a story in a way that slims it down enough to where people can process it all

What turns the brain on

  • meeting the brain, not just on conscious mind.
  • the mind thinks something is important, but the brain disagrees
  • how does the brain know what to let through it’s spam filter?
    • brain cares about chemestry
    • anything that sends a little chemical signal (weird things, shocking/novel things)
    • talking to a person’s instincts, eliciting a reaction to toggle memory

What the brain doesn’t care about:

  • boring dude with a computer
  • code
    • adding in a strong image to code to get a reaction
  • talk to the brain, not the mind

Retention

  • combining the audio and visual toggle much better memory
  • showing interaction with action, sound and animation

Mistakes people make in presentations

  • using speaker notes (use the screen and images for speaking queues )
  • Focusing on the tool, rather than what you want to do with it
  • talking over text
  • having too much text
    • putting text on a page forces the brain to decide between listening to you or reading the text
  • bullet points are not always your best option (ask: when is it appropriate to put bullet points in a film, or put the script on the screen? — it’s not)
  • listing technique doesn’t hold up against a story approach
  • don’t read the bullet point
  • if a bullet point is wrapping on the next line, it’s too long
  • Book: evaluating training methods

How can we make actual changes to someone’s behavior? not just cheap tricks.

  • how you view the audience, as a presenter is important
  • don’t make a presentation of [x] better, try and make a better user of [x]
  • don’t focus on the presentation, focus on the user and how they can use the information

Tips

  • never use templates or themes
  • use pop culture (star wars example)
  • ask yourself if every slide has a pulse
  • use puppies

Notes from other people

Tags: , ,
Posted in Life | 1 Comment »

SXSW Notes pt. 4 – Managing “Expert” Clients

Monday, March 23rd, 2009

article banner

Making your clients feel good

  • they call this the honeymoon phase
  • meeting the team
  • making a good 1st impression
  • spend time outside the office
  • finding out how they like to work
  • bonding with the client

Refining you approach

  • how do you like to work
  • how do the like to work?
  • staying flexible

Setting the ground rules

  • establish a baseline relationship
  • make sure you’re clear about what’s happening with the work
  • listing business & team objectives – with team member names

Kicking off the project right

  • motivating your team with clear roles and responsibilities (client and team)
  • Educating clients
    • inform without talking down (don’t talk to them like children)
    • myth busters and industry standards
    • project life cycles
  • setting expectations
    • communicate escalation paths
    • set up regular check points
  • have your analytics in place to defend decisions
  • urging using comments on a blog if they have a quality product

Managing the project scope

  • clear up any questions
  • assign duties to key stakeholders
  • review project schedule
  • clarify the impact of missing deadlines
  • explain the purpose of each deliverable
  • maintain ad consistent review of a project

Defining the process

  • Key documentation
    • project plan
    • weekly status notes
    • functional design spec documentation
    • test plans
  • using pictures in documentation
  • the more documentation you can hand off to the client, the better

Gaining trust

  • proving by performing
  • putting yourself in your clients shoes
    • not all your decisions should benefit you
    • be honest
  • differentiating between personal & professional knowledge

What if we disagree?

  • handling scope creep
    • a new creative brief, letting them know consequences to when work gets off track
  • change of direction halfway through
    • budget increase, make the client understand that actions have reactions
  • team conflict
  • be creative and flexible
  • sometimes you have to say “enough is enough”

Compromise after a tough change on the project

  • keeping your team motivated
  • ending a project properly
    • tie up loose ended
    • fixing bugs
    • stabilization period
  • smoothing things over so you can work together again
    • lessons learned
    • check analytics after a while to see if the project was successful
    • celebrate the launch with your team
    • assess good and bad things in the project

Referrals will spur new business

  • they’ll remember the team they worked with, not the company.
  • establish a good relationship

Tags: ,
Posted in Life | 1 Comment »

SXSW Notes pt. 3 – CSS3

Friday, March 20th, 2009

article banner

This panel had representitives from each vendor (not apple) and they each took turns showcasing the upcoming CSS3 support in their browser.

MOZ

  • nth-child selector
  • color module [opacity, rbga]
  • border-image
  • border-radius
  • box-shadow
  • * word-wrap:break-word
  • * font-adjust
  • @font-face
  • @media queries ( @media(width:22em){blah}
  • -moz-transform: skewX(20deg);
  • -webkit-transform: skewX(20deg);
Future from MOZ
  • width calculations
  • new layout systems for user interface

Microsoft – IE and CSS

  • implementing 2.1
  • 1st complete implementation on 2.1
In IE8
  • no new CSS3 properties
Future of CSS in IE
  • opacity
  • backgrounds
  • web fonts
  • media queries
  • mutil-column

Opera

  • text-shadow (css2)
  • webfonts (css2)
CSS3
  • backgrounds and borders
  • border-radius: 150px / 50px;
  • box-shadows, blur, inset
  • border-image
  • a box css3 style
  • css transitions (animations)

Tags: ,
Posted in Browsers, Life | 3 Comments »

SXSW Notes pt. 2 – Web Typography

Thursday, March 19th, 2009

article banner

sxswtypography.com

Why do web designers complain about typography?

  • web fonts are limiting
    • SIFR
    • Font stacks
  • complexity
  • consistency across platforms

Where do you find inspiration?

  • print design
  • thebookcoverarchive.com
  • the content itself

Current implementation?

  • Don’t pretend the Web is a book
  • Cambria adoption is around 40%
  • questionablecharacters.com
  • Try to make the design work with the fonts you have

The future of Web typography?

  • @font-face{ font-family:barf; src: url(barf.otf/eot); } <–need IE if statement for IE .eot font files
  • font linking
  • .eot as an open format for protection of font files
  • loading problems with @font-face since the font has to load
  • using an .htaccess file to protect the font from download.
  • webfonts.info [available font with open licensing]

Closing Tips:

  • webtypography.net
  • pick a normal font and make it good. Don’t dwell on what you can’t do
  • realize the creative potential
    • use letter spacing, text decoration, etc to dress up a standard font
  • CSS3 fonts module
  • Look up ARC90
  • Arial has cross browser weight (bolding) issues, because it’s an old forgotten font

Tags: ,
Posted in Life | No Comments »

SXSW Notes pt. 1- Feedback & Social Architecture

Monday, March 16th, 2009

article banner

How to Respond to Feedback

step 1

Appreciation – “Thank you”

step 2

Acknowledgment

  • understanding before you act. ask further questions if you don’t understand
  • words matter (being blunt isn’t an excuse)
step 3

Consideration

  • finding the value in feedback, how you can apply it
  • strip away the negative
  • isn’t always actionable
  • be honest (if you can’t do it, need to think about it, etc.)
  • give accurate expectations
  • don’t say the word “no”, soften it up

Social Architecture by Christina Wodtke (Day Stage) – boxesandarrows.com

  • slides on slideshare.net
  • behavior is a function of the person + the environment
  • you can only control the environments
  • Gene Smith’s model
  • A group is it’s own worst enemy – shirky.com/writings/group_enemy.html
  • need to have visitor identities
  • make the default avatar ugly so people want to change it
  • identity is context based
  • presence (status, history, signs of life [last logged in])
  • reputation system can be insulting to a small group
  • it’s good for large groups like amazon
  • there must be a cost to join (from registration form to monthly fee)
  • building relationships (groups of some kind)
  • ways to track people you’re interested in
  • facilitating conversation between users
  • sharing information
  • segregating a social site by demographic if you’re trying to cover a wide audience
  • look for a real-world equivalent and try to mimic the behavior on your site

Tags: , ,
Posted in Life | No Comments »

For a Beautiful Web

Thursday, March 12th, 2009

article image

Every so often as I meander around the internet I find little bits of geek-dome brilliance in the markup of a site.

This morning, I was reading For A Beautiful Web, a site put out by Andy Clarke. This site, by itself is a great resource, but that’s not why I’m writing this.

screen shot of For a Beautiful Web dot com

I left a comment on a recent blog post, and since I had also just written a custom style for this site with Stylish, I noticed that the comment I left looked a little funny. It looked like the style I just wrote for a blockquote. So I investigated.

Sure enough:

<li id="r450" class="odd ">
<div class="meta">
<h4 class="vcard"><a href="#r450" title="Permalink this reply">#1</a> &bull; <span class="fn url"><a href="http://www.csskarma.com">Tim Wright</a></span></h4><abbr title="2009-03-12">Mar 12th 2009 &bull; 4:05 <sup>pm</sup></abbr>
</div>
<blockquote><p>It always seems like company heads generally agree that getting together and talking for the greater good is a positive thing. Unfortunately, it never seems to happen. My guess is that they don&#8217;t see the value in improving their product to us (the developer), only the general user who generates the majority of the revenue.
</p>
<p>
It&#8217;s unfortunate that not many people higher up actually give back to the community as a whole.
</p></blockquote>
</li>

comment blockquote usage on For a Beautiful Web dot com

Not only a blockquote, but a dash-o-microformatting too.

Anyway, I thought this was a brilliant addition to blog comments, and it makes perfect semantic sense, and I really hope it catches on. I love it, great job Andy!

P.S. If anyone wants to meet up at SXSW next week DM me (or e-mail me), I’ll be there for all of the Interactive and some of the movies.

Tags: ,
Posted in Web Standards | 5 Comments »

Replacing an old Flame

Wednesday, March 11th, 2009

article banner

Earlier this week (this morning) I had a sorted break up with long-time-used FireFox add-on TwitterFox. Admittedly, I didn’t really plan for it – it just happened one day. Then there I was using the Web interface to update my Tweets. Which is fine, I actually prefer the Web interface over all the desktop apps that have been built.

Breaking up is like knocking over a coke machine. You can’t do it in one push, you’ve got to rock it back and forth a few times, and then it goes over. - Jerry Seinfeld

I had been unhappy with TwitterFox for a while (almost since the beginning), I was just using it because I needed something, it was the best I found, and I didn’t feel like doing more research on it.

Overall, it was an OK experience because I feel like I know exactly what I want in a Twitter updater. I know what I liked about TwitterFox, and, most importantly, what I hated about it.

TwitterFox Pros and Cons

Pros
  • Presence – I have a browser open all day, and it’s right there, very fast to update, not a separate app eating up all my RAM
  • @replies – It usually caught my @replies even when I wasn’t the 1st @ listed in a tweet
Cons
  • Pop ups – I hate the intermittent pop ups of tweet. I’m sure it can be turned off, but I hated it
  • Pop up interval – on the off chance that I wanted to read a tweet as it popped up, if the text was long, it didn’t stay popped up long enough to read. Then I’d have to stop and go read the tweet
  • Lazy – it stopped catching all my @replies (the last month or so).
  • Replying – the way replies functioned bothered the crap out of me
  • I just didn’t like it.

Researching replacements

Just by looking at some people I follow on Twitter, I came up with a pretty good list of TwitterFox alternatives to investigate.

Apps

I don’t like the external apps for Twitter updates, but I’m going to give them all a try and see if I can get into it:

In-browser options

That’s what I’m planning to look in to right now. Are there any I missed? I’m open to pretty much anything right now. I was with TwitterFox for a while (maybe a year?) and generally not pleased with it, so I want to make sure to find something that really fits.

Tags:
Posted in social | 10 Comments »

|

New from the blog

Are My Sites Up? authenticjobs.com