Sep 19, 2014

Designing Beyond the Vertical

Designer

We’ve all heard it before: good design is hard. Good web design not only has to look amazing, but it also has to be functional, often without the knowledge of what platform or resolution your design is even going to be used on. Responsive web design – a simple concept at its core – gave web designers and developers the opportunity to account for the unknown. We perfected the use of media queries, installed respond.js to account for the IE holdouts and core concepts were adopted.

The basic structure of responsive design is usually a 3-2-1 pattern. Main content and sidebars are eventually reduced to one long vertical column of information on our phones. And while this is responsive web design, it’s disheartening to think that’s all we can do to make our sites work well on all devices. So I want to challenge us all to design beyond the vertical; to think about the other aspects that go into making a well-designed responsive site.

May 5, 2014

Load Time: Be Kind to Your Users

Designer Developer

A few years ago, I was messaging a friend and offered to email him a file, making the assumption he would simply pull it up on his computer when he got home. His response was more jarring to me than it should have been.

“I don’t have a computer.”

The idea that my friend might only get online through his phone did not even occur to me. It should have, because I had already been developing mobile-friendly websites for a little while, but it didn’t. With the evolution of mobile devices and cloud services, more and more people don’t really need a computer on a daily basis.

Apr 28, 2014

Mobile Emulation View in Chrome

Developer

Google Chrome makes it pretty simple to see how your page will look on a variety of mobile devices using its built-in Emulation view.

http://www.sitepoint.com/use-mobile-emulation-mode-chrome/

The article above lists instructions for Chrome 32. As of this writing, Chrome 34 is available. The instructions on accessing the Emulation View are a little, but not substantially, different now.

For Macintosh, click on View > Developer > Developer Tools (CMD+OPT+I). Click into the developer console and press Escape. Select Emulation from the view window, and select the device you would like to emulate.

For Windows, click on Menu > Tools > Developer Tools (CTRL+SHIFT+I). Click into the developer console and press Escape. Select Emulation from the view window, and select the device you would like to emulate.

Apr 4, 2014

LESS and SASS: Shortcuts for Creating Great CSS

Developer

At the April 2014 IT Forum, John Phillips and I had a great time discussing the differences between LESS and SASS, and how using a CSS preprocessor can decrease your front-end development time.  All of the examples used in the demonstration are listed using Codepen.io.  Codepen is an online playground for developing SASS, LESS, javascript and HTML. Feel free to play with the examples to gain a better understanding of SASS and LESS.

Also, here is a link to the PDF version of our presentation to download and review.