Let's Get Sassy: Responsive Web Design with Foundation and Sass

Category: Web Design, Public Speaking, Interactive

Created Using: Keynote, a projector and an awesome audience
Date: 2015

On October 5th, I gave a presentation at the 2015 HighEd Web Annual Conference. The conference, created by and for higher education web professionals, draws staff and faculty from colleges and universities across the country. Presentations are given on all sorts of topics, including design, development, content strategy, team building and management, marketing and social media.

My presentation, titled Let’s Get Sassy: Responsive Design with Foundation and Sass, discusses the benefits of using the tools Foundation and Sass to build efficient, fun, responsive websites. Here’s the full abstract:

“By now, we all know the importance of giving our users a consistent and engaging experience on any device they choose. We’ve listened to presentations and read articles about the best ways to handle content strategy, calls to action, and site navigation for mobile. Now, we’re ready to tackle a responsive design for our website. The question is, how do we actually build this responsive website? By using a front-end HTML framework and CSS preprocessor, of course! With our busy schedules, we no longer have the time to build a website from scratch, especially one that will work on every screen size imaginable. Writing plain CSS with lines and lines of duplicated code is not only time-consuming, it’s difficult to maintain and update. In this presentation, using examples, we will take a look at the hows and whys of using Zurb’s Foundation framework to quickly build a responsive website layout, and at using Sass (Syntactically Awesome Style Sheets) to make writing and updating CSS not only quick and easy, but enjoyable.”

Downloads

Feedback

Twitter feedback: from Megan Clancy (@meganclancy) "Well, I'm sold. Sass looks awesome. Thanks, @iamaligray! #heweb"; from Jonny (@Jonnytron) " @iamaligray has convinced me to try @SassCSS with a sweet, cat-laden presentation at #heweb15"; from Christine Osazuwa (@c_osazuwa) "You can use if/then statements in Sass, and my mouth just dropped open. How exciting! #heweb15"; from Stephen C. Fornal (@mr_fornal) "Plain CSS is a pain in the ass, so let's use Sass #heweb15" "Ready to get sassy! #heweb15"

Twitter feedback: from Lisa Lau (@lisalau) "Amazing tips (sprinkled with fun cats!) from @iamaligray on responsive design with Foundation and Sass #heweb15"

Twitter feedback: from Gabriel Nagmay (@nagmay) "I'm not at #heweb15, but if you are - go check out Let's Get Sassy! by @iamaligray"

Compiled feedback from the audience – scores are the average of 1-5 from 65 responses:
4.11 – The presenter was well prepared and knowledgeable about his/her topic
3.69 – The content was presented at an appropriate pace
4.05 – Session visuals (slides, handouts, etc.) were easy to read and appropriately used
3.60 – This session met or exceeded my expectations
4.06 – The topic area was timely, relevant and useful to me in my current role
3.71 – I would recommend presenter(s) consider presenting at future conferences

More feedback, the good:

  • She was awesome and very engaging.
  • Was very knowledgeable about the subject. Loved all the cats
  • Great job, loved the code samples.
  • Fantastic talk
  • Super interesting! Great visuals for illustrating how foundation divides the page.
  • A little nervous but great content and info!
  • It’s great to learn a little bit about sass and foundation.
  • Nice visual slides that showed the grid.
  • As someone that uses Foundation and Sass, I thought she did a great job as a quick intro.
  • Awesome presentation!
  • Nice presentation! Keep presenting, it’s great for your personal growth.
  • I applaud the work that the presenter put into this session. I only wish that she would have been a bit more confident in her presentation skills.
  • I know you feel like you’re doing a bad job, but that’s really just because you care. You’re doing a great job. You don’t have to apologize. Honest! https://www.youtube.com/watch?v=OCt-l1Jm4TE
  • You’re too pretty to be a crazy cat lady; didn’t get the cats. I found Sass useful but Foundation was pointless after Bootstrap presented.
  • She was little bit nervous as a presenter, but good job. She will do better maybe next time. kind of went fast.

…and the bad (not bad, just constructive):

  • Talks a bit fast, slow down. :)
  • The pace could have been a bit faster.
  • I was really hoping for more information on advanced functions and usage
  • For a person with experience in coding, I felt like she went slower than usual. Thought she was going to go more in-depth with more tips and tricks with sass than just a general overview. Add more of a process on how to use sass (not just what the code is). Love the cats. Audience wasn’t responsive to cats, BUT I WAS. 0 to 100 real quick.
  • Would love to see more in depth coverage of SASS
  • Talks a little fast/mumbly. Saying sass is like coffee script is a little misleading – they are both nicer ways to work with a language that get compiled to what the browser expects, but lumping coffeescript and less together as similar to sass seems odd to me. A few cat pics are fine but that was a lot of cat theme. A lot of slides were screenshots of webpages that were hard to read.