Rustbelt Refresh Web Design Conference

Blog Date: 
Wed May 15th 2013
Rustbelt Refresh Web Design Conference

Writing about the May 3, 2013​, Rustbelt Refresh Conference (RustbeltRefresh.com - @RustbeltRefresh) is difficult, since there was so much interesting information shared at the meeting that it is impossible to include it all.

Big thank-you to Brad Colbow, Bridget Stewart, & Brad Dielman for their leadership

First, I want to send a big thank-you to Brad Colbow, Brad Dielman, and Bridget Stewart for their leadership in making this Cleveland conference dedicated to web design and front-end development a reality! (Follow/view: @BridgetStewart - ShallowThoughts.org; @BDielman​​ - BradDielman.com; @BradColbow - ColbowDesign.com) I am looking forward to their next Rustbelt Refresh Conference in 2014!

I also want to put in a plug for Cleveland Public Library (CPL.org - @Cleveland_PL) as the conference location. I recently learned about all the computer training resources available at Cleveland Public Library's TechCentral. TechCenral is located next to the auditorium we used for the conference. Learn more about TechCentral online here. The auditorium meeting space has a modern feel to it that worked well for the Rustbelt Refresh Conference. The only downside was that the room is not wired with the many electric outlets needed by participants with laptops at an all-day conference. I was able to tap into the power supply of the sound system with my own extension cord, and shared the power with others.

 

Rustbelt Refresh Web Design Conference

The Era of Intentional Layout

Eric A. Meyer (MeyerWeb.com - @MeyerWeb)

Timing is everything! Eric Meyer kicked off the conference by talking about important Cascading Style Sheet 3 (CSS3) elements. One year ago, in a CSS3 class that I took, these CSS3 items were presented as too experimental to bother learning for the browsers at the time. One week ago, in the Advanced Layout and Animation discussion at the Cleveland .Net Study Group, they were presented as being important to use today. (See Flexbox and Grid links I shared with the Cleveland .Net Study Group participants on April 24, 2013.)

Eric Meyer showing settings on old browserEric Meyer on old table design. Funny!Eric Meyer shows book: CSS for BabiesEric Meyer on Flexbox

The most important take-away from Eric's talk is that it is a vital job skill to be able to let go of our old limitations. The "era of intentional layout" means we now will have the power and control to do web layout the way we want to, but to do this we will need to get rid of our old parameters.

Resources:

Responsive Layouts Beyond the Sidebar

Jen Simmons (JenSimmons.com - @JenSimmons)

Homework! Let's start with the homework that Jen Simmons gave to all the attendees -- watch Karen McGrane's (@KarenMcGrane) Adapting Ourselves to Adaptive Content.

 

Karen McGrane's​ slides and a different version of the video found here:
Adapting Ourselves to Adaptive Content (video, slides, and transcript, oh my!)

Jen showed several websites that were good examples of responsive design. After the meeting, Jen shared via Twitter a great Firefox browser tool to view websites.

Here are some of the websites we viewed at the meeting. I suggest trying to look at them using the Firefox Responsive Design View feature (try on the keyboard, press ctrl-shift-M on Windows or Linux, or cmd-option-M on Apple).

Jen noted that cursive writing is no longer taught to 4th graders, since this skill is not needed anymore. She went on to suggest that schools should teach HTML as a logical, useful replacement. The idea of teaching HTML to students appears to me to be a recurring theme (examples I have found: Code.org; Mashable's students should ALL know: "6. HTML and Basic Coding").

From my notes, I wrote the following to represent the process Jen presented for web design. It is an oversimplification of what she presented, but it is worth noting that the process starts with content structure.

  1. Design Content Structure
  2. Design Source Order
  3. Design Narrowest Layout (somewhat)
  4. Design Wider & Wider Layouts (& narrow)

Resources:

Making Our Users Feel Great

Josh Walsh (MadeForPeople.net - @JoshWalsh)

I was fortunate to have Josh Walsh do the first public presentation of Making Our Users Feel Great: The Psychology of Making Things Easy to Use at my February 16, 2013, WebSigCleveland.org meeting. He wanted to kick off his first nationwide talk here in Cleveland, and I was pleased that he approached me to speak at WebSigCleveland.org. Information on the Josh's #UXtour.

Now at Rustbelt Refresh, doing his 33rd presentation, he still has the fire for the subject of focusing on users. A large part of his presentation involved stories that have successful user focus. Here is a video about one such success story.

 

I share Josh's strong beliefs about the importance of culture within an organization, and think it is exciting that his career provides him with great opportunities to see this in action. Josh says it is most important to design culture first. He recommends hiring employees who are a good fit for the organization's culture, since you can always train for skills.

HTTP: Get to Know the Foundations of Your Career

Jonathan Penn (CocoaManifest.net - @JonathanPenn)

"Daddy, what is ach-tee-tee-pee?" - Jonathan Penn presented an incredibly witty look behind the scenes at all of our favorite protocol -- Hypertext Transfer Protocol (HTTP) -- through his son's inquiries. Yes, we learned the "facts of life" of HTTP.

Jonathan described how information is passed between a web server and client in the header, and the evolution of standards to simplify this process. I highly recommend seeing Jonathan's talk if he reprises it at another conference.

Resources:

Finding Your Perfect Web Type Match

Val Head (Valhead.com - @vlh)

Fonts have roles. Val Head shared with the Rustbelt Refresh Conference attendees that many typefaces were designed to solve specific problems. She pointed out that since most fonts were designed before the Internet, why should we expect them to work well with the Internet? It did not matter much when fonts were provided to the client's browser from the their local machine, but with the 2010 start of embedded fonts, the web de​sign world changed. We can now use many more fonts than in the olden days, when we would only pick from low resolution fonts like Verdana​ and Georgia.

I was particularly interested in Val's talk, since I had presented a talk last year at the Cleveland Digital Publishing Users Group (CDPUG.org - @CDPUG) on Web Font Design: You Don't Have To Be Angry Anymore. My presentation was more on the technical side of things, so I enjoyed hearing Val present on the history and design of fonts. (See my blog posts: Web Font Design and Web Font Design - Part 2.)

Here are Val Head's Finding Your Perfect Web Type Match slides:

Here is Val's response when asked about her favorite fonts:

Remember that “Free web fonts are about as good as free fonts” (i.e., you get what you pay for).

 

Resources:

Take Your Markup to 11

Emily Lewis (aBlogNotLimited.com - @EmilyLewis)

“Don't be average.” Emily Lewis shared information on POSH (Plain Old Semantic HTML), new HTML5 elements, Microformats, Microdata, Aria, and challenged us to not be average -- to take our markup to 11!

Emily provided such a great list of resources in here slides and in her list of links, I decided to include them here:

Take Your Markup to 11
Rustbelt Refresh | May 3, 2013
EmilyLewisDesign.com/RustbeltRefresh

 

 
Emily Lewis on HTML5 StructureEmily Lewis on HTML5 StructureEmily Lewis - Take Your Markup to 11Emily Lewis - Take Your Markup to 11

Your CSS is a Mess

Jonathan Snook (Snook.ca - @SnookCA)

SMACSS (Scalable and Modular Architecture for CSS). Starting with ideas in his SMACSS book, Jonathan Snook presented a different way to organize your CSS. I thought his naming conventions were interesting, since they allowed for easy updates. I also found it interesting how he recommended using classes rather than ID for CSS, and how he demonstrated using child-selectors from the classes.

Here are Jonathan's Your CSS is a Mess slides from his talk at the Smashing Conference 2012 Conference. You can learn about Jonathan Snook's speaking engagements/topics here.:

After Party at the Corner Alley

The after party at the Corner Alley (@TheCornerAlley) was great. I really enjoyed having time to talk to new people and re-connect to others.

 

Rustbelt Refresh at Corner AlleyYum! Party food after Rustbelt Refresh ConferenceRustbelt Refresh Conference After PartyRustbelt Refresh After Party - Bowling at Corner Alley

Thank you, Josh Walsh (@JoshWalsh), for having Designing Interactive (DesigningInteractive.com - @we_are_di) sponsor the Rustbelt Refresh After Party.

After a full day and evening at Rustbelt Refresh, I went on to continue my evening/early morning at the Bal Ingénieux. To read about this, see my Bal Ingénieux, Ingenuity Cleveland blog post.

What Others Say

In my blog posts, I always like to include what others have to say. Be sure to read these:

If you know others who wrote about the Rustbelt Conference, please contact me via Twitter, or leave a comment below. Thank you.

#RustbeltRefresh Tweets

I always like to share tweets from events I attend. They often provide links to useful information, and great photos of the event. Don't miss out -- be sure to read the #RustbeltRefresh tweets. #FF -- I recommend that you follow these Rustbelt Refresh attendees on Twitter.

The JavaScript used by Twitter to correctly display tweets did not work with the large number of tweets. I split them into two HTML files shown in an iFrame. Click on links to view and give it a little time to load with the Twitter JavaScript-created view: