RWD – 7 Tips for Creating Responsive Web Designs!

View Github Repository Open presentation in a new window

daniellecloss

See all presentation from daniellecloss

RWD – 7 Tips for Creating Responsive Web Designs!

0 0

responsive-slidedeck

Slidedeck for my 7 tips for responsive web design talk

On Github daniellecloss / responsive-slidedeck

RWD

7 Tips for Creating Responsive Web Designs!

Created by Danielle Closs / @daniellecloss - hello! I am Danielle - I work as a frontend developer at Arbor Networks, making the UI of our network security software - I have about 7 years of experience in web development - Let’s talk about RWD!

What is RWD?

RWD defined, from Nielson Norman Group:
“Responsive design teams create a single site to support many devices, but need to consider content, design and performance across devices to ensure usability.” - RWD defined - key points here are “single site to support many devices” and "consider content, design and performance to ensure usability" - let’s talk more about how we can support this definition

7 Tips for RWD

Use SVG Use Web Fonts Use Percentages Conditional Image Loading Use RESS HTML Prototypes Component Design and Dev - Here is a quick overview my 7 tips for creating responsive website designs - let’s start with the first one, use SVG

1. Use SVG

Advantages:

  • Resolution independent
  • Resize and recolor (on the fly!)
  • BONUS: clean animation

Tools:

For smaller single/dual colored icons, consider an icon font instead. - resolution independent, graphic won’t degrade at higher pixel density - resize and recolor easily with css or on the fly with javascript - BONUS: clean animation at any size or pixel density! - use illustrator, inkscape or other graphic editors to export svg

2. Use Web Fonts

Advantages:

  • Custom fonts that resize with your design
  • Unify your design
  • Maintain your brand style

Examples:

Don't use too many, you will take a performance hit and clutter your design! - resize fonts with your design, depending on the device using the site - custom fonts can help unify your design - and maintain your brand style - use google fonts, font squirrel, fonts.com or others

3. Use Percentages

Advantages:

  • Resize elements to fit in your site
  • More consistency across your design
  • Less breakage across your design
  • Consider using FlexBox if you aren't supporing IE11 or earlier (Lucky you!)
Make sure to update your padding and margins to percentages too! - resize elements to fit the device viewing the site - gives you more consistency and less breakage with your design - consider using flex box, if you aren’t supporting IE

4. Conditional Image Loading

Advantages:

  • Page load performance boost
  • Fewer resources loading to smaller devices

Examples:

Don't use display:none to hide on different devices, and save a user's bandwidth today! - page load performance boost, loading what can be handled by the device - fewer resources loading to the device, important for mobile users - use HTML5’s picture element, or picturefill.js poly to load images based on device width - equally important is conditionally loading other resources

5. Use RESS

Responsive Web Design + Server Side Components

Advantages:

  • Only load resources (css, js) you need
  • Client and server technologies determine resources

Examples:

- only load the resources (like js and css) for the device viewing the site - client and server technologies determine device, which determines the correct resources to load - use server side device detection, or use netbiscuits.com or mobiledetect.net

6. HTML Prototypes

Advantages:

  • "Try out" design and development techniques
  • Spot problems early and quickly
  • BONUS: great tool to communicate complex concepts to clients!

Examples:

  • Build "by hand"
  • Or, use a tool, like Adobe XD
- Try out design and development techniques early, to determine what works - spot problems early and quickly, easier to pivot before things are set in stone - BONUS: this is also a great tool to communicate complicated concepts with clients! - build prototypes by hand, or use a tool like Adobe XD

7. Component Design and Dev

Advantages:

  • Flexible components for a flexible site
  • Retain consistency in your design
  • Easy to rearrange/rebuild (Lego approach)

Examples:

- flexible components for a flexible site - retain design and development consistency across the entire site - this makes it easy to rearrange and rebuild as needed (like legos!), during site development and as requirements change - use OO development techniques, style tiles and atomic design

Find me here!

www.daniellecloss.com

@daniellecloss

github.com/daniellecloss

Thanks! Hit me up, if you want to know more!