• On hacking:
  • Recommends reading Hackers: Heroes of the Computer Revolution
  • Hacking is sharing, opennes, collaboration, and engaging in the
    Hands On Imperative (where “making is thinking”).
• Worked at Threadless, an online t-shirt company.
  • We invented crowdsourcing.
  • We take a design and put it on a shirt.
  • Four steps to working at Threadless:
    • Design a shirt
    • Submit a shirt
    • Scoring of the shirt from community
    • Cash money.
  • Result:
    • 100k of shirts submitted
    • Millions of tee shirts sold
    • Grew from revenue of $x millions to $xx millions
    • We did none of the hardwork
    • The crowd and community did the hard work which was fun
    • Our team was able to focus on product, not on technology
    • I had accomplished my goals at Threadless, I quit
• Went on Vision Quest and got hired by Obama Biden Campaign team
• The Obama re-election team transitioned from politically-tight
  people to engineering focused.
  • For 2012, they need something different to the shock of
    others: “hired engineers to do enginnering”.
    • Hired ~40 engineers and ~120 tech staff in 18 months fromall over to “web scale”
    • Started out with zero, just pile of code.
  • Execution, couldn’t get fancy
    • We invested early and built platform called Narwhal
    • Narwhal is a focus on bottom foundation.
    • It wasn’t an app, as the press liked to have believed,but the name for all of our APIs
    • With the API foundation in place, we can build toolsincluding:
      • Call tool Mobile apps, Contribute. Social
      • Dashboard
      • Mobile apps
      • Contribute
      • Social
    • In total, there were ~290 products, deployed weekly on1,000s of servers
  • We used any technology that was able to solve the problem.
    • This included Python, Ruby, MySQL, StatesD, Graphite,Puppet, Vagrant,… pretty much all the things!
    • We weren’t a “Python shop” or a “PHP shop” or whatevertehcnology of the month was as we didn’t want to stopanyone from using what technology they wanted to use.
    • Instead, we foucsed on what simply solves the problem.
      • For example. Dashboard was done in Node.js since weliked what that community was doing.
  • We invested heavily in user experience
    • User experience heavy investment
      • We talked to users to help build products that wereusable and not merely functional.
      • Performed a lot of A/B testing, which allowed us tounderstand where we were wrong
      • Did you know that the Groundhog Day movie is reallyismulti-variant testing?
      • Fail Safety
        • Early in the campaign had chance to see the last Shuttle launch.
        • The goal of fail safety when we were sending people on shuttles is to get people into space without killing them.
        • Error states should always be helpful or where a user has the potential to be lost or hurt.
        • 404 pages should redirect people to different parts of the site and ask users to do different work
        • Users are not stuck in a fail state
    • Practiced gamedays
      • For a month, called “October”, they practicedpotential scenarios where items and compenents of thesuite of tools would fail.
      • On Election Day, there were no more changes.
        • Since people were trained and knew what to do, there wasn’t any politics.
      • Gameday entails:
        • Destroying all of our applications
        • Destroying our database
        • Seeing how we needed to patch things
        • Then the next day Amazon’s cloud services went down on the East Coast and we were prepared to handle it.
        • The AWS rule: “If netflix is down, you are down too, if netflix is up, but you are down – you are screwed.”
    • Facilitate community
      • Users are the power behind your brand and is oftenunderestimated in developing it.
      • For example, moderation is hard to do and no onereally enjoys it.
        • Insert a flag button to allow users to let you know when something about the site or other user’s contribution isn’t appropriate.
        • This empowers your community to moderate your content
        • Sort of like Minecraft for social web sites
      • This allows for the building an environment of trust.
        • You have to create a place users can flourish
  • Working with teams is hard.
    • "Manage by your outbox, not your inbox” — Larry Bacow
      • Often times we wait for people to email us and whatwe really need to do is reach out to them.
      • Send out simple emails by 9am every morning and,surprisingly, they write back.
    • Diversity in the workplace is important.
      • He found the time with the most diversity have begetthe most innovation.
      • We do crazier stuff and build value for a lot morepeople.
    • Roll forward. Never roll back." * Etsy
      • Rolling back code was emotionally draining.
      • Instead, add and fix code to move forward.
• Lessons learned from his experience as a hacker and manager include:
  • Building a great team isn’t straightforward or easy:
    • After exerting so much effort into building a team,sometimes you need to let people go and don’t be afraidto do that.
    • Poisonous people can ruin teams, but don’t drop therelationship. That person might be good on the nextproject
    • Hire people that are better than you
      • People that are A’s hire A’s and B’s hire C’s
  • Knowing that we could throw things away, we didn’t document
    as much:
    • We tried to do dilerberate code.
    • A lot of Harper’s job was managing trust including askedto be at weekly internal meetings with Obama relectionexecutives letting them know things were okay.
  • Practice for failure:
    • Failing sucks, but important.
    • Instead, work at being terrible at failing.
  • Create an environment worth trusting and remember to SHIP
    PRODUCT:
    • You will feel better for having deployed code.
    • Your customers will feel better seeing progress.
    • And your team will feel that they aren’t just working forthemslves and producing.

Continuing the tradition of holding the event in unique settings, this year’s CSS Dev Conf is situated in the Rocky Mountains of Colorado at beautiful The Stanley Hotel, which is part of the History Hotels of America.

The event is two days devoted to CSS and its super friends, including JavaScript, Sass, Compass, and more. Topics range from case studies, responsive web design techniques, infographics, automated testing, cutting edge CSS specs, to much, much more.

Featuring amazing speakers like Eric Meyer, Nicole Sullivan, Jonathan Snook, Estelle Weyl, Tab Atkins, the CSS Dev Conf speaker list is only just beginning to grow.

You could join the CSS Dev Conf speaker line up as the call for speakers is open right now.

Voting on speaker proposals is done through double-blind voting setup. It’s a popularity contest for great CSS content.

So, if you are someone who breathes CSS, I encourage you to submit a talk.

Or maybe you know someone who is CSS ninja?

Help spread the word and let them know about the CSS Dev Conf call for speakers.

Led by Ben Callahan, Think Responsively is a one hour-ish long free online, live seminar that’s happening next week.

It’s about the process and organizational changes needed to allow “responsive thinking” to take root in your organization.

Designers, developers, project and account managers, sales reps, content strategists, information architects—all are welcome as we discuss how to create a collaborative workflow and build for a device independence.

Ben, covers the basics of RWD, new deliverables in the responsive process, and lessons learned from experience implementing responsive projects.

Come with open minds and constructive questions. We’ll make sure there’s plenty of time for discussion!

NOTE: All 200 tickets to the live session got grabbed in about two hours! However, getting on the waiting list gets you access to recordings after the session.

Performance dominates the first day of the RWD Summit. Before the smart phone and tablet revolution, sites got fat.

One of the main talents a web designer can possess: creating a big impression with the least amount of code. It’s time to get back to our roots by recognizing we don’t always know how fast our sites show up on our visitor’s devices.

The second day is dedicated to strategy. We discuss client management in the more agile development process of RWD, along with new approaches to content strategy and typography.

The third day is for those that are in the trenches: the web builders.

We will be looking at new concepts in building out RWD sites with CSS fractals, how to use Sass and Compass, RWD sidebars, and much more.

If you want to dive into RWD and bring the experts to your desktop, sign up for RWD Summit today.

If you are busy and can’t make it for one or all-three days, don’t worry. All the sessions are recorded and are part of the purchase price. You can catch the sessions later at your own convenience.

See you at the Summit!

• When kicking off a new web site project, talk to stake holders and the people at the front desk. They know where the weaknesses are in the company’s forward facing presence because they hear them every day from the customers calling in with questions.
• Talk with client contact or liaison before kickoff meeting to get a feel for project and political landscape. This approach avoids walking into traps and reduces the chances of messing up the start of project.
• Use survey tool like Ethnio to get site design feedback and generate leads for user testing later on.
• Design involves a Character, Conflict, and a Resolution. The Character is the site users illustrated in a user profile. The Conflict is the problem with site or business. And the Resolution is the design solution you work with the client for the Character.
• Give client 30 celebrity mugshots with goal to pick which ones fit business’s brand. Then use Style Tiles based on each celebrity.
• Learn clients’ internal language and help them learn your design language.
• No more wireframes. Build prototypes instead, but call them “HTML Wireframes” to avoid confusion that is how the site will look.
• Tools to make quick HTML wireframes: Codepen for elemental pieces, grid systems, and roll your own for more customization
• If you can’t click through it, it’s not a prototype. Prototypes are for user testing.
• A sign of a good designer is that they do a lot of paper sketching as this is the quickest way to get the best idea.
• Turn HTML wireframes into design modules.
• Don’t just brush up an approved wireframe with type and be done. Go the extra step and design within that space.
• Keynote resizes grouped elements in a way that Photoshop can’t, which makes it ideal for creating responsive design modules or element collages.
• Involve developers’ input into the design process as they make a lot of decisions in the building responsive web sites.
• Selling a design continues after you get the project. You have to get clients engaged, so don’t show design comps or other elements of the design process like you are showing an apartment.
• Always have a reason for your design and each part of your process. Finding your reasons start with research.
• Practice your writing skills to improve client communication as everyone on a team gets a direct channel to the client.
• Realize that a good writer is someone who can organize their thoughts.
• Add a small touch of humor when writing to clients. For example, tell them in passing on a deliverible, it’s National Margarita Day today. (Only works on February 22nd.)
• Two things a designer has to get used is taking public criticism and realizing that clients will change a design after it’s handed over.
• It’s not Responsive Web Design, it’s web design.
• Every client needs to have a project manager to work with an agency. Projects that didn’t have a client liasion haven’t gone well.
• Even if the client liaison or project manager is part-time, temporary employee for the client, it benefits the project as you need someone to filter email messages, be mindful of political landscape, work on deliveribles, etc.
• Take sketches of HTML collages, scan them, and use them to compose different layouts that are then giving to client/design review
• Use tool like GatherContent to, well, gather client content.
• When working with clients on a project, expect: requirements, content, and feedback.

• Use Keynote to wireframe, rapid prototype, create visual specs, use animations, and prototype hyperlink interactions.
• Designers don’t make designs in a vacuum. Once you are done making those prototypes, you have to present and document it.
• There are a lot of applications that help with all these activities, but Keynote does most of them.
• When working in a collaboraitive spaces with many designers with Photoshop, designers are set up in layers and groups and how things are set up. This file structure complicates and slows communication between other designers and stakeholders.
• Keynote provides DIY organization. Set up an initial set of slides, one each for the Project Name, the Project Summary, the Site, the Project Map, the Features.
• Then flesh out different design sections for each Feature, give its own Feature Section. If there are several options or iterations, give each Option Name or Number.
• Reference materials such as comps, visual spec, aniamtion, reference graphics and icons, etc. can be placed on their own unique slides—hidden at the end of the slide deck, but referenced as many times as you need.
• Photoshop and Illustrator still have their place, but regulated to digital image creation.
• Use Photoshop for preparing images.
• Use Illustrator to create icons and other similar resources.
• Shapes and text from Keynote, merging assets from Photoshop and Illustrator.
• Once you have a slide showcasing a feature or design—and you need to make modifications, duplicate it and then make changes.
• At Apple, they would produce a lot options and then whittle it down to the best solution.
• At Netflix, they do about four options and then do user testing to determine the best solution.
• In Photoshop, you can spend all sorts of time making a high-fidelity design, whereas you can build a design in third of time, tell that story to stakeholders, lock it down, and then go to Photoshop.

Facebook is working on incorporating the hashtag, one of Twitter’s most iconic markers, into its service by using the symbol as a way to group conversations, said people familiar with the matter. It is unclear how far along Facebook’s work on the hashtag is and the feature isn’t likely to be introduced imminently, these people said.

Why does Facebook need hashtags? One answer can be found in these statistics:

• 38% of Superbowl 2013 commercials included a Twitter hashtag.
• Only 7% of Superbowl 2013 commercials mentioned their Facebook link, which is a decrease of 4% from Superbowl 2012.

Why also do this? The kids aren’t on Facebook and Facebook needs to get the kids back into the picture.

An improved hashtag search not only allows brands to reach more people, but opens up Facebook users to find other users outside of their circle of friends and family.

In short, Facebook becomes more interesting to more people by being more open.

• SXSW Panel Twitter Hashtag is GIFecon
• Most people in the crowd pronounce GIF with a hard G. They seem to be okay being wrong.
• Tools that they use to create GIFs: GIFshop, Photoshop, Flash, After Effects, Cinegram, IShowU, Slingbox
• Life GIFs is the art of quickly created animated GIFs from live video.
• Rubbable GIFs allow for control of the playback of an animated GIF.
• Jimmy Repeat: We don’t make just GIFs, but repeating animations
• Mark Portillo: DJ takes existing music and makes something new. Doesn’t mean the musician is better than the DJ. Like those that make GIF animations.
• MP: GIFs exploded when Tumblr came out with thie “GIF Feature”.
• Lindsey Weber: “Reaction GIF” is popular to put in these types of GIFs. You can search by emotion.
• Ferndano Alfonso III: Can you make a living making this GIF animations?
• JR: We don’t just do GIFs. We are designers. If we only did GIFs, it would be a painting in border colors. As a designer you have to wear multiple hats. From being the director, shooting your own videos, doing the After Effects.
• LW: As a freelance writer, people who hire you you have to do many things. “Can you make a GIF?” And I know what they mean.
• JR: GIFs add another level of attractiveness for your eyeballs.
• LW: Where is the Stockphoto GIF store?
• JR: GIF is the moving artform. There’s going to be LEDs everywhere. The repeating image is always going to be there. And with people finding more and more uses for them.
• MP: It’s always going to be around. Like a pair a Converse. Always a classic.
• LW: It’s hit it’s peak now. Vine is Twitter’s answer to GIF popularity, but it’s jarring to have audio with it.
• JR: This room is packed. People love making GIFs, so the marketers are going to be there.
• LW: The fate of Tumblr and GIF are intertwined.
• LW: Live GIFfing of events gets around rights issues for videos because it’s less policed.

It featured over 20 speakers, two keynote presentations, and one massive wrap up panel of CSS experts featuring every speaker there.

Aside from the online conference, CSS Summit, I don’t think there’s ever been an organized event focused solely on the design language of the web for web builders.

Slides:

• Flexible Media in Responsive Web Design by Dave Rupert
• Designing Ebooks with Web Standards by Kristofer Layon
• Animated Music Videos with CSS3 Animations and HTML5 Audio by Rachel Nabors
• Adaptive Images in Responsive Web Design by yours truly
• GitHub’s CSS Performance (video) by Jon Rohan
• Responsive Retrofitting by Ben Callahan
• Building Responsive Layouts by Zoe Mickley Gillenwater
• Optimizing Media Queries (pptx) (files) by Kimberly Blessing
• Responsive Content by Hans Sprecher
• The Future of CSS by Tab Atkins
• Displacing Worst Practices by Pam Selle
• Is Flexbox the Future of Layout? by James Williamson
• Select This! by Estelle Weyl
• How to Stay Up to Date on Web Technology by Chris Coyier
• Better CSS Performance With Tools by Paul Irish
• Automated CSS Testing by Simon Madine

Links:

• CSS Dev Conf Speaker Simon Madine’s blogs about his experiences and what he learned. (Apparently, my height is a well-kept secret.)
• Notes from Mike King at UI Fuel
• List of CSS Dev Conf 2012 speakers to follow on Twitter, courtesy of Rachel Nabors
• Photobooth photos from CSS Dev Conf After Party
• Archived tweets from Eventifier

To find out about the future of CSS Dev Conf, follow @CSSDevConf on Twitter.

If it wasn’t for IMG, a once non-standard bit of HTML proposed by Marc Andresson and put into the relic Mosiac browser, we probably would still be buying encyclopedias on CD-ROMS today.

In that initial proposal, Andresson cited Xbm and Xpm as image formats worth supporting.

Thankfully, browsers have adopted more robust image file formats since then.

Many formats have indeed come and gone, but there are a few we really deal with most of the time: PNG, GIF and JPEG.

But there’s now a newcomer.

WebP Image Format

Google announced the creation of a new image format, WebP to join their ranks as standard methods for delivering images on the web.

WebP’s goal is to surpass compression file sizes of photographs–a role usually reserved by JPEG. But this JPEG clone has a special talent: It animates!

So, in essenece, the WebP image format is a merely an evolution of the web graphic, A hybrid of GIF and JPEG file format.

As modern browsers expand onto more and more onto mobile devices with high resolution displays, the web doesn’t need GIF and JPEG copycats.

The Problem with Mobile and Images

Problems I discussed when I wrote about the HiSRC jQuery plugin when dealing with a then-hypoethical problem of sending an inline image to an iPad with retina display on a 3G network:

• Do you deliver the low-resolution, mobile friendly version?
• Or do you let the iPad 3 have the larger version, but with the longer download time?

Solutions involve sending a serious amount of JavaScript and speed detection tests to devices to be sure of the network speed.

While I think JavaScript solutions like HiSRC are bandaid on a serious issue, I think it’s better than any proposed alternative.

More Images, More Markup

There’s also an idea of adding another HTML element such as PICTURE as demonstrated in a JavaScript polyfill.

Instead of one IMG element, a web builder is expected to construct several additional lines of code at least one additional line for each device and/or resolution they need to support.

If Facebook adds 220 million photos per week and flickr 100 million photos per month, those additional lines of code add up quickly.

What the web doesn’t need isn’t more if-else HTML statements.

What the web needs is a smarter image format: A responsive image format.

Responsive Image Format

The web needs an image format that, when asked by a browser the server would deliver the right image that contains the right resolution.

We need an image format that can work in tandem with server and browser to determine the approprirate resolution, pixel

The interesting part is there is already an image file format that does just that.

It’s called FlashPix.

In a FlashPix file, multiple versions or resolutions of an image are stored in a container.

Which image is delivered by a program like a web browser is a determination that can be made by a virtual handshake between the browser and the web server.

Why Use This Method?

I’m not saying FlashPix is the solution. I am saying a similar approach should be followed.

For one, it allows the continued use of the IMG element which is ingrained into the bones, the very marrow, of the Web.

Secondly, there’s a simple reason why strict coding styles of XHTML was abandoned and loose HTML4 coding practices were instilled into HTML5: 95% of web sites don’t validate.

Asking web designers, bloggers, and non-techies to create multiple versions of their images in order to appease every Android, iOS device and desktop browser seems not only like a very non-standards approach, it’s also not a very practical one.

Content producers that work with the web at least a little bit know the fundamental one-to-one aspect when it comes to publishing images on the web:

One IMG element somewhat coded correctly results in one image showing up in the browser.

If we go with a solution born from the kin of VIDEO and AUDIO elements–where we do need to balance differing file supoprt due to the browser venders’ turf wars and licensing issues, I believe we surrender a bit of the Open Web mentality for not much gain.

Another issue is that with a method for inserting images with additional markup means there needs to be widespread change in WYSIWYG editors, their respetive tool bars in Content Management Systems, updated old web pages.

That simply is not going to happen. You will need something on mini-Y2K levels to get companies and organizations to start spending that sort of capital to fix the issue.

And while I think the retina display is pretty cool, I don’t think this issue rises to that level of concern.

Let Designers Design

If given a choice, I believe web designers would rather export one piece of artwork from Fireworks, Photoshop or whatever their image editor of choice happens to be and let the software compile multiple resolutions into one container file that can then be stored on a server and referenced via an IMG element in an HTML page.

IMG got us this far and it hasn’t failed us yet.

Rather let’s look to make image formats work smarter, work better.

It’s always good to have a mission statement of sorts when starting out on a endeavor.

Our mission for this podcast is to interview the best and brightest in the industry.

While the show might be new, we’ve already spent time reaching out to great people to talk about hot web design and development topics:

In Episode No. 1 of The Non Breaking Show, Dave and I interview Ethan Marcotte on diving deep into Responsive Web Design.

In Episode No. 2 of The Non Breaking Show, Dave and I interview Paul Irish on web education, HTML Boilerplate, Modernizr and future of web tools.

In Episode No. 3 of The Non Breaking Show, Dave and I interview Emily Lewis on Microformats, Schema.org, and freelancing.

Also, we’ve had our first-ever crossover show with Chris Coyier and Dave Rupert from the Shop Talk Show.

First, catch the first parter over Shop Talk Show No. 8 with Dave McFarland, Chris Enns and myself.

Then in a very special Episode No. 4, we talk with Chris Coyier and Dave Rupert about CSS pre-processors, Git and Github.

Listen and subscribe to The Non Breaking Show.

That is until I come across the idea of adaptive images in responsive web design.

In Mat “Wilto” Marquis’article, he reviews the trials behind the Boston Globe redesign project to get images served in an adaptive manner — meaning that the proper, optimized image is delivered to the appropriate device based on the following factors:

• screen resolution
• bandwidth
• browser window width

The problem with trying to determine the best image to send to the browser is these kinds of factors can be independent of each other.

And that wherein lies the problem: knowing the value of one item, like screen resolution, doesn’t mean you get the full picture of the user’s browser experience.

Tiny Displays

First, the iPhone 4 introduced the notion of retina display (640×960 resolution at 326 pip). Before the iPhone 4, one might have gotten away with letting just the browser width. That roughly translate to the axiom:

The smaller the screen, the slower your internet connection.

However, that’s not the case as displays are becoming great at compacting lots of image data in a small screen.

Thought Experiment

Let’s think of this problem in another way with the following thought experiment:

The iPad 3 that is rumored to come out in the Spring of 2012 will have retina display that rivals most desktop displays and will no doubt have 3G models.

Also, since the screen of the iPad is going to be presumably the same dimensions as the iPad 2, the browser “width” is going to be the same.

So, realizing that the browser width isn’t helpful and if a site visitor is surfing the web on an iPad 3 with 3G, which image do you deliver on your site?

• Do you deliver the low-resolution, mobile friendly version?
• Or do you let the iPad 3 have the larger version, but with the longer download time?

Measure a Few Additional Times, Cut a Couple More

If you are building a complex site the size of the Boston Globe, you can follow their lead.

The best solution that’s agreed by most current solutions is to set “mobile friendly” images as the value for SRC attributes for image elements.

Then set the URL to the high-resolution image as a value an HTML5 DATA- attribute.

<img src="images/mobile-size.jpg" data-fullsrc="images/desktop-size.jpg"/>

Then setting screen-size in a browser cookie, you can use server-side requests to deliver the appropriate image to the right browser.

A variation of the solution called, aptly, Adaptive Images in HTML aims to keep HTML pure while utilizing PHP, JavaScript and modying .htaccess files.

If you aren’t into hacking .htaccess files to serve image files, you can look into a cloud-based service for the solution for some help.

The folks closest to this at Sencha have just a solution at src.sencha.io for scaling images, but not for replacing high-resolution images for the site visitor when it’s appropriate.

If the service added a feature of checking and delivering the appropriate image in addition to context aware images, I think the folks at Sencha would have a great hit on their hands.

And they might have another revenue stream along the same lines as people that rent out web fonts.

Back to Old School

If you are working on a smaller scale web site, I humbly recommend a solution I’ve been working on called HiSRC.

It’s a twist on the old school LOWSRC IMG attribute, which would render a lower file size image first while a larger file size image would appears in its place later.

Back to the future, we set in the markup and leave the lower file size image.

However, if the HiSRC plugin detects fast network or high resolution, then a high resolution image takes the image’s place.

The browser loads the low-resolution image first with an old-fashion IMG SRC attribute.

Then the HiSRC jQuery plugin checks the resolution of the browser.

If the browser resolution is wider than the default 640 pixels width, then the plugin overwrites the low-resolution image for the higher resolution image.

Whereas, if mobile bandwidth is detected (like 3G), the low-resolutions stay in place thanks to the new navigator.connection first seen in Android 2.2.

The downside is that site visitors with higher resolutions get the tax or burden of having to download two images instead of one.

For small projects or small scale projects where PHP or using .htaccess isn’t possible or too much of a burden, then I think that’s a fair price to pay until the future catches up with us.

Escape with All Alive (Except the Klingons)

Of course, there are ways to workaround the issue of delivering mobile friendly images without having a web builder be concerned about their visitor’s browser window, resolution or bandwidth.

One way is to place images in background of HTML elements and set background-size: auto; to have them scale as the element resizes. As the container element expands, so does the image in the background.

Another way is to work with Scable Vector Graphics (SVG). SVG has made great leaps in browser support. In fact, in modern browsers support inline SVG images natively. Why we aren’t talking more about SVG these days I don’t know as it seems like manfiect desitny for responsive web design.

If you want to wait a bit longer, there might be support for a “new” image format that serves up multiple resolution. This has already been addressed in the Flashpix image format, but has yet to be adopted for web delivery.

NOTE: For more on adaptive images and responsive web design, check out my new podcast The Non-Breaking Space Show with David McFarland and Chris Enns where we interview the one-and-only Ethan Marcotte.

Hosted by Dave McFarland and myself, we strive to dive deep into current topics

Our inaugural guest was the delightful Ethan Marcotte to talk about Responsive Web Design, both the web development principle and his book of the same name.

He frequently speaks on web standards and responsive web design at conferences and tweets about it @beep and @rwd.

Below are the links & notes talked about during the show:

• EthanMarcotte.com
• unstoppablerobotninja.com
• http://css1k.com/
• http://www.csszengarden.com/
• http://astore.amazon.ca/
• http://happycog.com/
• http://www.scottandrew.com/
• http://www.zeldman.com/
• Ethan’s initial 2010 article on responsive web design
• The DAO of web design
• http://clagnut.com/
• http://bostonglobe.com/
• http://clearleft.com/
• http://www.markboulton.co.uk/
• http://www.fivesimplesteps.com/
• Khoi Vin
• Ordering Disorder
• Quirksmode Blog
• Quirksmode Mobile
• Quirksmode: Combining meta viewport and media queries
• Respond.js
• Filament Group: Experimenting with Context Aware Image Sizing
• Jason Grigsby
• Adaptive-images.com
• A List Apart: A Simpler Page
• Quirksmode: CSS3 Background Compatibility Table
• Josh Clark
• JQuery Mobile

Below is a list of bands that are playing the event. Bands and musicians that are on Spotify are linked to their respective pages on the online music subscription service.

Thursday

• Halaska
• The Tits
• Three Leaf
• GoGoBeware
• Final Exam
• BOY
• Eleven:Eleven

Friday

• Hello Wheels
• Les Rav
• MaryAnn & The Revival Band
• The Naturals
• Wild Moccasins
• The Lemurs
• Patrice Pike Band
• Mother Falcon
• The LaRues
• Bus Stop Stallions/Jam Skaters
• T Bird and the Breaks
• Snapping Chowsky
• Calliope Musicals
• The Sweet Nuthin
• Owl Face
• Space Crazies
• Crash Gallery
• Noise Revival Orchestra Experience
• Burgess Meredith
• Megafauna
• DJ Orion

Saturday

• Megabig
• Stampede Mesa
• Neon Cobra
• Ghostbunny
• Stella Rose
• The Shears
• Sphynx
• Freshmillions
• Little Lo
• UME
• Smoke and Feathers
• Gospel and the Wolf
• Bridge Farmers
• Milk Thistle
• Bethany Bauman
• Guns of Navarone
• 1OYR
• Parking
• Whiskey Shivers
• Shakey Graves
• The Bang Bang Theodores
• SuperLiteBIke

Mobile First

• Make one WordPress theme to rule them all
• Build small, then outwards adding layers
• Progressive enhancement

Coding

• For example, as a default style rule set fonts smaller.
• For screens bigger than 640 pixels, set font-size to 100%
  

Flexible Helpers

• Modernizr
  • Feature detection
  • respond.js
  • html5shiv

• Flexible Media
  • flex slider
  • max-width
  • height: auto
  • FitVids.js

Complex Navigation

• Content first navigation
• Hide menu on small sizes, if Javascript is enabled (i.e, smart phone)
• Use simple jQuery slideToggle menu
• Might be some accessibility issues

Hover Navigation Approach

• Drop downs
• Multiple level
• Using click events
• FlexNav

Images in Responsive Design

• Keep number of images, file sizes low
• Delivering low-resolution images for mobile device is tough
• Adaptive images
• jQuery plugin HiSRC 
• There are challenges.
• With retina displays and use of mifis, screen width is not always true representation of bandwidth
• Ultimate goal is to download only one image, rather than two
  or more

Talk to your audience

• Directly address users
• Ask questions of your users, expect that they will have questions
• Respond to their questions, comments audience members make
• Highly engage with social tools

Getting social

• Get on all networks, dominate one
• Share content from others, don’t share just your own stories
• Even share content from competitors
• Respond, respond, respond to users

Polling your audience

• PollDaddy
• WP-Polls

Featuring user content

• Widgets
• Comment of the day
• Twitter/social
• No forums!

Setting up user’s identity/influence

• Profile pages
• User pics
• Do light Gamification such as Cubepoints, Bunchball

Running contests

• Prizes don’t matter like using conference schwag, but are nice when they do.
• Mix it up the type of contests from retweeting a message or leaving a message on a blog post
• Example: 25 Days of Tegra
• #HackTheNews was a way for users to re-write the headline and tweet it out

Do things with your users

• WP_User_Query allows you to go through your users based on user’s criteria
• Pull people’s information from the WP backend to an extranet for user profiles using user meta function
• Mix it up

Podcast Plugins

• Blubrry
• Podpress

Social Media Plugins

• Social from MailChimp
• Analytics 360 from MailChimp
• AddThis
• ShareThis

Developer Plugins

• Regenerate Thumbnails
• pTypeConvertor
• Advanced Custom Fields
• Custom Fields
• Options Framework
• Disabler
• WPTwin
• Search and Replace
• xili tidy tags
• Broken Link Checker
• Theme Test Drive
• W3 Total Cache
• Jet Pack
• Gravity forms

SEO

• Yoast

Client-facing Plugins

• Login Logo
• Add Logo to Admin
• Dynamic Widgets
• Simple Page Order
• WP101 – great for WP inclusion to help reduce tech support calls

Content Moderation Plugins

• Disqus
• Intense Debate
• Post2Post

Coming this February, the 2nd Annual In Control Web Design Conference takes place in Orlando—far from Winter’s snowy reach!

After speaking at and attending several conferences, I’m very proud to say that the AIGA Orlando In Control Conference is an entirely different beast of Web design conference.

While SXSW and other conferences have couple of hundreds to thousands of people attend, we limit registration to a hundred people.

With limited enrollment, attendees get an intimate environment to focus like a laser beam on the content.

We’ve curated the content so that, for example, you aren’t getting that HTML5 talk at the end of the conference, for example, when you really needed it at the start to better understand the nature of semantic markup in its relation to CSS3 and jQuery.

Also, by keeping the conference to one-track, we aren’t forcing you to pick between two great speakers that would otherwise be slotted to speak at the same time.

Then at the end of each day, there’s the Wrap-Up Panel.

That’s when that day’s speakers join forces and take any questions from the attendees and even from fellow speakers. (Also, it’s a good time to ask for a design critique of your Web site!)

Giving attendees enough time to learn and ask questions of the attendees is at the core of In Control as sessions run about an hour and 40 minutes long.

This extra time helps keep speakers from feeling rushed (which in turn then makes them actually rushed) in presenting their material and opens up to more opportunity for Q&A. It’s web knowledge and experience in HD.

Just like last year, In Control boasts an incredible line-up:

• Daniel Burka, director of design at Tiny Speck, ex-creative director at Digg
• Mark Trammell, designer reacher at Twitter
• Ethan Marcotte, author of Responsive Web Design
• Aarron Walter, author of Building Findable Web Sites
• Stephanie (Sullivan) Rewis, co-author of Mastering CSS with Dreamweaver
• Greg Rewis, worldwide evangelist for Adobe
• Kimberly Blessing, co-author of Adapting to Web Standards
• David McFarland, author of JavaScript: The Missing Manual
• Emily Lewis, author of Microfomats Made Simple

And we don’t want to throw you into the streets to fend for yourself!

Thanks to MailChimp’s sponsorship, we provide snacks and lunch on both days. (Over at Environments for Humans, we’re still raving about the chocolate cake from last year’s In Control.)

As for swag, we also want to make sure it’s actually useful to attendees.

Thanks to our in-kind sponsors of O’Reilly, A Book Apart, PeachPit, Apress, and Rosenfeld Meda, your conference swag are Web design books!

Plus, a portion of your ticket goes back to AIGA Orlando to help promote design, mentoring projects and more in the local community.

If you’re serious about Web design and want to leave feeling inspired by some of the best in the business, check out this year’s AIGA Orlando In Control Conference.

And for a limited time, you can get $200 off with early bird pricing!

I’ll see you there!

If you weren’t able to attend one of our conferences, but still would like to get some great Web design and development knowledge on topics like CSS, jQuery, Accessibility and more from people like Paul Irish, Stephanie Sullivan, Ryan Irelan and many others, well, now is your chance!

Get 50% our online conference recordings for the month of December with discount code “MERRYHOLIDAY”!

Head over to each respective online conference page to see more information about the conference and purchase recordings:

• 2nd Annual CSS Summit
• 2nd Annual jQuery Summit
• iPhone iPad Summit
• Accessibility Summit
• UX Web Summit
• Web Optimization & Performance Summit
• Engine Summit 2
• Thomas Myer’s CodeIgniter and MojoMotor Workshops –

Thanks for a great year and have a happy, safe Holiday!

Apple is believed to have created a suite of software to make it easier and cheaper for publishers to create attractive digital versions of newspapers and magazines, with high-resolution photos and videos integrated into articles.

As someone who got their start in newspaper design, it’s an interesting development to see.

The views of the small to medium size newspapers to the Internet has been stand-off-ish, to put it mildly.

Newspapers simply just don’t get the medium. And you can even say that of magazines as well—if you take a look at the failure of the Newsweek re-invention.

When you are talking about careers or reporters, editors, copy editors, supporting staff, etc., it’s understandable that change is feared. Even when you know the change is going to happen, getting off the Titanic in the Atlantic into a tiny lifeboat is a gutsy thing to do.

Now the technology just seems right.

It’s been encouraging of late to see a few beat reporters stepping up and using social media, iPhones (with its HD movies and HDR photo capabilities), etc. to create a more engaging all-around news reporting around the clock and not when it’s just time for deadlines.

As for Apple’s newspaper software, there are a few things Apple needs to do to make it for newspapers to experiment and adopt.

The first two things are: the software needs to be free and the software needs to be as drop-dead easy to use as possible.

Considering Apple is a company with a large cash reserve (thank you, iPod) and known for making very insanely usable products (thank you, iPhone), they might pull it off.

My third concern is that they might not get the workflow of newspaper production. It’s an entirely different beast than what is taught in design schools.

If they approach making newspapers like a Word-clone or a stripped down InDesign app, the project is dead before it even got started.

If they put as much thought as they did into the new Apple TV unit that’s coming out—where they got into how people used the device in their homes, etc.—then again they might pull it off.

One of my main thoughts of the iPad when it first came out was that this is closest to e-paper that we have had that is commercially viable.

So, it makes sense for newspapers and magazines to be in this space and it makes sense for Apple to put content producers on the iPad.

They missed the Internet revolution and are now getting a chance for a front row seat to the mobile medium.

Newspapers are getting a second chance at becoming relevant again.