MASS MEDIA (in waves)
Print, Recordings, Cinema, Radio, Television, Internet, Mobile
Mobile is the new Mass Media
It certainly is mass and massive. More mobile devices (by far) every day than babies born on the planet. Mobile devices are eating into our personal computing shares.
New waves of mobile media eat all previous media waves. Mobile has indeed eaten all previous forms.
A new form of media always introduces new features or characteristics! Always on, portable, digital, social, augmented reality… the list goes on.
We have to recognize that the mobile is not a desktop. Our first inclinations are to copy what we did before (in the last wave). It takes a while to shed old paradigms.
StumbleUpon has been huge on mobile (as well as Kayak). They are doing a complete relaunch based on what they’ve learned on mobile.
Take what we know on the desktop web (today) and adapt it and optimize it for the mobile (today) and move forward (tomorrow).
Logins
passwords – forgotten passwords are rarely shown on mobile login pages.
Don’t remove things that are critical.
Use input and types and attributes. (autocapitalize, autocomplete)
show passwords – “Masking passwords doesn’t even increase security, but it does cost you business due to login failures.” -Jakob Nielsen
input masks
save passwords and let users login without a password (use single sign-on via: facebook, twitter…)
Set default to smarter option (like organ donors).
Adapt and optimize what we were doing yesterday and apply it to today. We can even make these things apply to yesterday!
Think to tomorrow: touch gestures, facial recognition, sms authentication
Step back and think about problems we’ve already solved. But use new techniques that have evolved since we’ve come up with the standard solutions we are regurgitation constantly without rethinking the problem. We can do much better now, but we’re so used to throwing the same solution at the same problem there is no more thinking about it. We don’t need to inherit the same issues we already have, let’s solve them by rethinking the original solution.
Why bother?
This new mobile mass media is always on, always on them and available at point of inspiration!
Checkout
3 of 4 carts were abandoned in 2011!
We should reduce effort:
Removing unnecessary questions
Keep people on the keyboard, combine fields (first name + last name = full name)
Hide irrelevant controls (until they need them)
Set input types( type=tel ) use input masks, ignore bad characters. Credit card use input-type=tel for the numberpad.
Keep people on their keys
Check out square to see the improved cc fields.
Progressive Enhancements – use what best fits the device that’s being used.
Checkout for the futures:
Contacts API, Location Detection, Self-checkout and Scanning
Korean grocery shopping in the subway! Tesco, scan qr codes and groceries are delivered automatically.
Mobile is a massive new medium! It forces us to adapt and optimize our solutions and moves us towards the future. We should push for better device apis! Let’s agitate the blockers and the bug guys: Apple and Google. PhoneGap lets us do all these things already using existing standards! Tomorrow Today.
Mobile and touch should be revolutionizing design and user experience.
We don’t want to touch a tiny link or button. Back button is just stupid. Fitz’s Law, make things fat proximal targets for easy touching.
People are lazy, let’s as designers LET people be lazy! Maybe even use the whole screen as your control.
Eliminate buttons if we can! Buttons aren’t evil, they just aren’t as relevant for touch. Gestures are the keyboard shortcuts of touch!
Big screens invite big gestures, don’t make people hit little specific buttons or links. Buttons are a HACK. Light switches are not intuitive, they are a learned behavior, an inspired hack introducing a middle man.
We don’t need an abstraction layer for uI controls. We can directly manipulate the object by touch.
The new Windows OS is leaning this way! Twitter iPad app is doing this. Rather than a back button or a UI, we just swipe our way through content.
The web sucks as coding gestures and is like the red-headed stepchild of interaction design. It trails behind proprietary technology. Flash helps bring standards, but we’re still waiting. But we can speed that process and push standards and agitating for more and better. We need to push for support for gestures (for now all we have is touchstart, touchmove and touchend: which aren’t very helpful and not widely supported).
The gesture conventions are tap and swipe. Plus there’s the emulator layer of the browser. As a community we need to figure out together what conventions there are and how to best apply them. It’s not easy to go beyone simple taps and swipes. jQuery mobile and Sencha touch are libraries that give us more events – these are really tuned with web-kit and are pretty big frameworks meant for creating html5 apps along the lines of PhoneGap. Touchy.js – more lightweight, but there are still some big holes.
http://bit.ly/ikeatouch – Direct interaction with the content itself.
http://bit.ly/ios-clear – Playing with objects as the interface.
Ipad App Touchup – lets you paint patters on images, but rather than adjusting brush size you adjust canvas size and the brush is always the size of your finger.
For mobile: clarity trumps density. The more features and controls we have, the more things get in the way. The more power we give people sometimes the more paralyzed they become. Swiss army giant pocket knife.
Gestures are invisible. So how do you find out (or instruct) about these controls – Finding what you can’t see. Create realistic user interfaces, with a little help, people will learn to work interfaces. Nearly everything has to be learned or taught: snooze alarm, qwerty keyboard. We always start with a physical reference. Social signifiers or cultural: who knows the salt vs pepper shakers? The only thing that matters is what the person that filled them thinks! Cut out the middle men and let the content be the control. Clear salt and pepper shakers! Let people interact with the content and not the buttons.
The medium is the message, The message is the medium.
It needs to become intuitive. Nature doesn’t have instructions, look at a toddler, we figure things out as we go. Use a book metaphor, but don’t break conventions. EMBRACE the metaphor! Don’t make me tap buttons if the interface makes me think otherwise. There is a digital advantage to random access navigation.
Toddlers are learning how to use iPads faster than adults. We’ve learned incorrect gestures and are not used to thinking about them. Approach apps and designs as we’re building them for children. Video games are great at teaching you how to use the interface, not with a manual, but by drawing you through the experience by:
coaching (with active discovery) – we learn by doing. Things that move can perhaps be moved by users.
leveling up – when you learn something, it moves on, demonstrate gradual progressive controls
power ups – efficiencies in the hands of experts. keyboard shortcuts. achievement based unlock tools by learning
We should be generously talking to each other about how were trying to use our gestures. It’s exciting to be involved in inventing the futures of how we’ll be using tools, be involved in the discussion. Have empathy for the users.
Started helping facebook optimize thier site and they had 1.9MB of css loading. The same color showing up hundreds of times. Many many color statements and declarations.
!important declarations get dangerous. Sites found to have over 500 !important declarations!
float is a serious problem when there are a lot of them. It’s better to use some sort of abstraction rather than floating everything for layout.
font-size: there should not be a need for more than half a dozen size declarations, use abstraction!
insanity: doing the same thing over and over and expecting different results.
We all have this problem of duplication. CSS (like JS) will let you do anything you want (even if it’s stupid). But we don’t have to do stupid things!
New Best practices
Pixels for fonts: became frowned on with ie6, but all modern browsers use pixels, ems and percentages just fine. Why not avoid percentage and ems because they have significant drawbacks and compounding effects.
Adding extra syntax/markup: separations of concerns – make functionality overlap as little as possible. Solve one problem at a time and use extra mark-up judiciously (don’t go nuts with dives, but also don’t strip out too much and introduce bugs).
Semantics: class names and ids are not usually read by end users, so let’s make sure class names and ids work well for developers. More is not always better. Create abstractions that solve problems one time. Don’t couple CSS too tightly to the content or the display. DRY (Don’t Repeat Yourself – Every piece of knowledge must have a single, unambiguous, authoritative representation within a system).
Media block (like a SLAT in dan’s talk). Separate structure from chrome (design). May have some extra css class names or divs, but it will cut html and css overall.
Classitis: use specificity to accurately target elements. Class order in attribute doesn’t matter, but order in the actually cascade. Specificity grows over time and you end up coding via firebug. !important is like nuclear trump in CSS. Avoid the nulcear option: keep specificity low: avoid IDs, inline styles, !important, and very complex selectors. Apply classes to the element we are trying to affect (not to a parent node). Use class “h6” along with h3 elements for visual and code semantics to play nicely.
Great developers can build amazing things if we move worst-best practices out of our way.
Cormorant trained to fish for the fishermen. The fishermen tie bands around the birds necks that are. Fishermen fish at night, using lamps they attract bugs, which attract fish, and the cormorant get to fish but cant swallow them and the fishermen take the fish.
Browser vendors are promising us new CSS tools, but don’t actually let us use them. It’s a big tease! Cormorinths are either fish in the hand, diving for fish or still sitting on the shore. A lot of really cool stuff we’ve just been teased with and told we can’t quite use yet.
(SASS and LESS will any and all prefixes.)
Transforms: Go for them right now! Widely supported and mainly just for decorations.
Transitions: Go for them now! Basically event driven, if the browser doesn’t support them they don’t work and no one needs to know. No reason not to use this stuff, it’s decoration.
Animations: These have some issues still. Animations are constant, and the problem is only webkit supported them until recently but then the working group took it went back to the drawing board. Still in production.
Multicolumn: Not fully supported yet. Some browsers support the main idea, but none of the details like gutters.
Grid Layout: Hang elements off of specified grid lines for layout. Only supported by IE10, but not bug free…
Exclusions: define an area that content will flow around. Not locked to rectangular objects (can use alpha channels or svg shapes to define areas).
Regions: Define text-flow from one area to another. Requires document structures we are not used to, using empty structure for the browser to implement.
Combinations: Using all or any of these elements together.
Flexible Boxes: If you have a use case, then go for it. But they are going to be changing the spec for it. It will be a different spec though, so it shouldn’t break.
Scoped CSS: using a style but limiting it’s scope to the parent element that imports it.
Calc: Really nice, but for now rely on preprocessors. Drawback is that it’s only on first render, if element is updated via scripting
Masks, text-stroke, box-reflection: webkit only! And not looking like they will spread.
Paged Media:
Hyphenation: use now with a good polyfill. (Polyfill – spackeling paste to fill in cracks and crevices – nothing to do with polygons and fills)
Gradients: Borderline shore and dive… Really cool, webkit and gecko have totally different syntaxes (to the degree of english and chinese), fun to look at, but a torture to declare. Calling it now, gradients will be web 3.0, rounded-corders was 2.0
Border Image: border is defined by slicing an image into sprites and applying it to the border (and even background image). It is supported in a number of browsers though, so use it but don’t depend absolutely on it.
Border-radius: fish! Use now and go crazy with it.
Web fonts: use it now, but use it wisely (refer to Jake’s talk).
But what can we do about it? Can we prod the working group to move things along.
First thing to do is experiment with the properties! You spread the cool effects, second you find crazy unexpected bugs. Use html5please.us as a guide (even though he disarees with some of their points and they talk about css3, js and stuff as if it is html5). Browsersupport.net documents which browsers and versions of those browsers support css3 properties. CSS3.info (subscribe to the rss to be kept in the loop, as well as the css3 working group). Even subscribe to the [email protected] emails list (and f you’re like me, I know I am, set up a filter and archive it and then poke into it when you have some time. Take it even further and join the w3c with a reduced membership fee for startups (advantage is that you can send a representative to the working group). Also, blog about it! Document what you discover, write it up and publish it, tell others what you’ve written maybe even in the mailing list. CSS samurai documented top 10 failings in each browser and each one got fixed eventually.
We didn’t get here all at once, it’s been here a little there a little. But we are progressing and eventually will get somewhere good. Every day, week and month more support is coming.
Henry Adams (Descendant of 2 presidents: great-grandson to John Adams and grandson to John Quincy Adams). He lived between the civil war and world war 1. He witnessed the industrial revolution.
Chaos was the law of nature, Order was the dream of man
Responsive Design:
1. Flexible of fluid grid
2. Flexible images and media
3. Media Queries
“Solve the parts, not the whole problem.” – Mr Kaizer
1. Layout
2. Staring Small
3. Advertising
4. Media Queries
Formula: target / context = result
thegreatdiscontent.com
Bootstrap and dribbble and great discontent star big and go small.
We should start small and go big – Yiibu
Site > Structure > Skin > Services > Space Plan > Stuff
Slow constants quick, slow controls quick – Stewart Brad – How Buildings Learn.
Trent Walton – “trade control in photoshop for a network of context” in Responsive designs
Layout is most susceptible to change
Width, hierarchy, density, interaction.
Don’t just hide content on mobile – simplify before you suppress.
Move nav into footer? Link to it in the header
We’ve been too focused on layout and columns and grids.
paul robert lloyd.com
Ads: Keep relative position but have it adapt it’s position. document.write is not friendly. Responsive Advertising: Mark Boulton and Roger Black.
Images and Media:
Images with width: 100%
Media set via javascript? No we don’t need to, let’s use css only, it’s more fluid! Althoug it does require a bit of un-semantic mark-up.
Width x Height = Aspect Ratio
Wrap media in div. Give container a padding-top matching the aspect ratio percentage, position rellative. Give media inside position absolute and width and height both 100%!
BBC – responsivenews.com
Bandwidth is a blind spot. and now extra complicated with image prefetching.
categorizr and craig mod – bibliotype
– Give users choice/options to view content they aer interested in.
Disclaimer: I have less notes for Jake, but only because it was the most entertaining presentation and he kept my attention so well I neglected my notes.
Font-face has been around a while but no progress. It’s taken us 18 years to get to the point we are at now. This is ridiculous! People are born and receive their complete education in this same amount of time, and browsers, font foundries and wc3 haven’t worked out how to allow fonts online!
ttf – true type
woff
eof
Font squirrel
Font foudries hate you.
Story about earphones landing in the toilet. that is how fonts online makes us feel.
Web font loader
The phases of the internet with media:
Internet is coming, run!
Sell, but with ball and chain attached
Make buying easier and more pleasant than pirating
Serve ttf and eof in a way that works:
He showed lots of text results and different ways different browsers each failed to load fonts in a desirable way: https://github.com/jakearchibald/font-testing (http://lanyrd.com/smwxy)
2011 was a year to step back and learn something new. What else other than the banjo! Banjos are very misunderstood. Learning new things helps us to become better at things we already do. The process of learning can be applied to things we know to break it apart and we can better ourselves.
Imitation – LEARN – view source of greats
Repetition – DO – And do until it reaches second nature – build repetitive patterns
Innovation – apply your own creativity – reinterpret – stylize – own
Frameworks are great tools, but they are learning tools. A good craftsman builds their own tools!
Pears
http://pea.rs/ – common patters of mark-up & styles
-an open source wordpress theme to allow anyone to set up their own library of repetitive patterns.
Let’s be semanticaly correct.
Examples: HTML5 – placeholders, roles (ARIA landmark roles – Jeremy Keith of adactico.com)
stronger css selectors rather than more classes in css. (nth-child() in place of even, odd, alt, classes)
Slats – are blocks of content usually containing an image (thumbnail), title and description and even more optional info(date, tags, etc). They are often teasers of more content that should click through.
Breaking things into patterns you can solve small problems w big impact.
Overview of SASS (I agree with Dan and have been hesitant to implement CSS preprocessors)
Love the idea of preprocessors for CSS
Earl Scruggs revolutionized banjo playing with a new style (Flint Hill Special)
Bluegrass killed the banjo (arguable) by making it too hard for average people to play the new cooler styles.
One reason why CSS didn’t have many of these SASS and LESS features to begin with was the creators didn’t want to make it a complicated language. If you make something too powerful it can get too overly complex and people don’t use it.
There is a pride also in the handcraftedness of the source code. We like tools that plug holes, but don’t mess with our craft. But the benefits of using CSS preprocessors outweighs these nits. It’s easy to install:
$ gem install sass
(There are also tools that can help: Scout) It’s easy to watch a sass file and have it automatically recompile a CSS file on save.
watch $ sass ...
This is beautiful for those who follow the DRY mantra: Don’t Repeat Yourself!
CSS Preprocessors give us: variables, functions (mixins), inline media queries.
Respond or Adapt! Responsive Web Design
Dribbble set with a single breakpoint at 500 in which it makes the ayout of the site fluid. This is so we don’t have to consider the plethora of mobile devices using various sizes around the same.
We should let our content dictate our breakpoints rather than the popular devices dictating the breakpoints. Avoid display:none; give better options or if it’s really not needed get rd of it everywhere.
Do designers actually control what a site always looks like? What is a web designers job anyways? It’s to serve the customer/user, an advocate to give all users a better experience.
Bebo became synonymous for spam for only carrying about conversions no matter what they had to do to get them. Clearing your throat doesn’t always mean you want to go to Berlin!
Design that does not serve people, does not serve business.
Were here to study best practices. Good Web design starts with content. Content should precede design. Templates are not that!
Blogger template design story. Jeffrey and friends were excited to design blog templates with Web standards in mind! But very hard to design a site with no idea what the content would be.
Progressive enhancement: good experience for all! Http://easy-readers.net. Adaptive Web design and responsive Web design = progressive enhancement taken to the next level.
1. Content is a design problem. Goss Web design starts with content. Yet our designers are often hostile to content.
2. If our designers don’t serve content, users well find ways to get the content anyway.
3.progressive enhancement rethinks design to put great user experience (and content) first.
4. Responsive and mobile are creating a new interactive design landscape that puts users and content first.
[UPDATE] I’m updating this post that originally just contained my slides with the meat of the presentation as well. I don’t think a presentation is expressed well at all with slides. So I’m going to write some things and link to places that I mentioned.
This presentation covers how to get from a photoshop design to a theme in WordPress. The sample theme I use in the presentation is actually live at http://psd2wp.circlecube.com. I’m not trying to teach css or html here. I more wanted to focus on the process I usually go through in creating a site or theme. Let’s work on this PDS template design called Corporate Clean, which was designed and published by Zsolt Kacso. I saw this done by a drupal theme shop and figured the wordpress world could use the same. (Also check out Corporate Clean for Drupal http://drupal.org/project/corporateclean and download the design they link to on that page: http://mttdownloads.s3.amazonaws.com/projects/kaolti/corporateclean_psds.zip)
First, What is a Theme?
It is all the files that control the front-end and visual side of a site. It is all the files that control the front-end and visual side of a site. Major benefit to a theme (or a CMS overall) is separating design and content, which is the goal of standards based web design. Themes are made up of a combination of files: css, html, php, javascript, images…
The basic structure of a theme is usually something like: Header, Content, Aside(s) and Footer.
We know what types of files or templates we need to include in our theme by using the Template Hierarchy is how WordPress determines which template to use on each page. It looks for template files with specific names in the current Theme’s directory and uses the first matching template file listed under the appropriate query section below. (See Joost De Valk’s Anatomy of a WordPress Theme Infographic).
A wordpress specific term that took me a while to get used to was “the loop”
There are many different roads to a WordPress theme.
All themes are not created equal. There are different type and diffrerent qualitiy levels of themes. We can group them into these main areas though (some of which overlap):
Free – benefit, it’s FREE. Only problem is there’s not a great vetting process and a lot of themes out there aren’t good quality themes you’d want on your site (even if they look nice from the front).
Premium – although WP is open source software as in free, not all themes are free, some will cost you.
From Scratch – It is possible to make a theme from the bottom. This could be beneficial if you have something specific you’re not likely to find out there already.
Customized – A direction many take is acquiring a theme (be it free or not) and them customizing it to make it suit them. Not a bad if you’re starting from something that is nicely done, and you know how to get from a to b.
Standalone – Traditionally all themes were standalone packages, and the theme folder will contain all associated files.
Parent-Child – Since WP 2.7 we’ve had the ability to have parent-child relationships in theming! This means that you can have a theme you want to base yours on and separate any modifications you make to it into a “child” theme that will inherit everything else from it’s “parent”.
Frameworks – Frameworks are themes that have been designed to be used as a starting point or a parent theme. Some have feature rich options pages that allow you to build a theme or site from within the WordPress admin. These really help theme developers to avoid repeating the same code in every theme they make. One caveat to this is that if you’re new to WP, you need to learn all the wordpress specific code as well as any additional code for the theme framework . It complicates the learning curve a bit, but it has long term benefits of speed and ease.
My preferred theme route is using a theme framework. My preferred framework is thematic. Thematic is the ultimate in SEO-ready themes, it is a highly extensible framework which features 13 widget-ready areas, drop-down menus, grid-based layout samples, plugin integration, shortcodes for your footer, and a whole lot more. Thematic as of now is about to get a significant update as well. Resources for thematic include forums, guides, diagrams, tutorials, thematic4you …
Before getting into the design, let’s talk one more fundamental wordpress term: hooks
Hooks are spots in the code that are flagged for us to easily customize how our site or theme functions. To visualize, think about all the thousands of lines of code that gets executed to load a page on a site (yes, there are thousands), and think of it like each line of code is like someone in line at the gracery store checkout . They’d be lined up in order of execution. Hooks are like people in the line that are holding a sign allowing you to cut in line at that precise position to run your own code. There are action hooks and filter hooks in wordpress. Action hooks are for executing your own action at that spot in line, and a filter is about changing something in the line right there. Like if you wanted to insert some ad at the end of every post. You could either add an action that would place it there, filter the post content and add it to the content itself (and you could even filter the content before it goes to the database, or before it’s rendered onto the page). More on action and filter hooks here.
Returning to that added complexity of using a framework, many frameworks will add their own hooks on top of the wordpress hooks. So on top of learning any wordpress hooks you also need to learn the ones specific to your chosen framework where you need to access them. So once you get used to using one framework it may be painful to leave and loose and invested learning in that one. Check these diagrams of thematic structure (blue mandela.com and visualizing.thematic4you.com) including hooks for an visual representation. And the thematic guide to filters and hooks.
Getting from a design in photoshop to an actual WordPress (thematic) child theme while trying not to reinvent the wheel.
The Technical – Actually making the theme
Once you install thematic in your wordpress site, look at the theme directory (/wp-content/themes/thematic/) and you’ll see that thematic comes with a ‘thematicsamplechildtheme’. It’s nice that they thought of this, it gives us a great starting place! We copy that folder, rename it to whatever we want, and place it in the theme directory (sibling to thematic itself). Like so:
The thematicsamplechildtheme has 3 files in it: the style.css, functions.php, readme.txt. I added the screenshot.png file (it will automatically get pulled into the backend as the image of the theme) and made some edits to the stylesheet. Later we’ll add all our styles to the css here, but for now we need to understand that the comment block in the file communicates the details of the theme to wordpress. We need to edit the css file so it reflects our theme properly. The block of text in the comment is formated in a specific way that wordpress will read it and it’s actually pretty self explanitory! All we need to do is update the details. Take special notice of the Template line (it’s what tells WordPress that this theme is a child theme using thematic as the parent), here’s what I’ve done:
Once we have this in place, we go to the appearance section in our wordpress dashboard and select our theme. Then we can then make our edits to our stylesheet and see them live on our site!
Before we go opening a can of CSS, let’s look at a couple things and think big picture. We haven’t yet mentioned what this ‘functions.php’ file is. This is the section where we will do any php related to our theme, in other words our hooks! That includes any wordpress or thematic hooks. This samle theme actually has a couple snippets we can uncomment and a sample filter.
Process & Workflow
My purpose in this presentation was never to show you how to slice a photoshop document into web ready images or how to write CSS. I just wanted to help people get more familiar with or started with building themes. I want to talk a little about my process because when I started theming, while I understood the tech (as in css/html) (although I still had and have lots to learn), the process around theming was somewhat of a mystery. I usually follow a loose workflow/cycle when I’m making a site:
Layout – Wireframe, get content areas (widgets) blocked out. Getting the right content in the right places, or creating the right places to put the content.
Structure – Info Archietecture, get the proper post types and think through any needed templates. Getting the right content types. Ideally we should put this code into a theme functionality plugin to separate the functionality from the visual style. Some think it’s best to put that into a plugin so the theme can be changed. But that’s beyond the scope of this presentation, so I’m just going to show you the code to do it and include it in the theme for now.
Style/Design – CSS, using images and styles to get things visual. Getting the right content looking right.
Interactive – JS, making any client-side scripts lively. Getting content interactive.
Population – The plain old and sometimes even boring, data entry.
Rinse and repeat! This is loose and a cycle, I jump through each of these phases numerous times for each element.
Each of these phases contain different tasks, I’ll include some examples and point out some resources. I don’t want to focus on the exact things to do for any and every situation, but talk more about the way to do things. Basically teach to fish, rather than feed you a few fish.
I think I’ll leave that for another day though. This has gotten quite long!
MASS MEDIA (in waves)
