Categories
SXSW '08 SXSW '10

Managing Your Content Management System

Monday, March 15, 2010
Presenters:
Alex Will – Spoonfed Media
Henry Erskine Crum – Spoonfed Media

Description:
An effective content management system is a must for any content-based web service. This technical session will discuss elements of designing and building a custom CMS that leverages technology and existing web data from sources such as Flickr and Wikipedia to automate research and increase time spent writing original content.

  • Most important factors when making a decision about a CMS: context of your content business and process of content production.
  • Tools to evaluate what CMS you need for your business
  • "A computer based system that allows one or more people to manage the online publication, storage and display of content."

Landscape:
Many CMS systems out there for many different types of content (from many sources). The focus of these will be mainly people-created editorial content.

The production process
This process is very important and often overlooked.

Data collection (going out and getting the raw data) >
Workflow management (assigning tasks and divvy up labor) >
Research (follow up with different sources) >
Write >
Review >
Publish!

Why did we go down the custom CMS route?

  • Events are a moving target with a finite shelf-life
  • Incentive structure for UGC in events is small
  • Opinionated content for target market

What didn’t matter?

  • Amount of data (most CMSs can handle all amounts of data)
  • Size of web site
  • Complexity of idea

What did matter?

  • Data aggregation from multiple sources
  • Workflow management between editors
  • Reducing research time per event
  • Search Engine Optimization (made it really easy in the system)
  • Lead generation and contact management

Getting the raw data:

  • Automate and aggregate non-editorial elements (have it easy to access and it comes together somewhat automatically)
  • Create different processes for different parts of the information
  • Dealing with issues of quality and duplication (example: deciding what news stories to write real-time)

Workflow management

  • Dividing tasks, vertically segmenting, prioritizing and assigning responsibility
  • Incorporate automated steps into workflow process
  • Reduce or remove the time that is spent by humans prioritizing the information (bigger events need longer lead time)

Reducing research time: the golden ratio

  • Give editors research resources without leaving the page: wikipedia, flickr, and google news
  • Rise of real-time news as part of this process increases relevancy and quality
  • Re-purposing data

Thinking about SEO

  • Tools to aid editors in the production of content for SEO (keyword research)
  • Suggested linking (try to pull in other pages inside or outside similar links to make it as efficient as possible)
  • Major benefits if you’re not using off-the-shelf systems
Categories
SXSW '08 SXSW '10

Wow, That’s Cool… Fun With HTML5 Video

Sunday, March 14, 2010
Presenters:
Michael Dale – Kaltura Wikimedia
Christopher Blizzard – Mozilla Corporation

Description:
Using the video tag in HTML5, developers can do all sorts of things that are hard or impossible with plugins. In this presentation, Mozilla will show the best and most interesting hacks entered into OVA’s Open Video Contest-because when the webmonkeys unleash their creativity, things get interesting.

  • Why we video matters
  • Examples of creativity
  • Quick walk through of how to use HTML5 video

Why do we care?
Flash works, Youtube is there.
Flash and video plugins are missing something that the web has. The web has a bigger creativity surrounding it.
It lets people learn from each other and build on each other’s work (view source).
5000 developers surveyed. A huge percentage are self-taught.
Ideas and implementations spread from person to person and site to site.
This transparency is really important and should move into the video space.

http://jiilion.com/sublime/video – a really nice HTML5 video implementation

HTML5 will hopefully accelerate the pace of development of video on the web. Adobe is OK, but still a bit closed and awkward to use. It will hopefully invigorate change in the video realm w/out stagnation. Video should be really well connected to other things on the web. "Either you use flash, or you use web standards."

How is these all connected to the web?
Add animation of video windows and layer on top of video playing.
You can put drag/drop on top of a video (demo had color card moving around an image file on top of video).

Example:
<video src="shuttle.ogv"></video> – plain ole video

<video controls="true">
<source type="video/ogg" src="shuttle.ogv"/>
<source type="video/mp4" src="shuttle.mp4"/>
Your browser doesn’t suport HTML video. (You could also put flash or other video embedding in here.)
</video>

Categories
SXSW '10

HTML5: Tales from the Development Trenches

Sunday, March 14, 2010
Presenters:
Bruce Lawson – Opera ASA
Martin Kliehm – namics (deutschland) gmbh

Description:
HTML5 is coming. Originally called "web applications 1.0", it brings new semantics, JavaScript APIs for drag and drop, offline storage, generating images, plugin-free video and form validation. It’s upset semantic web advocates, accessibility evangelists and baffled developers. Cut through the crap: learn what it is and what it does.

Tales from development trenches

  • Tales of the development OF HTML5
  • Tales of developing WITH HTML5

1998-1999 – the future would be XML (XHTML). 1999 was the "last" 4.01 HTML Spec.

Web Applications 1.0 (a better HTML)

  • 2003: Started by Opera
  • Then Mozilla (Apple "cheering from the sidelines")
  • WHATWG – web height and text working group
  • (Later: Google, Microsoft involved)
  • All 5 browser manufacturers working together
  • 2006: W3C restarts HTML, using Web Applications 1.0 as the basis for "HTML 5"
  • 2009: XHTML2 Killed
  • 2010 WHAT-WG goes to last call
  • Not yet completed, but getting there
  • Giant spec (900 pages) – only 300 worth looking at
  • Already some implementations of some parts

What is HTML 5?
Not CSS3, not SVG, not geolocation, not MathML, not XHR
HTML5 is an evolution. There are many extras in HTML5 on top of presentational – added ‘bling’ – The evolution has gone from "chimp to pimp"
It extends the language to better support web applications, since that is one of the directions the web is going in and is one of the areas least well served by HTML so far. This puts HTML in direct competition with other technologies indended for applications deployed over the web, in particular Flash and Silverlight
They probably won’t take them over, but competition is always good.

What do Open Standards matter?
The most important program on your computer is your web browser.
Let’s you be social with your friend, write documents, email, etc.
The web is way too important an application to be in the hands of only one vendor – we NEED and open standard.

HTML5 defines what people really want to do.
Survey the code of 3.5 million pages and find the common themes.

  1. header
  2. content
  3. nav
  4. article
  5. footer

All of these going into HTML vs. naming a div in these common elements.

HTML5 Forms (webforms 2)
Coding form validation isn’t much fun. It’s mainly done with JS right now.
Form validation is built into HTML5

< input name=foo type=number min=5 max=15 step=3>
This provides a number field with a max limit

<input name=foo type=url required>
Will require a url and require a value

<input name=foo type=date>
You get the cool little pop-up calendar right from the browser!!! (impressive!)

Canvas
Immediate graphics mode without plugins

Video
<video> element exposes a simple API for adding video to HTML.
<video src=video.ogv </video>
Controls can/are built into the browser. It is totally styleable with CSS. You can shrink/enlarge thumbnail etc.
Adding captions is easy (start/end captions).

Take Homes

  • HTML5 doesn’t break the web
  • Is sometimes and ugly kludge
  • Can be serialized as XML: XHTML5
  • Defines HTML error-handling to keep consistent DOM
  • Adds new elements and APIs for open standard apps
  • Is coming soon… to a browser near you.

Input Types
<input type="email">
it defaults to a text field for a browser that doesn’t support it.
also validates that it is an email

<input type="search" />
<input type="buttom" />
<input type="text" role="search" />

Geolocation
look for navigator.geolocation and determine current position and display.

Orientation
http://is.gd/ax2Lu – accesses the accelerometer in a laptop and tilts via canvas

Questions:
How on board is Microsoft?
They should be coming on IE soon… there will also be a feature detection that will help you determine what a browser can handle. It should degrade easily if a browser doesn’t handle something new.

Categories
SXSW '10

Exploiting Chaos — How to Spark Innovation During Times of Change

Sunday, March 14, 2010 9:30am
Presenter:
Jeremy GutscheTrendHunter.com

Description:
One of North America’s hottest keynote speakers, the founder of TrendHunter.com, reveals powerful strategies for thriving in any economic climate. DID YOU KNOW THAT Hewlett-Packard, Disney, Hyatt, MTV, CNN, Microsoft, Burger King, and GE all started during periods of economic recession? Periods of uncertainty fuel tremendous opportunity, but the deck gets reshuffled and the rules of the game get changed. As Guy Kawasaki notes, "EXPLOITING CHAOS is a quintessential roadmap for all those who seek opportunity during times of change."

Popular is NOT Cool!
What do you find when you look for cool?

Microtrends and viral inspiration surrounds us. Chaos makes inspiration distracting.
How do we make sense of the noise?

What’s more important, culture or strategy
Culture eats strategy for breakfast. No matter how good your strategy is, the culture of your company is the most important to make the strategy happen.

Perspective:
Smith Corona (the best typewriter in the world!)
Their website: "On the 8th day, God created Smith Corona." They have a 100 year history of innovation. 1989 they had $500 million (they could just buy out someone if they needed a computer). They got into a relationship with Acer (killed the deal 1 yr leater). Smith Corona went Bankrupt in 1995. Acer still living today. The point: Situational framing dictates.

Specifically what are you trying to do?

Crisis = Opportunity
In crisis people are more careful in what they buy. Fortune Magazine was started in the great depression. When people lost their jobs, Fortune showed what is happening behind the boardroom doors, and people were interested in this.

Forced Failure
Successful organizations innovate to "optomize" position on their "hill," but to find bigger "hills," one must fail. When you’re good, everything else seems like a failure by comparison.

Win like you’re used to it, lose like you enjoy it.

Customer Obsession
Who litters on the side of the road? Young Males who drive pickup trucks. The crying native American didn’t convince them. The new slogan: Don’t Mess with Texas!" This is how to keep the message connected today. When making a cultural connection you induce change. 72% decrease in littering. You need to observe customers… in their zone. Interact with them.

BP Oil and Gas Observations

  • Teenage boys ‘group shot’ at gas stations.
  • They get excited about energy drinks
  • Rockstar Fuel!
  • Find a way to be simply irrisistable to a certain group of people.

There is no point of innovating if you think you already know the answer. Try to disprove what you think you know and find different patterns.

Infectious Marketing

  • 3 ways to cultivate infection
  • Viral Creations
    The half-suit – When you create something today that connects, your story will travel faster than ever before. You can look at what is becoming viral, and package what you’re selling into something similar. Focus in on what you do in 7 words or less.
    Story obsession:
    1. Simple – supercharge word of mouth
    2. Direct – why should I choose you?
    3. Supercharged – the i have to tell someone test
  • Viral Mediums
  • Well packaged story

JP Morgan’s Lesson:
Wake up every day and do 2 things – list of things you actually need to do, and actually do them.

Viral trends + methodical innovation, generate ideas harness creativity ultimately exploit chaos

Categories
SXSW '10

Sleeping Giants: Digital Awakens TV and Media

Saturday, March 13, 2010 5:0pm
Presenters:
Domenic Venuto – Razorfish
Andrew Pimentel – Razorfish

Description:
Television has looked pretty much the same since its inception in the early 40s, give or take a few rabbit ears and a hundred pounds. But, the revolution has already begun. Recently Razorfish has been doing some significant research on the importance television plays in our lives, and what we think the fundamental shift that is taking place in TV and media, in general, will mean for advertising and marketers.
As a digital agency, you might expect us to forecast the death of TV (and :30 spots), but you’d be wrong. We think TV’s DNA will be alive and well, you just might not recognize it from how it looks today, and this digital impact will have major implications, not just for TV, but for media as a whole: technology, content development, distribution, advertising and brands. This panel is sponsored by Razorfish.

TV is not dead – the 0:30 spot is not dead.
TV is alive and well, it’s here to stay. Welcome to the Future of TV.

Razorfish creates experiences that build businesses. Brand Marketing, Web Development, Strategy & Analytics.

Razorfish watched people without TV – tried to remove TV from a household. 7 days was too much, 5 was too much, 2 was the only they could get for the (paid) study. What are the genes that describe people’s behavior with TV?

  1. Research finding: the DNA of TV
  2. What TV will look like in 5 years
  3. What it means to us

Research:
How did poeple respond to the loss of TV? What did they do with their time? People who grew up with the internet, people who watched online.

Study 1 Depravation:
Traditional
Handheld devices (phones, video players etc).
Played cards, games, piano

Bleeding Edgers:
Saturday nigh, they’d VJ Youtube Videos on Apple TV
Business trip – streaming NFL to mobile phone
Mom/Daughter streaming youtube videos on laptop (daughter was asking for different children’s shows)

TV’s DNA in 9 Genes

  1. Relaxation: zoning out – a primary need that TV serves
  2. Conversation – water cooler currency, starts conversations
  3. Events: currency, what’s happening now.
  4. Social: an excuse to be together – families moved around the next largest screen in the house (laptop)
  5. Stimulation: learning something – educates us
  6. Vicarious Experiences: escapism
  7. Passion Points – follow sports
  8. Participation – txt through american idol
  9. Consumerism – keep up with products, styles, and trends.

Whatever we do w/the future of TV, we need these genes
The internet is also changing expectations.

Fast forward 5 years – what will TV look like?

  • Future servers the couch TV better by learning and giving them content appropriately. You’re presented something based on the mode you’re in, "show me something I’ll like." Flip through various channels.
  • What else is on? Show us things we’ve liked or might like based on past viewing. What is popular based on what our friends like?
  • Drill into content by topic or mood – also by how much time we have.
  • The chronological channels based on a time of day is gone. You don’t have to know to record something, it’s just available.

The Social Butterfly:

  • The TV recognizes our face and knows our friends.
  • We can see what they’re watching.
  • We can see what our friends have hit the "like" button on.
  • We can watch a dynamic list of videos in one show at once.
  • TV is in the cloud, we can pull it in wherever we are. It will be available where we left off and have what we saved.

The Culture Vulture:

  • Marketers can engage with audiences. There will still be 30sec spots, just fewer.
  • Apps will be impeded and in return for an add app, we get additional content (and less actual commercial interruptions).
  • The content we’ve created on TV (vote), it works its way back into our social networking profiles.

The Fan:

  • Tune into Sports Center, a feed along the bottom shows us our fantasy baseball team.
  • There are gloats – we can send them to our friends when our team does something good against their team.
  • A gaming console is built into the TV, we can play a game (hit off the new pitcher) from the TV.
  • Rock Band game bubbles up to the social network, and bubbled up to actual TV (idol etc).

How do we make this happen?
Hulu is already there – independent of schedule/time.
Full-body motion capture is already there (for interaction w/TV)
Apple TV and Boxee scrape the web for content and bring it together

What it means to us

  • Content will need to be liked, or it won’t be watched.
  • The 0:30 ad is a random number – could be longer and more engaging.
  • We will know who we’re talking to (ads), online will blend with offline data.
  • People will be channels based on popularity
  • Everything will work across devices and be portable.
  • We will not control the conversation.
  • Our creativity must exist in real-time if we’re going to react to live events. Ad creation needs to be closer to real-time.
  • TV and web will blend in ways we can’t see today.
Categories
SXSW '10

Making Sense of Priacy and Publicity

Saturday, March 13, 2010 2:00pm
Presenters:
Danah Boyd – Microsoft Research

Description:
The SXSW Interactive Festival is very excited that danah boyd will serve as the Opening Speaker for the 2010 event. One of the world’s foremost authorities on social networks, boyd works at Microsoft Research New England and also serves as a Fellow at the Harvard University Berkman Center for Internet and Society. boyd recently completed her PhD in the School of Information at the University of California-Berkeley.
The Opening Remarks will be simulcast in ACC Level 1, Ballroom A / ACC Level 3, Room 9ABC / ACC Level 4, Ballroom D / ACC Level 4, Room 18ABCD

How does social media transform society.
Some thing it is great (techies).
Some think it is destroying society.
We are all seeing how this shapes society.

The intersection of privacy and publicity – Privacy == Control.
Privacy IS NOT DEAD. People still care about it. What privacy means may not be what you think. Understand the social setting and the context and how to behind inside that. If people don’t feel they have control of their environment, they scream foul.

Google Buzz
This shows that people care about privacy. They took a hit on the trust they have (google). It was launched inside Gmail, and created a profile, and connected suggested users. It was publicly made available. There were all sorts our opt-outs available. The technology was not the failure here. Google made a public facing system inside one of the most private systems out there (email). Some people thought their email was being exposed to everyone in the world. Google assumed that people would opt-out if they didn’t want to participate. They didn’t quite understand the system, and just accepted the defaults. There was confusion that if you opt-out, you might be canceling your gmail account. Don’t throw people into the water and expect them to swim. Google assumed that they wanted all their contacts to come together. Just because people put these up there, doesn’t mean they want to put it all together. Just because people trust google, doesn’t mean they want that information used in other ways.
Online environments aren’t as stable as offline ones.

Facebook Default Changes
Select how things are shown. All the defaults were public. Most people (65%) didn’t read, and made it public. She has yet to find a person who knew exactly what their privacy settings were. Facebook made it’s site on trust, and now it’s gone. A big difference between public data and publicized data.

PII vs. PEI
Personally Identifiable Information – people don’t think about this
Personally Embarrassing Information – people think about this
Social bonding is based on PII – it’s how we connect with people.

Public by Default, Private Through Effort
Social media is the reverse. You now have to think how to make something private instead of how to make something public (normal real-world social).

How public or private is something?
When we make something public more public, we are sicking the paparazzi on us. How will the people feel when you remix their content and make it more public?

Facebook != Twitter
Twitter is more people who want to obtain audiences. Facebook is not used that way historically.

Chat Roulette
An odd mix between privacy and publicity. You get a random video chat with another person. It may be a fad, but the mashup between publicity and privacy isn’t. There will be more.

There is no rules, and everything is always changing either by social context or technology. How you negotiate it in one context will change on the next.

Parenting
The worst thing you can do is start with a conversation, "back in my day"
Figure out how to evolve the core essence of what privacy is, and what sort of control is needed in a particular environment. Ask questions, what are you trying to achieve? who do you think you’re talking to? what if something else was looking? Nobody is an expert – nobody knows how to navigate this yet.

Just because you can see someone, doesn’t mean they want to be seen by you.

Categories
SXSW '10

Designing the First Fifteen Minutes

March 13, 2010 12:30pm
Presenters:
Daniel Burka – Tiny Speck
Rob Goodlatte – Facebook Inc

Description:
That user who just signed up is about to bail. And a thousand other people just stopped in but didn’t even bother to register. Your product is great, but your users don’t stay long enough to find that out. The first fifteen minutes of your product are the most important. Learn from the successes, mistakes, and insights of designing new user experiences for products.
Twitter: #designfirst15min

"We design for ourselves first."
This falls flat when designing for new users – we’re only new users one time.

Facebook users started getting to Read Write Web and thought it was the FB login page.

Date before demanding commitment.
Get your users invested before you propose.

Get someone to use your application before making them set up an account – jobspice sets up your resume first, then sends you to create an account.

Indicate that whatever is over that signup wall is worth doing. If you have to go the oldschool route, be very fast at showing where the incentive is. Be sure to know what that incentive is p the ah-ha moment for your product.

Facebook changed their registration system to improve the signups and eliminate every distraction they could have. They push social ah-ha moments. You can suggest friends/photos for other people.

Feedback Cycles
Stolen from video games – Spore, the video game takes you from very simple to more complex, and the rewards become more sophisticated.
Mint.com has a small feedback for each field you fill out that says "good job" when you enter the correct data.

Games handle education really well – questing. We think a quest is just a fun thing to do, but it’s actually a way to sneak instructions into things. Don’t say "go do anything," what kind of anything?  Provide some kind of reward for doing work.

Tumblr signup process is really simple. Give your limited info, then straight into name and how to use it. You use the system, see how it works, and already created content in the span of 60 seconds.

See your new user experience with fresh eyes…
Run through the user experience a dozen times, and get people who have never seen it before and look at it through their eyes. Get newcomers invested right away. Get a user into the car for a test drive right away! Discover your core ah-ha moment in your product and get to it as soon as possible. Small goals go a long way.

Slides: slideshare.net/dburka

Categories
SXSW '10

Universities in the “Free” Era

Saturday, March 13, 2010 11:00am
Presenters:
Glenn Platt – Miami University Armstrong Institute for Interactive Media Studies
Peg Faimon – Miami University Design Collaborative

Description:
MIT, Yale, Stanford, and others put lectures online. Chris Anderson argues all university lectures should be free. From Academic Earth to TED, it’s free. So what is the value-add of a university education? What models of higher education will survive? How will universities leverage the social web to reinvent themselves?
Slides: http;//tinyurl.com/sxsw2010edslides

The university is the enduring institution that has spent it’s lifetime resting on its laurels.

Best metaphor: The folks who experimented with flight (crazy flying machines), you can imagine someone pedaling on one of these and going off a cliff. The cliff is so high and the ground is so far away that you can actually think you’re flying, but you’re actually falling. Higher ed thinks it is flying, but it is actually falling. There is a shake-down in higher ed on its way down the road.

What is the roll of higher education? How are universities in collapse?

What is the purpose of a university anyway?

  • The roll of higher education is to convey knowledge.
  • Create knowledge (research) – 10-50% of new products are developed by universities
  • Develop the person – what does an individual do in their free time and how does it shape them? This is possibly one of the larger rolls a university plays.
  • Contribute to society – global and local level
  • Signal ability – signal the quality of the person coming from that institution – Harvard lets in smart and lets out smart people
  • Seen innovation – moving things forward (working w/industry)

The System is Breaking Down

  • The cost is too high! – Average private university is $25k/yr, the inflation rate is significantly higher than the general public. State subsidies are rapidly going away. Many times dept it too high for students
  • You have to go to the mountain. – The need is fast disappearing. Many times a single center of knowledge isn’t going to work.
  • There is no control over the clock – you do it on their timetable and their schedule (average is 6 yrs for undergrad degree)
  • The "experts" are local – you can only access the best teachers on your campus – limited set of people you can interact with. Expertise lies in networks.
  • Universities change one funeral at a time – Tenure: After people have been there 6 years… they get to stay there FOREVER (say whatever they want, you can’t find them). Change management is a big impediment.
  • Faculty hire people just like themselves – many times people hiring aren’t looking for the future.
  • Tenure is broken – nobody wants to talk about this, even though it’s the elephant in the room.

What’s driving this breakdown?

  • Change in learning styles – people learn differently now. Learning styles aren’t being better identified.
  • Collapse of disciplinary structure – rise in interdisciplinary space.
  • Acceleration of K-12 – many things taught in college are now being taught in high school. Ohio: Senior to Sophomore, encourages students Sr. in HS to skip over freshman year in college and go to  with full year of credit.
  • Flattening of knowledge hierarchy
  • Students (+parents) as consumers – parent attitude on what to study and where to study – more of a consumer mindset. There are a lot of choices and many more ways to access those choices.
  • Employers active in curricula – many companies contract for degree programs specifically for them. Companies get to help design the curriculum (not always well).
  • Location independence – doesn’t matter where you are now
  • The internet!

Educational entrepreneurs have stepped in

  • Open courseware (MIT) – many universities have been opposed to this type of transparency. Many schools feel pressure to get involved just to stay competitive.
  • Itunes U/ Youtube Edu – stanford’s iphone dev course has been watched 5 million times! That’s an incredible reach
  • TED
  • Accessible education content (textbook options) – google books, flatworld, textbook revolution
  • Online learning networks – students connected to students for notes/guides/advising – cramster.com, GradeGuru, ShareNotes
  • Structured curricula – certificate programs, executive programs, grad coursework (w/out degree)
  • Online universities – probably the largest in this area – actual degrees online. University of the People, plan to have a full open free university available to the public. Open University. University of Phoenix, 150k MBA program students right now!

So how does the traditional university evolve?

  • It should be a fire hose of information. Anarchy of Wikipedia.
  • A professor should be an experience designer – try to get the user somewhere. What is the best way to get them there.
  • Project manager – professor working with their students as a project.
  • Angel investor – what would a VC partner do? How would you encourage someone to solve a problem? Get them the resources they need to get things done.
  • Curator – Make sense of the information out there. How does a student select what is valuable? Where is the good information?
  • Resource Allocator – make sure students have the resources they need to do what they need to do.
  • Life coach – "yes you can" motivator – get students to be active in their learning and show them the way.
  • Validator – needs to make sure students can communicate their value ignoring the place they got their education.

Where to begin

  • Experiential learning
  • Multi-institutional collaborations – need to interact with others, in different fields.
  • Train PhDs to think more contextually – teach them to teach!
  • Strategic industry and non-profit partnerships – engage those outside who need our assistance.
  • Get rid of tenure!
  • Student-driven inquiry
  • Facilitate collaboration – team teaching, encourage teachers to collaborate.
  • De-privilege institutional content – we need to share content.
  • Reward failure
  • Get rid of departments and focus on questions – what do we do about water? Structure around this vs. silos of departments.
  • Think like social entrepreneurs
  • Give more than you get – contribute to the open commons and back to the community.
  • Hire people who think this way (forward thinking w/qualities above)
Categories
SXSW '10

Web Content Management Systems from a Designer’s Perspective

Saturday, March 13, 2010 9:30am
Presenters:
Scott Fegette – Adobe
Chris CharltonXTND.US

The biggest shift in CMS since the 90’s is designers coming over in droves from the static world.

Why CMS?

  • Rich Functionality
  • Content Centralization
  • Client Management – great way hand over the keys to someone
  • Designer/Developer Communities – lots of shared code and expertise
  • Open Platform

The Big Four

  • Wordpress – simple
  • Drupal – very powerful
  • Joomla – a bit more designer focused
  • Expression Engine – very rich (commercial)

Decisions, Decisions

  • Run-time System – all live, pages generated when called for
  • Publish-time system – all the heavy lifting is done when you publish – a bit static, and maybe more robust
  • Style Management
  • Deployment – critical part when deciding, how difficult is it to get out there and maintain

Static Design

Static design starts to break down in a CMS, not just a design wrapper for flat pages any more.

Design States

  • Navigation States – buttons/breadcrumbs/drop-down menus need to be designed around
  • Presentational States – the guts of the CMS, all the pages/posts of the site.
  • Logical States – session login, showing slightly different content based on roll
  • Dynamic Content – not a print layout. You need to adapt to the type of content being desgned

Themeing

  • Encapsulated design system
  • Fast design iteration – allow you to create a design quickly, or swap through them to see how different things interact. It’s easy to mock up certain things (larger headlines) and go back and fourth to see how things react.

What’s in a theme?

  • System-specific metadata
    Wordpress – CSS comments
    Drupal – .info file
  • Physical directory structure
  • Markup/Logic/CSS assets
  • External Modules (as required)

Theming Wokflow A

  • Use baseline theme for markup
  • Design primarily in CSS layer
  • Working ‘within the box’ – pushing things in the direction they need vs. from scratch
  • No control over dynamic classes

Theming Workflow B

  • Start from HTML/CSS comp
  • Integrate directly into PHP
  • Less constraints, more risk
  • Requires knowledge of system architecture

Markup Challenges

  • Generated vs. On-disk markup
  • Code Fragmentation
  • Dynamic Styles
  • Real-time previewing issues

CSS Challenges

  • Inline vs. Included Styles
  • Themes vs. Core
  • Module CSS

Being Efficient

  • Encapsulated CSS Layer
  • Flexible, Straightforward Markup
  • Comments & Generated Code
  • Version Control (easy ti back out quickly if something gets messed up)
  • Subthemes and Design Abstraction

Building Better Mousetraps

  • Saving and previewing app states
  • Real time DOM Access
  • Dynamically-related Assets
  • Framework-specific configuration
  • Work more freely

The Technical Stuff…

  • HTML/XHTML (markup) + CSS
  • JavaScript (optional)
  • Basic PHP
  • Source Code Management (subversion – SVN)
  • Multiple environments discipline (local, dev, staging, live)
Categories
SXSW '10

Simple Steps to Great Web Design

Friday, March 12, 2010 5:00pm Presenters: Matthew Smith – Squared Eye Description: Creating beautiful web design is largely a matter of mastering a handful of simple techniques. The best designs employ systems of color, contrast, typography, and white space to achieve hierarchy, balance, and rhythm. The rest is just ingenuity and creativity. Matthew will review dozens of great and nearly great sites, explaining how to raise the bar on your next design. Definitions (let’s define them) Web Design: Official: http://en.wikipedia.org/wiki/Web_design Squared Eye: helps content get stuff done – on the web Content is extremely important – Frank Lloyd Right just designed the house on paper, and a bunch of builders actually built it. The thing that takes a design home is the content. Great Web design: helps content get stuff done – on the web with pleasure Where other places are zigging, you zag, find your niche – "Spank that niche!" Simple Steps: Everything starts with Knowing not the brand, but the client. Blueskyresumes.com They needed a whole brand upheaval, and not simply a website. It is important to really get to know them and understand their business and their brand. What do they do, and how can they do it better? (http://www.clearlycogent.com/) You must know their Audience, and know their people. Get to know their business goals, know their audience. Find out all about them. Know their content. You need to be sketching, doing IA, making framework that you’re going to be designing on. Make sure the content works and flows correctly. It’s one of the core elements that will take your designs from decent to great. --The fire alarm just went off in the convention center, so unfortunately this session comes to an early close--