Sep 23, 2014

Tips for Retina View

Developer

The increased resolutions on newer smart phones, Retina Display to borrow Apple’s terminology, allow for much crisper images on the mobile view of our websites, but they cause problems for us as developers.  There are several different methods for using these images, and most of them are rather cumbersome.  It also makes the development more tiresome since you have to produce two images even in the development phase.  We have found a few shortcuts in both areas.

Sep 19, 2014

Graceful Fail vs. Progressive Win

Designer Developer

You’re sitting at your computerator with your web development ‘arme de choix’, staring at a blank page, wondering where to start…

If you’re like most of us (and statistically, you are) when you start busting out the div tags, your instinct is to design for a desktop and use clever automagical media queries to gradually remove content and functionality as the viewport shrinks.

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.