What is responsive design, you ask? Citing the complexity of the Design industry as what fuels his passion, Les James spoke to an engaged crowd at the September Homegrown event of the Raleigh chapter of AIGA. With experience that ranges from garage band websites to enterprise-leve,l front-end templating—once rooted in photography and print design—he now finds his passion in transforming visual designs into professional-grade HTML, CSS and JavaScript. For him, front-end development is the perfect balance between the art and science of web design. Les is the senior front end developer for Capstrat and he runs a monthly web development meetup called Function Pink.
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.
