Recently I have helped take over leadership of the Virginia Tech Web Developers Group. We are an informal bunch who come together and share knowledge about our craft and trade, in the hopes that we can all become better at web development. This will also have the benefit of promoting best practices across many departments on campus. We eventually hope to engage in more outreach. Enough about us though, this post is about what I learned.
This month, the main presentation was given by a friend of mine as well as my SO who both work at a development, media, and marketing company in the area called NewCity. They do a lot of work with both colleges and universities as well as responsive design layouts. This is why I invited them to come and give a presentation on what is responsive design, how does it work, and when should it be used.
I spend most of my time building internal apps or working on back-end features. This is why I was excited to have people whom I respect and have a lot of experience in the domain come and present on the topic of responsive design.
There was a lot of great information in the presentation and I will be sure to link to it later at some point, here are the top 15 things I took away from the presentation:
- Responsive design is more than just screen sizes. Sometimes you have to adjust or even reduce content in favor of usability.
- Using '%' in your CSS everywhere is not responsive, it's "elastic."
- "Adaptive" design uses JavaScript to reposition elements and usually has a fixed number of sizes.
- It's easier in the long run to start mobile first if you know it will be required later.
- Have a feature "ice box" so you don't end up saying "yes" to everything.
- Take advantage of breakpoints using media queries.
- The LAST TRUE CSS rule (top to bottom) is the one that will be applied.
- There are no hard rules for breakpoints sizes. TEST TEST TEST!
- When going "mobile first" use min-width.
- When going "desktop first" use max-width.
- Use tools like Firefox's responsive design view, and responsivepx.com to help test different break point behaviors.
- Read up on "future queries."
- Organizing breakpoint blocks next to the CSS selector (in context), is easier to maintain long run.
- Use your analytics to determine what to test and target.
- Learn SASS.
I am thankful to have had the opportunity to help this presentation come together. I and others learned quite a bit.
I plan on learning the basics of SASS so I can do an intro presentation next month. I also hope to cover gulp.js (and some Grunt) as well.
Share and enjoy!