katebolick.com and responsive web design lessons learned

Building an online presence for an author is something I've always yearned for. It affords the opportunity to embrace typography and whitespace. It is an opportunity to let the words, really do the talking.

Put that in the context of the disruptive spread of the smartphone and tablet devices and you have an amazing opportunity.

Building a responsive website that works on mobile devices, tablets and desktops is a passion of mine. This site showcases a number of techniques to enhance the user's experience on any device.

Lessons

There are a lot of responsive frameworks to use and picking the one that works with your own work style can be really challenging. I researched twitter's bootstrap, Zurb's foundation, and ending up really enjoying working with 1140 css grid and moved ahead with it.

Images take up a lot of bandwidth

This was the first site I'd worked with that used media queries and breakpoints to determine the presentaion of the output. But this was about more than just presentation. This was a project that forced me to take bandwidth stingyness to a new level. We don't always have 5 bars on our mobile devices. We don't all have unlimited data plans. I wanted to serve up smaller images to smaller screens. That is where adaptive images came in.

From its website:
Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images. No mark-up changes needed.
I thought it was super cool.

Designing in the Browser can be liberating and a huge timesaver

I found myself embracing and working in firefox using the firebug plugin. It streamlined the process of creating templates and final designs by allowing me to iterate my way through a designs, see what works in the browser, and move on to the next challenge. It allowed me to design the site for mobile first, embracing the concepts from the book Mobile First, and then work my way to tablet sizes and then to desktop size, and then finishing it off with the large desktop size.

This was aided by a little screensize javascript technique I outlined in this article .

There is so much more to learn and do

Utilizing adaptive images just barely scratches the surface of what's possible. I took these lessons and moved on to utilizing Modernizr,

JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
on other projects. It allows you to serve up different css files and javascript files based on media queries. This would allow you to not only serve up smaller images, but wholly smaller and different scripts and slideshows, background images,that are optimized for smaller and touch experiences.

This is an incredibly exciting time to be building websites and web experiences.

Stay tuned for more developments!

Add Your Comment

Comments powered by LudwigDisqus for ModX


Get Growth

Grow your Shop's Revenues

Curious? See Past Issues

Bike Shop SEO

443 Lincoln Circle
Louisville, CO 80027
Bike Shop SEO © 2018 | Sitemap