An Event Apart
November 2nd, 2010 by Matt Haff
Jeff Veen, author, Art & Science of Web Design
Turns out that the fundamental principles that led to the success of the web will lead you there, too. Drawing on 15 years of web design and development experience, Jeff will take you on a guided tour of what makes things work on this amazing platform we’re all building together. You’ll learn how to stop selling ice, why web browsers work the way they do, and where Rupert Murdoch can put his business model.
CD’s were the stuff until mp3 was made – mp3 player won out…
video codecs were the stuff until flash came out – YouTube won out…
18 web safe fonts were the stuff until @font-family came out – @font-family won out…
Consensus = code
Value = users x users
information = free
Rough Consensus Running Code
Markup has to be separated from style. It takes multiple people submitting their ideas about how code should be, ultimately the best is chosen and history is made!
The faster you can put out stuff to people and gather feedback the faster you can learn.
“If you’re not embarrassed when you ship your product, you waited too long” – Reid Hoffman
The value of the network equals the square of the number of users.
Information wants to be free
…within the right context. How easy is it to copy a movie? Takes 2 clicks and now you just broke a ton of laws… Share that with a friend, and you just broke a ton more laws… But that’s how the internet works?!
Rivalrous - when a product is consumed it can’t be consumed again.
Excludable - prevent access to those who don’t pay.
Non-Rivalrous & Non-Excludable – Everything that you can make digital… can’t be prevented and will never go away.
This is why newspapers, music industry, movie industry, etc. are all having issues because now everything is digital and easy to be copied.
This doesn’t mean it’s good, it just means that if you find your product in that kind of description, find out a way to give something for free – which will give you a competitive advantage.
An Event Apart, Web Design
November 2nd, 2010 by Matt Haff
Ethan Marcotte, co-author, Handcrafted CSS and Designing With Web Standards, 3rd Edition
“The Way is shaped by use, but then the shape is lost.” Our sites are accessed by an increasing array of devices and browsers, and our users deserve a quality experience no matter how large (or small) their display. Are our designs ready? Explore sites that think beyond the desktop and have successfully adapted to their users’ habits. Ethan will also discuss how bring an extra level of craftsmanship to our page layouts, and revisit popular CSS techniques in this ever-changing environment.
Responsive Architecture
Moving from being unchanged spaces, to reshaping to accommodate for what the people need.
Responsive Web Design is: A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout?
The Flexible Grid
Grids have been used as long as print was in use. Grids began to pick up speed online, however they were all static widths…What we want is a flexible grid that works for any screen size.
body {font-size:100%} Which sets the default font size to 16px. Then using the formula Target / Context = Result (em).
Fluid Grids: Target / Context = Result (em)
Flexible Media
img {max-width:100%;} which keeps the image no bigger than the container that it goes inside of.
video, audio, object {max-width:100%;} which does the same for video, audio, anything…
This stuff works in everything except for IE 7 and below. Ways around that using proprietary css selectors from IE but I’m not gonna get into it 
Responsive Design
Changing the design based on the size of screen. This way you can serve the same website but if it is a smaller browser window then alter the layout to work better, or choose not to display it. See more about this here: Everything Old Is New Again
This works in Mobile WebKit and most modern browsers.
Patches to work around the older browsers here: http://code.google.com/p/css3-mediaqueries-js/
Is responsive design right for your project? Shared goals between contexts? If so then yeah it might be the right response… If not, then try it a different way.
An Event Apart, Web Design
November 2nd, 2010 by Matt Haff
Andy Clarke, author, Transcending CSS
Take an uncompromising look at how to make the most from modern design tools and browsers, up-to-date techniques and processes. In this practical, design-focused talk, Andy will discuss the “how” as well as the “why,” and challenge your preconceptions to help you make better work for the web. Learn the most modern, forward-moving, and sometimes experimental CSS techniques, and why a forward looking approach to CSS will pay real dividends.
What’s Holding Us Back?
Misconceptions, Preconceptions…
When will it be safe to use this awesomeness in our stuff? When will it be standard? Implementation comes before the standard…not the other way around.
There is no one CSS3 specification – the priorities are not for helping us, it’s all about the browsers priorities and what gives them the competitive edge.
Progressive Enhancement - held up as the “ideal way” to build websites… This came into play 7 years ago!
“It builds for the least capable devices first, then moves on to enhance those documents to allow a richer experience for those users with modern graphical browser software.” – Steve Champeon
We should be designing for the best browsers first, and then thinking intelligently about what should happen when or if the website is accessed by another browser that doesn’t support particular features… This way we aren’t limiting ourselves by trying to reach up from the least capable device.
We should be using our skillsets to create amazing designs and experiences based around what the newest most advanced browser support. This is where Graceful Degradation comes in… I mean think about it, when you are adding your fonts through CSS, you put the best font first and the crappy stuff later!
Hardboiled HTML
Just use the HTML to describe the base of the content, not the design. This allows us to be much more flexible with our designs.
Using modernizr you can use HTML5 and CSS3 in all your sites even those that don’t support it yet.
Using :nth-of-type you can make sure it works regardless if more content gets added in that would normally jack up :nth-child.
Use selectivizr to add CSS3 pseudo classes to IE 6-8 just by including the JS on your page.
What Does Browser Testing Mean?
It raises the question of what we show our bosses, our clients. No longer do we need to waste our time trying to make different browsers look identical. We need to reach for the most advanced browser, and gracefully degrade to the older browsers.
There are ways to work smarter, without being limited by the browsers and the rules that we have put on ourselves. Standards should be there to inform what we do, not to constrain what we do.
Web geeks are the only ones that look at the site in multiple browsers…Nobody else cares about it! Most of them don’t even know there is more than one browser out there.
An Event Apart, User Experience
November 2nd, 2010 by Matt Haff
Aarron Walter, author, Building Findable Websites
Humans, though cute and cuddly, are not without their flaws, which makes it a challenge to design for them. By understanding how the wet, mushy processor works in these hairy little devils, you can design interfaces and web experiences that will have them hopelessly devoted to your brand. Aarron will introduce you to the emotional usability principle—a design axiom that identifies a strong connection between human emotion and perceived usability. Through real-world examples, you’ll learn practical interface design techniques that will make your sites and applications more engaging to the humans they serve.
Change
Humans need this stuff - physiological, safety, love/belonging, esteem, self-actualization.
We are going from being private to very public about who we are. Social Media is what changed all of this…
What’s our relationship to computers?
Humans need this stuff - functional, reliable, usable, pleasurable
Usable = edible… it’s not hard to make stuff that is usable, that would be like a chef working to make something edible.
Pleasurable = make something boring pleasurable by adding a personality…a platform for emotion.
Contrast = cost/benefit helps people to determine if something is good for me or bad for me.
Emotion = people will forgive your shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.
Personality = invites empathy. Check out Feathers-tweets, by giving a personality to an app you can create a progressively enhanced user experience. At the same time it’s imperative to know that before your application can create an emotional relationship with the user it must get the basics right.
Treats = layering treats throughout an interface can make it even more fun. It cannot come at the expense of the usability of your product/site.
Conditioning = get people used to your personality and you can train them to have a specific kind of condition.
Discovery = having little fun stuff throughout the site (Mailchimp login screens, stretch monkey arm)
Forgiveness = If something is wrong, give them back something that shows that you care.
Limits = Attention is finite… don’t add a billion things to the home page, it needs to be really direct and easy to understand what you should be doing on the site. People aren’t lazy, they are looking for the path of least resistance.
Bribery = If it’s tricky then bribe them into becoming invested… Dropbox, you get 250MB FREE for doing a few tasks
Risk = party poopers… sometimes people don’t want the extras, you can bypass this by being honest about who you are and not changing in order to make everyone happy.
