Speaker: Matt Haff
Twitter: @CWSites
Presentation Slides: Download PDF
Original Post: What You Should Know About Responsive Web Design

What is Responsive Web Design?

… an evolutionary milestone in the development of web and interaction design as a practice and as an industry.

Jeffery Zeldman

“[The web] should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.”

Tim Berners-Lee

“If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else. Web design is responsive design, Responsive Web Design is web design, done right.”

Andy Clarke

Doing It Right

• Accessibility
• Web Standards
• User Interaction
• Meet the user where they are – mobile or stationary
• Allow for consumption of content
• Keep in mind there is no silver bullet

What To Tell Your Boss

• SEO – Google has specifically said that responsive design “is Google’s recommended configuration.”
• Easier to Maintain – you only write content once and it is published across every platform, not to mention it’s future friendly
• Content Consumption – make it easier for the customer to get to the content that they’re looking for.

Design With The User In Mind

Reading Experience

• What is the user trying to accomplish?
• Content should fit the screen
• Change the navigation to make it easier for the user
• Don’t strip content, the same information should be accessible across all devices, just change how they access it

“Mobile users will do anything & everything that desktop users will do provided it’s presented in a usable way. Assuming people on mobile “won’t do that” is a losing proposition. Don’t penalize users with missing content & features just because they aren’t on a full screen.”

Brad Frost

“Design is thinking about content and how to put it together. you need to focus on the whole. layout does not equal design.”

Luke Wrobleski

User Experience

• Is what you’re doing common practice or do different devices have different user experiences?
• Attention to details – size of links for touch
• Is it necessary? Everything should have a purpose.
• What is “above the fold” on different devices.
• Cursor vs. Touch – some blackberries still use cursors.

Navigation

• Commonly accepted main navigation is a slide-down menu
• Must be accessible, intuitive, common practice
• Does it work on the smallest screen?
• Don’t make it so long that a user is forced to scroll.

The Way It Was Meant To Be

• RWD = WDDR
• HTML & CSS has always been responsive.
• UX is about meeting the needs of the user.
• Creating websites that adjust to different screens and devices is just the beginning.

Sources

• http://stuffandnonsense.co.uk/blog/about/i_dont_care_about_responsive_web_design/
• http://www.scientificamerican.com/article.cfm?id=long-live-the-web
• http://www.copyblogger.com/mobile-responsive-design-benefits/
• http://www.lukew.com/ff/entry.asp?1304
• http://bradfrostweb.com/
• http://www.webdesignerdepot.com/2013/01/the-new-rules-of-the-responsive-web/

Stay Hungry My Friends!

• http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
• http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/
• http://www.smashingmagazine.com/2013/02/25/there-is-no-mobile-internet/
• http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
• http://www.getfinch.com/2011/08/its-not-responsive-web-building-its-responsive-web-design/
• http://www.hongkiat.com/blog/free-responsive-wordpress-themes/

Speaker: Michael Novotny
Twitter: @mnovotny

Safeguards

• jQuery & other default scripts that are included in wordpress
• Conditionals – limit your scripts to only load on pages that are shown at that time, you’ll run into less script conflicts

Testing

• Data – wptest.io importable library of tests for WordPress, imports a bunch of different content types into wordpress to test out multiple examples
• Setup – adjust wordpress settings to show every process that’s running
• Plugins
  • Debug Bar (base plugin)
  • Log deprecated Notices – log of what is now deprecated in different versions of wordpress
  • Theme-Check – runs through your blog and gives you warnings and alerts for things you should fix/change
  • Theme Mentor – above and beyond the Theme Checker plugin and makes sure that your plugin is not trying to deregister jquery, etc.
  • RTL Tester – puts your theme or plugin into the perspective of reading right to left (how the rest of the world works)
  • Slim Jetpack – jetpack without having to connect to wordpress.com to start using it. Assumes everything off, so you only turn on what you actually need.
  • Browser cache – when you’re tired of bashing your head against the wall.

Troubleshooting

• Plugin vs. Theme vs. Core vs. Server/Configuration/PHP issue
• Chrome Developer Tools
  • Launch Chrome Developer Tools
  • Right Click > Inspect Element
  • Access to live editable CSS, Source code, Console
• Cross browser & device testing
  • Viewport Resizer – simulates actual sizes and devices.
  • Browser Stack – service for testing different OS, Browsers and devices

Speaker: 
Tom McFarlin
Twitter: @tommcfarlin

• The wordpress codex – “The Bible for WordPress”
  • the wordpress manual written for… bloggers, designers and developers
  • go here first not Google!
  • how to use it
    • search for what you’re looking for
    • reading how to do it “the WordPress way”
    • implement your solution
• the WordPress API – application programers interface…still just as meaningless.
  • APIs are a way to make something happen
  • They allow us to make WordPress do stuff
  • Functions that make development easier
  • how to find them
    • bookmark the codex
    • identify what you’re trying to do
    • find the associated apis
    • read, practice, implement
  • how to use them
    • the function’s description
    • the arguments it accepts
    • what the function returns
  • many types
    • WordPress hooks, plugin API, widgets API, settings API, and lots more!!!
    • WordPress hooks
      • actions – something has happened in WordPress
      • filters – function that hands you content that’s about to be rendered
    • Plugin API
      • uses WordPress hooks
    • Widget API
      • has a boilerplate that will be used every time you write a widget
    • Settings API
      • If you want to add a new user settings element in the admin panel.
  • coding standards
    • how code should be written for wordpress in core, plugins, themes, etc.
    • all code is GPL – let’s make it look good
    • expectations for us and others – your code effects others
    • Create a cohesive experience
  • Finding your niche
    • know your market – the intersection of what you love doing and what you’re best at doing
    • Themes
      • If you’re into design and front-end development (and maybe backend)
      • If you’re more into presentation than development
    • Plugins
      • server-side development
      • application-like functionality
      • extending WordPress
    • Blogging
      • education
      • writing
      • documentation
      • sharing knowledge, information or seeding discussion
  • educating yourself – you’re never done
    • several releases per year
    • new blogs, technologies & practices emerge
    • someone is more capable than you
  • practical tips
    • follow those aligned with your niche
      • plugins
      • poststatus
      • envato
      • smashing magazine – wordpress channel
      • wordpress codex
      • make.wordpress.org
  • read the comprehensive blogs
  • design, code, or blog frquently… share what you’re learning!
  • don’t stop!
• just because someone already has a plugin that doesn’t do that, doesn’t mean you shouldn’t write a similar plugin. The world doesn’t work like that!

Speaker: Evan Mullins
Twitter: @circlecube
Speaker slides: circlecube.com/wordpress

Learn how to mod themes the right way. Using child themes you won’t lose your edits when there’s a theme update

Child Themes 101

• your theme is your brand, design & identity
• http://codex.wordpress.org/themes
• Analogies: WordPress is the bones and muscles: the theme is the “skin”. Or if you think of your website as if you’re building a house: WordPress is the foundation and frame and the theme is the paint, curtains and flooring.
• Fun stuff: TheUselessWeb.com & GenerateWP.com
• Types of themes – just because you’re paying…doesn’t mean it’s better
  • custom
  • free
  • premium
  • customized
  • starter
  • framework
  • parent
  • child
• Framework – the admin functionality such as support for sliders, custom posts, etc.
• child themes – inherit characteristics of the parent theme
  • when the parent theme is updated your modifications are preserved
  • it’s a head start, for items that you use on a regular basis.
  • don’t edit core files!
  • parent theme styles aren’t automatically pulled into child
  • How to create a child theme?
    • install parent theme
    • make your child theme folder in the themes directory
    • add your style.css — wordpress requires in order to recognize the theme
    • copy parent functions.php (may not be necessary)
    • add your meta — use meta example “Template: twentytwelve”
  • plugin “Child Themify”

  Child Themes 102

  • reasons to child-theme
    • add widget areas
    • custom post types
    • custom taxonomies
    • responsive
    • rebrand
  • In the future, all themes may be required to facilitate a child theme
  • Popular Parent Themes
    • twenty somethings
    • thematic
    • genesis
    • hybrid
    • underscores
    • require foundation
    • starkers
    • Twentytwelve – responsive out of the box
    • Theme template hierarchy – which template file(s) will WordPress use when it displays a certain type of page? (lookup diagram)

Speaker: Nathaniel Schweinberg
Twitter: @nathanielks

• git doesn’t overload your HDD with all the extra versions
• git allows you to focus on the feature you’re writing
• git allows multiple developers to work on the same project

how to get started?

• install git
• open terminal
• get it setup
  • git init — inializes a git repositroy in current folder
  • git add . — adds file . to the staging area (. means current folder and all files inside)
  • git commit -m ‘initial commit’ — commits files added to staging area (-m adds commit message)
  • git status — shows the current status of the working directory
• branching encourages a few things
  • allows you to branch very easily
  • encourages feature based workflow
  • allows for experimentation
• git branch name — create new branch to work from
• git checkout branchname — sets the working branch to branchname
• git merge branchname — merges committed changes from branchname with current branch
• Repositories – bitbucket unlimited private and github unlimited public repos
• two basic actions
  • git push — pushes changes to remote repo
  • git pull — pulls changes from remote repo
• git clone — duplicate a remote repository to your computer
• commit early, commit often
• use descriptive commit messages
• master branch is stable ONLY. – always develop on a separate branch
• branch naming: initials/feature-name – ex mh/cool-feature

Resource: WordPress skeleton

Speaker: 
Teresa Rosche Ott
Twitter: @thesimplerweb
Speaker Slides: http://thesimplerweb.com/less

• Great tool – css2less.com
• use a compiler to turn it all into CSS
• @import ready-made libraries of goodness
• two types – less or sass.
  • LESS
    • better for people that just dabble in CSS
    • relatively simple language
    • easier initial setup than sass
    • power to spare for the average WordPress project
    • can run on the server
    • virtually everything you learn to do with less can be used with sass
  • SASS
    • better for programmers
    • can use compass – a robust & well maintained and updated library of SASS goodies
    • Initial setup can be a pain for non-developers
    • Programmatically more powerful than LESS: Can use logical comparisons to set styles
    • Has features that enable compiled stylesheets to be more concise
• 3 simple ways to start using LESS now
  • use variables to keep colors & fonts consistent & easy to change
  • color operations – great for darkening/lightening colors
  • mixins
• Using LESS with WordPress themes
  • create a “less” subfolder in the theme directory
  • duplicate the theme’s style sheet. move the copy into the /less directory & rename it from style.css to style.less
  • launch your compiler; set it to watch the /less directory you created
  • set it to save the compiled CSS to the theme directory, which will overwrite style.css
  • open the style.less file; import any LESS libraries you like: @import “bootstrap”;
  • Walk through your newly created style.less file & find repetitive & inefficient language to replace with LESS
  • Save & Compile
  • Upload the revised/new style.css – no need to upload the LESS files

Speaker: Diana Simon

dianasimon.net/colortheory is the site Diana used for demo. There you can find links to color wheels and a color scheme designer. She likes to sample colors from the photos in the website to use for text and graphics. Also visit Kate Smith’s Sensational Colors and Visibone to learn more about colors and find html and rgb color mixes. Pantone is famous for researching and leading color trends. Last year’s color of the year was tangerine, this year it’s emerald green (PMS 17-5641)

Adobe also hosts a site on the subject of color, called Kuler. Use a plug in for Firefox called Fire Picker to choose colors from any website. It will give you the hex number. You can change your colors to see what it will look like – if you like it, copy the code and use it to change the actual code in your website child theme.