There are 3 pillars of responsive web design, according to Les
1. Fluid grid
2. Fluid images
3. Media queries
Les spoke about how designers might adopt more flexible design practices: from prototyping client ideas, establishing more collaborative workflows for creative teams. Les shared his best practices and best tools as well as a recent example of a responsive site.
Les advises to always start at a small scale and work bigger in order to have premium perspective. With the growth of smart phones Les suggests starting with mobile first. A good practice is to use a columns template. As you increase your screen size you can add columns and vice versa. Les recommends using fluid for mobile then switching to a fixed width grid with containers for desktop.
For best communications with development teams, design files that fit to grids. Les believes it takes more time to develop a PSD that will not be used, than one that is based on grids. The best practice is to work with the developer along with the design ideas. Les has several other best practices:
- Write everything in ems (it is crucial for high resolution)
- Use CSS for gradients, lighting, shadowing
- Use inline blocks. Floats were meant for text flow
- Use grid-container and grid-cell to allow for floatless layout
- Break free from the pixel, use .svg file format
- Use vector images for best scaling
Les shared some of his time saving tools. He writes his websites with SaaS. To create multiple file sizes, he recommends Jengo. A great tool to size video for responsive sites is fitvids.js. Les uses Modernizr for feature detection of browsers. He is an avid user and contributor to Git Hub. Check out Breakpoint, a grid system developed by Les James. Breakpoint generates media queries at column break points so that your layout always has enough room to fit on the screen.
Thanks to Les for rocking the AIGA Raleigh September Homegrown lunch, and sharing his slides with those of us not able to attend.
Save the date for our October Homegrown.