Saabi/vminpoly. Designing a responsive, Retina-friendly site. It's hard to believe I have been blogging for more than 7 years. Michael Wozniak, my hallmate during my freshman year at Georgia Tech, had gotten me into Gentoo Linux the year prior and told me he was playing with WordPress 1.2. Compared to the MediaWiki site I was running at the time that piqued my curiosity and I began blogging on WordPress on my G4 Mac Mini that summer. I immediately fell in love with it and began learning CSS and PHP to tweak the theme1. Eventually I found my thing – writing technical guides, product reviews and tech editorials. Unfortunately, I haven't blogged as much in recent past; my waking hours spent worrying about startup issues than crafting new content.
When the time arises, I thoroughly enjoy writing long-form articles and with that in mind I wanted to design a better experience for consuming them. Note: This article got rather long (15,000 words), so I split it up into a few posts. Mobile My last redesign in 2010 was not built with mobile in mind. Developing a responsive, Retina-friendly site (Part 1) In my last post, Designing a responsive, Retina-friendly site, I covered my design process and thoughts behind redesigning this site. I did not cover any aspects of actual development or any Jekyll specifics.
This post will mainly cover coding up responsive design and the third and final post will cover retina media queries, responsive images and more. Note: The final part to this series is now published: Developing a responsive, Retina-friendly site (Part 2). Jekyll + Rack on Heroku I last redesigned my blog in 2010 when I migrated from WordPress to Jekyll.
I eventually forked jekyll to support a separate photos post type outside of the main site.posts. I then wrapped it in Rack::Rewrite with Rack::TryStatic so I could host it on Heroku and 301 some old permalinks. Most of the configuration is in the config.ru file. To ensure deflater is properly compressing markup run this and you should see Content-Encoding: gzip returned: grunt watches over Then I created the grunt.js gruntfile2. Search. Responsive Email Templates - ZURB Playground - ZURB.com.
RESPONSIVE IMAGES. Comprehensive Responsive Web Design Tutorials. I’ve gathered some good and comprehensive tutorials about Responsive Web Design, for you to discover how to make your website more readable and efficient across various screen sizes and devices. If you haven’t heard about responsive web design these last 2 years then you’ve probably lived under a rock?
For those who really never heard of Responsive Web Design, here’s a quick definition by Wikipedia: Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices (from desktop computer monitors to mobile phones). Responsive website design can be the answer in many cases. A responsive website means quite literally that it responds properly to all devices and screen sizes. Beginner’s Guide to Responsive Web Design Source How To Use CSS3 Media Queries To Create a Mobile Version of Your Website Source.
NAVIGATION/MENUS.