Non Breaking Space Show № 86: Dave Olsen — Pattern Lab 2

Dave Olsen and Pattern Lab

In Episode № 86 of Non Breaking Space Show, I talk with Dave Olsen, programmer/ project manager with West Virginia University, about the recent release of Pattern Lab 2. Pattern Lab helps teams build thoughtful, pattern-driven UIs using atomic design principles.

Topics Discussed with Dave Olsen:

  • 4:12 How is it working at a University?
  • 7:10 What is Pattern Lab?
  • 8:15 What’s the theory behind Pattern Lab?
  • 9:40 How simple should an atom be?
  • 11:30 How to use the demo to get started with Pattern Lab.
  • 13:30 Do you have to bring your own ideas to make use of Pattern Lab?
  • 14:45 What challenges and things did you look at moving from version 1 to version 2 of Pattern Lab?
  • 18:29 What is an event dispatcher?
  • 19:35 Any secrets or things about Pattern Lab 2?
  • 22:00 Using data inside Pattern Lab 2.
  • 24:10 Integrating Pattern Lab into your workflow.
  • 25:45 What would Dave like to see with Pattern Lab in the future?
  • 27:20 Developing a community around Pattern Lab.
  • 31:30 What is Dave Olsen passionate about on the web these days?
  • 34:10 How does Dave Olsen keep up on technology and new stuff?

Non Break­ing Space Show is still free of charge to nuclear scientists : Non Breaking Space Show № 86: Dave Olsen — Pattern Lab 2

Non Breaking Space Show № 84: Scott McCloud — Media and Their User Interfaces

Scott McCloud

Scott McCloud joins Non Breaking Space Show to talk about his new book, Sculpture, movies he’s enjoyed lately, his upcoming book on visual communications, presentation styles, old media vs. new media, and how comic book writing and design has changed.

Topics discussed with Scott McCloud:

  • 3:10 → How is The Sculpture book doing?
  • 4:20 → You wanted to make a Zot! movie?
  • 5:00 → Any movies you’ve liked recently?
  • 6:15 → Talking about Fantastic Film Festival and The Lobster
  • 8:45 → The best part of the Fantastic Film Festival
  • 9:28 → What does Scott love about life with his wife?
  • 10:13 → Talking about The Blackcoat’s Daughter
  • 11:02 → Talking about Drowning by Numbers
  • 12:00 → Talking about the making of The Raiders
  • 15:50 → What are you working on now?
  • 15:58 → Scott’s working on a book about visual communications
  • 17:05 → How does it relate to Understanding Comics?
  • 18:50 → Talking about better UI/better user experience and Edward Tuffte
  • 22:20 → Talking about presentation designs
  • 23:24 → Talking about style delivery of presentations
  • 25:10 → Scott’s simple principle for presentations
  • 27:00 → The use of screens at concerts and Moogfest
  • 29:13 → Using visuals as a means of performance-enhancing
  • 29:45 → Two different presentation styles as defined by Scott
  • 31:44 → Viral presentation at keynote in France
  • 32:24 → Talking about Scott’s new book
  • 34:50 → Understanding Comics is a touchstone
  • 36:15 → Old and New Media
  • 38:10 → How soaps and radio have survived TV?
  • 39:20 → What is the difference between TV and movies
  • 42:01 → Digital comics page count and navigation
  • 43:30 → Presentation of digital comics
  • 46:55 → Responsive design vs designing for the device.
  • 50:30 → Old comic design and writing vs digital comics
  • 53:00 → Scott’s rainbow of good news about modern comics

Non Break­ing Space Show is still free of charge to Superman signal watch wearers: Non Breaking Space Show № 84: Scott McCloud — Media and Their User Interfaces

Non Breaking Space Show № 82: Rachel Andrew — The Future of CSS Layouts

Screenshot of Rachel Andrew during interview

Today’s Non Breaking Space Show guest is Rachel Andrew. Rachel Andrew returns as our guest. She’s an author, international speaker, product is a web developer, speaker, co-founder of CMS Perch. She’s recently been writing and speaking about the future of web design layouts: CSS Grids and Flexbox.

Topics discussed with Rachel Andrew:

  • 1:00 → Sponsors: CSS Summit, Uber, CSS Dev Conf, Feed.Press
  • 3:05 → What book was that? What’s the title?
  • 3:24 → How is the process for writing a book?
  • 4:00 → What updates were needed?
  • 4:40 → Bringing it up to date, HTML5 is old, but it holds up
  • 5:24 → Perch, Perch Summit; how is it since we last spoke
  • 5:56 → Perch Shop
  • 6:22 → Perch allows you to drop CMS into HTML sites
  • 7:05 → Features in Perch Shop
  • 10:00 → Keeping up with VAT taxes
  • 11:40 → What are the digital pieces of proof of location for purchases in Europe?
  • 14:15 → UK voting on leaving the EU
  • 14:40 → Small business struggle with the record keeping aimed at big business
  • 16:33 → Christopher’s boring city tax story
  • 22:30 → Speaking schedule
  • 24:30 → How is flying in and out of the US?
  • 26:15 → Are you a die-hard Omnifocus user?
  • 28:25 → How do you have your projects set up? At home? Hobbies?
  • 29:30 → I like the idea of context. Context should be a priority
  • 30:10 → “Brain-dead option” in Omnifocus
  • 31:50 → Talking CSS layouts
  • 33:52 → What is the difference between CSS grids and Flexbox?
  • 37:56 → Does Flexbox solve the problem of positioning elements?
  • 38:40 → Is there a far less reliant on media queries?
  • 41:00 → Layout at the moment is really hard
  • 42:00 → As an author, how do you handle browsers and updates?
  • 43:18 → When do you think CSS grids will be stable?
  • 44:11 → Is feature browser flag the replacement for browser vendor prefixes?
  • 48:30 → Rachel’s books about grids and layouts
  • 50:10 → How did you get into running?

Non Break­ing Space Show is still free of charge to owners of Steph Curry’s dad shoes along with the show notes and resources: Non Breaking Space Show № 82: Rachel Andrew — The Future of CSS Layouts

Setting Chrome Flags for Experimental Web Browser Layout Features

Page layouts are set for a revolution. We’re mostly waiting for the majority of browsers to support new layout technologies.

One of those technologies, CSS Flexbox, allows for easy placement and styling of navigation menus, image galleries, photograph thumbnails, centering objects, and so on. Basically, anything that designers would have thought should have straightforward with web design is now possible. 

CSS Flexible Box Layout Module

Method of positioning elements in horizontal or vertical stacks. Support includes the support for the all properties prefixed with ‘flex‘ as well as ‘display: flex‘, ‘display: inline-flex‘, ‘align-content‘, ‘align-items‘, ‘align-self‘, ‘justify-content‘ and ‘order‘.

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 4*
  • 2*
  • 10*
  • 12.
  • 3.1*

Mobile / Tablet

  • 3.2*
  • 2.1*
  • 12.
  • 59
  • 54

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

While Flexbox can handle the layout within portions of a page, true page layout design is a bit aways. 

The technology powering page layouts, CSS Grids, is still awaiting for browser support.

CSS Grid Layout

Method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 25
  • 19
  • 9
  • 28
  • 6

Mobile / Tablet

  • 6.0
  • 4.2
  • 37
  • 59
  • 54

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

However, the latest browser vendors are experimenting with the implementation of the CSS specification with new browser builds. What that means is that web designer and developers can turn them on for testing out cool new stuff like CSS grids!

Enabling Chrome Flags

In the Chrome browser, type in the web address chrome://flags/. This action results in a list of experimental browser features available to you.

NOTE: As the warning states at the top of the flags page, these features may go away at any time in a future release. Or worst, they might make your browser something you really do not want it to do like delete data, crash your browser, etc. It’s called experimental for a reason. If we stick to page capabilities, though, that should likely not be that much of a problem.

To turn on CSS Grids, scroll down to Experimental Web Platform features and select enable.

Experimental Feature Display

So that the features can take hold, the browser prompts you to restart the Chrome browser.

Relaunch Chrome Browser

To make sure you have browser displaying CSS grids, check out Rachel Andrew’s Grid By Example lab making sure to check out each of her layout examples.

Learn More about CSS Grid

Rachel’s has done a lot of speaking and writing about new layout technologies. She even has a great online master class about layouts.

To hear Rachel Andrew’s thoughts on new layout technologies, listen to her interview on the next Non Breaking Space Show episode! Sign up for the The Non Breaking Space’s newsletter or subscribe via iTunes.

Difference Between a Good Designer and a Great Designer

Leslie Jensen-Inman

In the upcoming episode of Non Breaking Space Show, I interview Leslie Jensen-Inman about the new UX design school, Center Centre, she is co-founding with Jared Spool.

During the research for what companies are looking for, they asked what makes good designers become great designers–a wonderful asset to the team. The answer was interesting.

The difference between a good designer and great designer is not having a firm grasp on color theory, design theory, a history of graphic design, or knowing a plethora of CSS and JavaScript techniques.

Leslie says a great designer has those technical skills as well as soft skills, which are “personality traits that characterize one’s relationships with other people”.

For a designer, soft skills means having the ability to give and take constructive criticism, possessing empathy and emotional intelligence, being able to talk about design to non-designers, and exuding professionalism.

Examples of professionalism include being prepared for meetings, arriving to meetings on time, being present during meetings, solving upcoming problems and looking for upcoming benefits for the team.

Are you designer with soft skills? If so, how did you learn them?

To hear more about Leslie’s thoughts on being a great designer and UX design schools, listen to her interview to be published tomorrow: Sign up for the The Non Breaking Space’s newsletter or subscribe via iTunes.

iTunes’ New User Interface

iTunes 12

It almost begs the question: Without new features, is it really necessary to alter the look and navigation of iTunes every couple of years? iTunes 12 feels like essentially the same app as iTunes 11, only less intuitive.

That’s an easy question to answer: “Yes.”

Previous generation of iTunes’ user interface felt bloated. It’s not what one would expect from a company that made its current dominance run out of streamlining the MP3 device experience. 

The Need for a Responsive Web Image Format

Images made the first web boom.

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. 

Apple to Publish Newspapers

According to The Telegraph, Apple is in talks with newspaper publishers to make an “iTunes for newspapers”:

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.

Add GIF Animations to Your Next HTML Email Newsletter

When I joined the board of AIGA Cincinnati, one of my duties I quickly found out was to help send out the email newsletters to our members.

I won't go into the long process of how to design an HTML newsletter (mostly because I wrote a whole chapter about it Professional CSS, 2nd Edition), but one curiosity I came across was that email clients support of GIF animations.

So, when it came time to build out the In Control Web Design Workshop Conference email announcement, I took up the challenge to integrate animation into the newsletter:

It's neither subtle nor interfering. The animation is more of a compromise in its use, which is how I think most animations destined for email blasts to members should be.

However, I will mention that when I first found out about this availability, I had thought of doing a Halloween animation in a similar vain to that car ad with a ghost in it.

So, next time you are designing an email newsletter to your customers or members, try adding a bit of animation to the mix and see if you get any beneficial results.