Awesome Responsive Screenshots


Below is a quick, simple way to generate screenshots of Responsive websites like this (note: link is a big image, so it will take a while to load).

Go to the Responsivator website and enter the url of the website. Check the hide header option. This will generate you a url like this:

Go to that url and use the Capture Webpage Screenshot Chrome Extension to take a screenshot. After a few seconds of processing time, you will have yourself a nice looking screen capture of your website across a variety of screen sizes (like this).

If you’d like to customize the screen sizes, click the customize button in Responsivator and adjust the frames settings

Note: This article has been updated since originally published. The tool previously recommended is no longer available (as you may notice in the comments).

Github: From Zero to Hero

Are you looking to get some projects up on Github? There are a few different approaches you can take. Here is mine.

First, you need some projects. Front end projects work best for Github project pages. If you have ideas that involve server-side, you will need to host that aspect of your project somewhere else and you would never want to host any api keys or security-sensitive content on a public Github page (obviously).

For my projects, I like to have my project demo page and the master branch of the code be the same. So, start with your master branch and build it out. There are lots of tutorials on Git and Github, so find one that works for you if you want help getting started.

When your demo is ready, the next step is to create a Github Project Page. This can be accomplished simply by creating a new gh-pages branch that is identical to your master branch.

git checkout -b gh-pages
git push origin gh-pages

As you make changes to the project, keep your gh-pages and master branches in sync. The easiest way to do this is with git rebase.

git commit -m 'my master branch update'
git push origin master
git checkout gh-pages
git rebase master
git push origin gh-pages

For more information on this pattern, read these posts by Lea Verou and Oli Studholme. One thing you could try is to make a project and use it as a git/github playground for experimentation.

So, you have your first project page. Now just rinse and repeat. Once you have a few project pages, you should make them a fancy landing page home for them. For example, I have for my projects. To create one of these, simply create a new repo that follows the naming scheme and build out a nice web page. When you are all set, commit and push to master and you are done.

If you’d like to have your project pages be on a custom non-github domain, Github has a nice help page devoted to that. (Github makes everything so easy – Thanks Github!)

One benefit to having your content on a github domain is superior search rankings. Because of its massive popularity, Github ranks high for authority. This means that if you keep your code projects on Github, and insert links to your other content (blog, twitter, etc.) you will get some nice Google juice out of it.

Not all of your projects will get attention, and that’s ok. Remember, everyone has to start somewhere. Just keep pushing code and improving your skills. Good things are bound to happen. Most importantly: Have fun!

More Chicago Digital Events

I’ve already posted some great Chicago digital and tech events happening over the next few months. Here are some more:

Thursday, April 11, 6-8pm
Emporium Arcade and Bar
1366 N Milwaukee

Free tech happy hour hosted by Singly Appfabric.

Monday, April 15, 7pm
1871 at the Merchandise Mart

A high-energy evening of five minute presentations by people who have an idea (and the guts) to get onstage and share it with all of us.

Chicago Open Coffee
Tuesday, April 16, 8-9am
Dollop Coffee Shop,
345 E Ohio

Coffee with entrepreneurs, makers, developers and creatives. Hear announcements on upcoming startup and creative events, and talk about startup and tech news.

Built in Chicago Launch
Wednesday, April 17, 6-9 pm
Rockit Bar & Grill
22 W Hubbard

Built In Chicago Launch gives recently launched startups the opportunity to present their companies in front of 350 investors, fellow entrepreneurs, and startup enthusiasts.

Social Media Masters Summit
Wednesday, May 1, 9am
200 E Randolph St

A power packed day of best practice Social Media case studies that go beyond typical tactics, paving the way for a new way of thinking.

Google I/O Extended at Maria’s
Wednesday, May 15, 3pm
Maria’s Packaged Goods and Community Bar
960 W 31st

Watch sessions from the big Google I/O event live and connect with other developers.

Big Data & Analytics for Retail
Thursday, June 20 and Friday, June 21
Westin Chicago River North
320 N Dearborn

Big Data & Analytics for Retail Summit brings together analytics executives and data scientists working in retail, eCommerce and consumer goods.

Google Refugees

Like many people, I was caught off guard when Google announced it was shuttering Reader. I use it every day, combined with iGoogle, another property that is headed for sunset. Are you, like me, a Google refugee?

feedlyIt used to be, I could just rely on the fact that if a piece of web technology was by Google, then it was probably the right one to use. I’d like to thank Google for liberating me from this notion. There are lots of great apps out there that have trouble competing in the shadow of Google’s subsidized apps. In the case of Reader, there were a number of great feed readers that are now getting a chance. For me, I am going with Feedly, because it is well designed and has a great mobile app.

As far as the notion of a next gen web portal, iGoogle was a pretty good solve. With a few scrolls and a few glances, I could quickly catch up on news, social feeds, email and reddit. In this space, there don’t seem to be as many worthy competitors. Netvibes seems slightly inferior to iGoogle at this stage, but if enough people start developing better widgets for it, that could change. I hope so, because I’ve started using it.

I feel like there is room for an order of magnitude improvement in this space. A web service that works on phone, tablet and desktop that brings together all the content that I care about. I could see a company like growing into something that can fill that role. More likely, I expect the browser itself will take the tired concept of the homepage, and evolve it into an AI-driven dashboard for your life. Yes, please!

Update: March 20: Another service that I have used for awhile that you Google Reader refugees should check out is Prismatic. It is a great service that automagically pulls in content for you based on social services you already use as well as user settings you can configure. Great for discovering new content not in your normal feeds.

Upcoming Chicago Digital Events

I’ve put together a list of cool digital/tech events happening right here in my own backyard, the City of Chicago. My sources for these were mostly, lanyrd and eventbrite.

Update: I’ve added some more in a new post.

Built in Chicago Launch
Monday, March 18, 6-9 p.m.
Rockit Bar & Grill
22 W. Hubbard

Built In Chicago Launch gives recently launched startups the opportunity to present their companies in front of 350 investors, fellow entrepreneurs, and startup enthusiasts.

Girl Develop It Launch Party
Tuesday, March 19, 6-8pm
Rockit Bar & Grill
22 W. Hubbard

Girl Develop It is an organization dedicated to empowering women of diverse backgrounds from around the world to learn how to develop software. Come celebrate their arrival in Chicago.

Technori Pitch
Tuesday, March 26, 6:30p-8pm
Chase Auditorium
10 South Dearborn

Chicago’s monthly tech showcase, where geeks, veeps, and everyone in between meets.

Refresh Chicago – 10 Lessons Learned from Obama for America 2012: Real-Time Design
Wednesday, March 27 at 6:30pm
1871 at the Merchandise Mart

Jason Kunesh, UX Director at Obama For America will speak about best practices and methods that helped Obama for America build winning social, mobile, e-commerce and in person experiences for as many people as possible. Tall tales, examples & plenty of QA to go around.

Tech Cocktail Mixer & Startup Showcase
April 3, 6 – 9:30pm
July 25, 6 – 9:30pm
September 26, 6 – 9:30pm
1871 at the Merchandise Mart

A delicious blend between a network event, startup showcase, and a party. We bring together Chicago’s hottest startups, most passionate technophiles, job seekers, investors, entrepreneurs, and those simply looking for a fun atmosphere to get to know your neighbors.

HTML5 User Group: Tools and Workflow for Front End Dev
Thursday, April 11, 6pm
HY Connect
142 E Ontario

Google Developer Jeremy Khan comes to Chicago to lead a discussion about tools and methods for producing solid code.

Mobile Camp Chicago
Saturday, April 20
Harrington College of Design
200 W Madison

Mobile Camp Chicago dedicates a full day to bring together Designers, Developers, and anyone else who is interested in leveling-up their mobile skills.

Saturday, April 27
1871 at the Merchandise Mart

A day–long crash course on the business side of design and technology.

Chicago Northside Mini Maker Faire
Saturday May 18, 10am – 4pm
Carl Schurz High School
3601 N Milwaukee

A family-friendly showcase of invention, creativity and resourcefulness, and a celebration of the Maker movement.

Context Conference
Tuesday, June 11 to Thursday, June 13
McCormick Place West

Ready or not, the age of the multi-screen, mobile-first consumer has officially arrived. And with it comes a mind-blowing variety of ways for them to connect with your brand.

Techweek Chicago
Thursday, June 27 to Saturday, June 29
The Merchandise Mart

With over 200 speakers and 70 sessions from the most innovative technology leaders and companies around the world, Techweek is Chicago’s biggest tech conference. For everyone from Fortune 500 companies to startups, Techweek’s conferences, exhibitions, workshops, and parties come together to create one unforgettable week.

Succeed Faster
Friday July 19 to Sunday July 21
1871 at the Merchandise Mart

An exclusive, invite only, premiere career acceleration conference for young professionals to the next level.

An Event Apart
Monday – Wednesday, August 26–28
Westin Chicago River North

An Event Apart Chicago is an intensely educational learning session for passionate practitioners of standards-based web design. The people who are literally writing the books on web design and development come to share their knowledge.

Ready to Inspire
October 1st to 3rd
Location TBD

Ideas Week
October 14 – 20
Various locations

Chicago Ideas Week brings together hundreds of the world’s brightest thought leaders to inspire, connect and activate the city of Chicago and the world.

Idea Realification

Idea Realification is about taking what’s in your head and making it happen. I am not claiming to be the world’s foremost expert on this topic, but I have managed to release quite a lot of projects over the last year or so. People have asked me how I get so much done. When I put up my Developing in the Open post, it was mentioned that I forgot the most important part, the idea.

I have ideas all the time. I think most people do. Having ideas is the easy part. All it takes is inspiration, and that has never been easier to come by than right now. Look around on the internet, listen to podcasts, watch TED, or do some traveling. Inspiration is everywhere. So if being inspired is your problem, then I don’t know what to tell you.

So, let’s assume you have ideas. That is the easy part. How do you turn an idea into something real? The answer seems simple. You get to work on it. Yet, taking an idea, turning it into a project and then finishing it is not as easy as it sounds.

I’ve found the best approach is to first organize my ideas. Rather than just jumping on an idea right away, aimlessly jumping from one inspiration to another, take some time to let it percolate. See what sticks.

I use Trello for this purpose. Every time an idea pops in my head, I create a Trello card for it and throw it on my ideas board. I am constantly adding and managing my list of ideas.

Deciding which idea to work on is the most important part. Picking the right idea will give you the greatest probability of crossing the finish line. The key I have found is to have a set of filters. Filters act as a set of criteria that you can use to evaluate which ideas are best for you.

Here are the filters that I currently apply to my ideas:

Fun. Whether it contains an element of humor or some playfulness in the design, I’ve found that for me to remain enthusiastic about an idea, there has to be a certain amount of fun involved.

Bite-Sized. I like smaller projects that I can finish quickly. If an idea is too big or too ambitious, I’ve found that it will fizzle out (at least for me). If I have a larger scale idea that I really like, I will try to break it down into smaller bites.

Recyclable. It gives me extra incentive when working on an idea if it is something that will continue to be of use to me.

Open. I don’t like to work for long stretches of time on things that I can’t share. I especially like to do open source because it motivates me to do better.

Passion-Inducing. Does the idea inflict me with the madness? You know that thing where you can’t stop thinking about an idea. This is essential!

filter-diagramSo, those are my filters. They won’t work for everyone. I encourage you to find your own. Maybe you like projects that involve data. Maybe it important to you to work on projects you can pull off solo, or maybe being collaborative is what you’re all about. Maybe you are really into projects involving hardware like lasers and/or robots. Or are more artsy. Maybe making money is a big priority.

Whatever the case may be, I recommend managing an ever-evolving list of ideas, using your filters to help rank them and then just letting the madness consume you as you knock out one idea after another.

Extra Strength Responsive Grids

boxYesterday, I released Extra Strength Responsive Grids, the latest open source project from the devs at Draftfcb Chicago. It was a collaborative effort between myself, Tim Svensen and Andrew Pulley.

Some of you may be thinking, “Just what the world needs, another CSS grid framework.” People understandably are asking me what makes this approach different.

Well, it isn’t really all that different from other grid frameworks you may have come across. It shares similar functionality to responsive grid systems like Zen Grids and Profound Grid in that it makes heavy use of media queries to allow for great layout flexibility.

Where it differs is it adds its grid classes to the markup, rather than the css (or scss). I prefer this approach because I find it to be self-documenting and expressive.

What I mean by ‘self-documenting’ is that I can look at the markup and immediately understand the layout behavior, without having to search through css (or scss) files. I don’t have to try to remember which class has which mixin or inherits from what.

I find it to be more ‘expressive’, because I can add or change these classes around to quickly change layouts on the fly. I do a lot of prototyping, and I’ve found this system to work great for that.

Now, that isn’t to say there aren’t drawbacks. You can wind up with a lot of divs. You will be using non-semantic classes. Other grid systems adhere more closely to OOCSS principles. For me though, I keep my grid/structure classes separate from the content classes. I let the grid do what it is supposed to do, and construct the scaffolding for the page. Then, I create the content ‘modules’ that have their own css to describe how they occupy their container (their grid). When I’m building out my widgets and so forth, I try to stick to OOCSS principles.

To sum up, I think of content as ‘objects’ and the page as scaffolding for those objects.

This is my current approach, but I don’t expect it to be right for everybody. In the future, I may change my mind and do things differently. As front end web developers, we must always be re-evaluating our craft.

Awwward-winning Code

1/15/2013 Update – Another SuperScrollorama site, Zipper Galleria has won an Awwward

The Awwwards are awards for design, creativity and innovation on the Internet, which recognize and promote the best web designers in the world. Every day, I take a look at their awwward-winning site of the day. It was really exciting to see UK Copywriting company Rule of Three win, not just because they have a nice site, but because they are using SuperScrollorama.

There have been a lot of great sites popping up these days that are incorporating SuperScrollorama or SuperScrollorama. It is especially cool to see it spread to other countries, like on The Black Sparrow, a restaurant website in New Zealand. It is even being used on on websites where I don’t speak the language, like Land Een Job!. Luckily there is Google Translate!

Side Projects 2012

My list of in-my-spare-time projects that I’ve released last year:

What The Heck Is Responsive Web Design
Scrollorama2: SuperScrollorama
Are You A Brogrammer?
Channel of Awesome

And it is looking very good for 2013 (already got it started with controldeck.js). I’m lucky to get to work with a bunch of talented devs, and the plan is to join forces to pull off some cool stuff. Stay tuned.

Developing In The Open

When you love what you do for a living, a great thing to do is never stop getting better. For a web developer, the best way to get better is to work out in the open, for all the world to see.

Most devs probably feel some amount of intimidation when they see the amazing projects posted on Github every day (if not, they may have narcissism issues). Yet even Github masters like Paul Irish, Addy Osmani, Chris Coyier, Rebecca Murphey, Dave Rupert, Lea Verou, Seb Lee-Delisle (..the list goes on) all had to start somewhere.

No matter the skill level, we all need to learn constantly just to keep up with the relentless pace of change. It doesn’t matter whether you are great, or even good. Trying to get better is what matters. Giving a damn about your craft matters. If you do, then you have what it takes.

A little over a year ago, my second son was born. Having kids changes your perspective. The need to provide for them is highly motivating. Last December, I stayed home to spend time with my family, and work on some projects. Having seen some interesting HTML5 presentation frameworks, I decided make one of my own.

Thanks to helpful relatives and the fact that babies sleep a lot, I created What The Heck Is Responsive Web Design? which I built on Scrolldeck.js, an HTML5 presentation framework that I created using Scrollorama, a plugin that I also created. (Synergy!)

Much to my surprise, when I posted Scrollorama to Hacker News, it made it to #1. All three projects were very well received, and it was amazing to me. I got hooked.

During the course of the year, I released other projects, like BigVideo.js, Responsivator and Scrollorama2: SuperScrollorama. Now that little project that started it all somehow got to be the #3 Google search result for Responsive Web Design (right behind Ethan Marcotte and Wikipedia). That’s madness!

Now, I’m always looking for opportunities to build things I can share on Github. Even if I make something that turns out to be a dud, it forces me to write better code. To comment or write documentation so people (perhaps my future self) can use what I’ve created.

When a project does get noticed, I get to learn from pull requests and seeing how people use my code in their projects (and sometimes even win awards). It is crazy seeing your own content getting picked up in places like JavaScript Weekly, Codrops and Webmonkey, or getting opportunities to present at conferences or meetups.

Just today, I released controldeck.js, my first node.js project. It works with various HTML5 presentation frameworks to allow you to control slides from a web page, presumably one on your phone. I made a quick little video demo:

I sometimes wonder why more of us don’t develop in the open. Maybe some devs think what they’re doing isn’t interesting, or good enough. That it takes too much time to clean up their code, write docs or create a project page.

The web can be a harsh, judgmental place. For me, the year I’ve had has been a great success. Still, it would have been easy to get bogged down by negative comments, frustrated by issues and bug reports, or embarrassed by code mistakes. Will people say you are doing it wrong? Of course! I have literally been told I am ruining the internet.

Put aside those doubts and negative feelings. If it takes too long to make an amazing project page, then don’t. If writing documentation is taking forever, then write less and let your code do the talking.

Developing in the open isn’t about being perfect. It is about getting yourself out there. Do cool stuff, share it and talk about it. Over and over. It is about getting better. It is about being a part of something bigger than the desk you sit at. So, get out there and mix it up. You’ll be glad you did.