MBlog MBlog - The Mightybytes Blog 2012-05-17T17:38:07Z Copyright (c) 2012 Mightybytes, Inc. ExpressionEngine tag:mightybytes.com,2012:05:07 THE SCRUM SERIES, PART TWO: AGILE DISCOVERY EXERCISES TO ESTABLISH RISK AND VALUE tag:mightybytes.com,2012:blog/12.670 2012-05-07T18:41:20Z 2012-05-17T16:32:21Z James Johnston

Further exploring the ways in which agile methods can be integrated with project workflow, here are a few more exercises to help you assess the inherent risks and value propositions of your project.

Hopefully, you’ve had the chance to read “part one” of the series. You’ve got a product vision statement. You’ve got stacks of single ideas on notecards (user stories) and you’ve been to MoSCoW and back, leaving the W’s behind. Perhaps you went over to a microbrewery for some celebratory IPA and rhapsodized long into the night about how Agile would revolutionize your business.

The Hangover



You’re probably going to be pretty confused when you come in late the next morning to stacks of cards with M’s S’s and C’s on them. Um…now what? Am you ready to start building? Nope. Not even close, and that’s absolutely okay. One of the main ideas behind Agile development is that you can’t possibly know every detail about a project at the beginning. That said, here are a few more discovery exercises to help your team and especially your client get focused. I learned the following exercises from Collabnet Scrum Master, Petri Heiramo at a recent Scrum Training course.

Exercise Four: Establish Value Viewpoints

Heiramo defines a value viewpoint as “a clearly defined, overarching business goal. These value viewpoints are specific to your release and will likely differ from one release to another. While the Product Owner is the final arbiter, some discussion will likely be useful before you start value estimating.”

You can apply this exercise to a project you’re working on now, or continue with the previous post’s imaginary example, “mybookshelf.com.” For the purposes of this exercise, let’s go with two value viewpoints that will apply to a lot of interactive projects: “Users attracted” and “Users retained.”

Exercise Five: Play Poker

PART ONE: VALUE ESTIMATION


For this exercise you will need poker chips in at least two different colors (preferably green and red).

Using the established value viewpoints from our previous exercises as your guide, put your chips on the user stories you feel are most valuable. Petri explains in slightly greater detail: “(Specifically,) you want to evaluate how each story contributes to these two goals (and ignore any other possible value dimension, e.g. revenue gained.)”

1. Lay the cards out on a large table so everyone can see each card.

2. Disperse a limited amount (8-10) of green poker chips to each person on the team. The limited number will force you to spend your chips on the “most valuable” stories.

3. Each member of the team should disperse their chips on the upper right hand corner of the story cards they feel are the most valuable.

NOTE: Do your best not to be influenced by the others. Scrum teams are cross-functional, self-organizing and self-managing. You’re on the team because your viewpoint counts.

4. When everyone has finished putting down their chips, discuss it for five minutes. Look for patterns and correlations between value and M’s (from the last exercise). You may be surprised. Feel free to move a few chips around.

PART TWO: RISK EVALUATION


Now that you’ve had fun with value, you must deal with risk. For the purposes of this exercise, risk is defined as any sort of risk, business or technical. However, the risk should be applied only to each individual user story and not to the project as a whole.

Repeat steps 2 through 4 using red chips.

5. When you have finished and have had a moment to reflect on where the chips fell, write the number of green chips and red chips on the top half of each card. Write the numbers side by side on the right hand corner.

But what does it mean?

You have now four categories of cards.

  • high value / high risk
  • high value / low risk
  • low value / low risk
  • low value / high risk

You might think that you should focus preliminary development on high value / low risk items. Sure, get off to a good start, do things that are easy, get everyone feeling great about everything and build confidence!...not so much.

Scrum is all about transparency. It seeks to expose risk and failure as well as value. Therefore, you’ll want to focus high value high risk PBI’s first because by tackling these first, you’ll have a good sense of if and how this project is going to work right away. That’s a lot better than going through four months of development with your head in the sand only to find out in Beta that the whole thing is worthless.

Ken Schwaber, one of the architects of Scrum framework put it best:

“Scrum will help you fail in 30 days or less.”

We’re not done folks. More exercises to come. Stay tuned for Part Three.

Further reading:

]]> How to Prove the Value of Your Design Work, and Other Great Things I Learned at MoxieCon tag:mightybytes.com,2012:blog/12.669 2012-05-01T20:35:15Z 2012-05-17T16:36:16Z Joy Burke

While most people were likely sleeping in this past Saturday, I woke up bright and early, put my moxie pants on and headed over to MoxieCon, where eleven speakers taught the crowd dozens of ways to build a better design business. Totally worth it.

The five fantastic women that make up Chicago-based design collective, Quite Strong, put on an incredible debut design conference on Saturday. I got my hands on a last-minute ticket to this sold-out event, and took some notes for sharing. After all, sharing is caring.

If I were to picture the perfect design conference in my head, it would look a little something like this… It would be one solid day, and on the weekend so as to not interrupt my work week. It would be affordable (like, less-than-my-utility-bill affordable… okay, call me crazy…). It would be somewhat small (say, 100 attendees?) for a more enjoyable atmosphere, compared to a giant room with a sea of people where you can hardly make out from the back of the room whether the speaker is male or female, much less hear the poor soul. The line up would not consist of one dull “look at all my cool stuff” presentation after another; rather, each speaker would leave me with something usable to walk away with, some insight to help me be a better designer. It would be in Chicago, so I could easily get there. And instead of filling the goodie bag with useless paper-wasting notepads adorned with ugly logo watermarks and bunch of other crap I’ll never use, it would be filled with fun things like a Field Notes book, a CapriSun, a bag of Cheez-its, and a cool reusable water bottle thing.

You may say I’m a dreamer, but some dreams really do come true. The scenario I painted for you above became a reality this past weekend, as the ladies of Quite Strong executed, in my opinion, the perfect design conference. MoxieCon was a one-day workshop to help us creatives get better at getting paid properly for the work we love. Or in their words, “how to make that cheddar and look good doing it.”

Enjoy my recap below!
(All photos here are courtesy and copyright of IShootRockstars).

_MG_1906

The New Rules of Professional Networking

Meghan Wilker and Nancy Lyons

Meghan and Nancy of Geek Girl talked about how to have an appropriate and memorable presence in the community. They hit a lot of good points that I also like to cover when speaking to students and recent grads, but it’s always good to hear them from someone else as refreshers.

  • Be someone relevant to the conversation. Don’t just talk about the job you’re looking for, show your personality so people get the full picture.
  • Instead of a personal logo, show your face (and preferably the same photo) across social media profiles so people recognize who you are when they meet you.
  • Be assertive. Have humility. Be interesting. Err on the side of formality.
  • Be specific when asking for something. If you don’t ask for it, some one else will.
  • Always follow up.

What It Means to Be (and Become) a Design Leader

Marcia Lausen

Marcia Lausen is a founder of the Chicago office of design firm Studio/lab, and she reminded us to stay relaxed about the little things. To quote the always-encouraging Maya Angelou, “You can tell a lot about a person by the way he/she handles these three things: a rainy day, lost luggage, and tangled Christmas tree lights.” Treat disappointments as opportunities. It will help build character and enhance your creative energy.

Negotiating Like a Pro

Linda McCauley

Linda has been advising content creators and licensors for over 26 years on how to strike the smartest deals and negotiate and close them effectively. She says you must negotiate with confidence. Think of the business transaction as a menu of your services. Simply stated, set your price, and if it exceeds your potential client’s budget, figure out what pieces you can take out and save for later (when they attain more budget).

Linda warned us against some of the biggest mistakes people make when entering into a potential project or job offer:

  • Not negotiating at all
  • Fearing that negotiating will cost you the gig
  • Not doing your homework
  • Taking things personally
  • Not having a number at which point you know it’s time to walk away

Delivering a Knockout Presentation

Mare Swallow

Mare is a professional speaker, a public speaking coach and founder of the Chicago Writers Conference. Her commanding presence and eloquence kept everyone’s attention as she covered three of the most important things to keep in mind when presenting your work:

  1. No apologies. Don’t ding yourself.
  2. Know what you bring to the table.
  3. Finish strong.

Heart Work: Hard Work

Mig Reyes

For only being 26 years old (in fact, we were born six days apart and have been close friends since our Freshman year in college), Mig has quite the impressive string of successful accomplishments under his belt. But accolades aside, he talked to us about the importance of being vulnerable as a designer. Vulnerability, as he reminded us, is being open to attack and criticism. Through an exciting, hilarious series of animated gifs, his presentation covered the importance of making and sharing things, thereby opening yourself up to vulnerability. After all, isn’t that the whole point to what we’re doing? “You’ve all got moxie,” he told the audience. “Now turn it into a behavior.” Yes!

Protecting Yourself Legally

Heather Nolan

This media, advertising, promotions and intellectual property lawyer is a great person to contact for any questions regarding protecting yourself and your work legally. Heather walked us through the basics of things like trademarks, copyrights, patents, and the proper uses for registration marks (®) and trademarks (™).

Starting Your Own Practice

Marian Williams & Sara O’Mara

Marian and Sara, two friends who both have agency background, now each run their own studios (Marian Williams Design and The And Group, respectively) and collaborate on projects together. Here are a few things they advise you to keep in mind when transitioning from working at an agency to getting out there on your own.

  • Stay small and don’t claim to do it all or be “full-service.” Know your value.
  • Create transitions vs. transformations.
  • Over-deliver. This leads to repeat clients, which keeps you in business. Show clients what they don’t even know they want.
  • “Always be human. Be professional when necessary.” No one pays you to be a bummer. Say “thank you” for the opportunity to work together.

“You practice, you get better. It’s that simple.” - Phillip Glass

Self-Promotion

Mikey Burton

Mikey is an Ohio native, but now makes awesome things right here in Chicago. Ironically, when he was thinking about how best to tell us about self-promotion, the three main points he came up with are all things we’re told not to do. But hear him out:

  1. Work for free.
    Get over yourself, take on smaller projects. Cut your teeth and pay your dues.

    “I don’t work for free. There are value transactions that don’t involve money or ‘exposure.’”- Dan Cassaro, Young Jerks

  2. Be Self-Centered
    You have to make work you care about. Don’t let your ideas die. You never know where they could lead. Call in sick one day if you have to, and just work on passion projects.
  3. Get Distracted
    Do things that distract you from your daily routine. Get away from your computer and hang out with other humans. Get beers with like-minded people. Try mentoring programs, workshops and lectures.

How to (Politely) Demand to Be Paid to Do the Work You Love

Alissa Walker

This California-based journalist writes about all the stuff we love to read about (design, architecture, transportation, cities and walking) on some of our favorite publications, including GOOD, Fast Company and Dwell. Here are a few of the words of wisdom Alissa shared with us from some of her successful friends:

  • Know your story and how to pitch it confidently and quickly.
    Emily Pilloton, Project H Design
  • Make it as easy and fun as possible for people to give you their money.
    Colleen Wainwright, Communicatrix
  • Just because something makes you smile or laugh ... doesn’t mean it’s a joke.
    David Reese, Artisinal Pencil Sharpening
  • Make a really good case for why someone should donate to you.
    Maria Popova, Brain Pickings
  • The money is no longer worth it if you no longer love your work.
    Frank Chimero

In Closing

I hadn’t known exactly what to expect going into MoxieCon, but knew the Quite Strong ladies would not disappoint. If you ask me, their first conference was a total success! The bits of info I had heard before was brilliantly refreshing in addition to the gobs of valuable new knowledge I gleaned. I’m already looking forward to the next MoxieCon, and recommend designers young and old to do the same!

]]> Take the Long Way tag:mightybytes.com,2012:blog/12.668 2012-04-27T21:36:55Z 2012-05-17T16:25:56Z Joy Burke

Local designer and illustrator, Mike McQuade, shared with all of us at today’s Creative Mornings the beauty that comes from pouring all you’ve got into work you love.

Every month, I volunteer to help my buddy Mig Reyes a little with Creative Mornings Chicago, a monthly breakfast lecture series. And every month I leave feeling more driven and inspired to keep doing this work that I love and to work really hard at it. This month’s source of inspiration came from Mike McQuade’s presentation hosted in the incredible workspace of Gensler, a global design, architecture and planning firm, while Artisan made sure our bellies were happily full of delicious coffee and morning treats.

“Work hard. Stay humble. And get your work out there, because you never know who’s watching.”

Those are the awesome words Mike left us with for the day, and he is living proof that if you want to be successful doing what you love, that’s the way to do it. Mike’s work has been featured in tons of publications including Communication Arts, Gestalten Publications, HOW, Print, We Love Typography, GQ Style Blog, Design Taxi, Smashing Magazine, The One Show, Chicago Creative Club and Cannes. He is also a recipient of the Young Guns 9 Award.

Mike humbly told us in the beginning of his presentation that he has no talent, he’s just gotten where he is today from working really hard and not taking on projects if he’s not able to put 100% effort into the design. “Good work gets you great work,” as he put it. Mike also pointed out something I love to try and remember and stay focused on, that we as designers make things that shape our culture, and that is a huge responsibility. He talked on the point that you should be working on projects that you can stand behind because working on something you believe in results in working harder to make sure it rocks.

Don’t take short cuts. Take the long way, like Mike does, so when all is said and done, you can say you put 100% of your tender love and care into that project. Illustrating my “Do What You Can” poster was something I did to raise enough money in a very short amount of time so I could make it onto Climate Ride California this past October. Looking back on that project, after thinking about what Mike talked about this morning, I can see that I poured a ton of time and energy into making those posters because I loved the reason I was making them, and it resulted in me raising something like 150% of my goal for the ride, and I have posters to share now because of it! Hard work really does pay off.

Keep up with Mike on Twitter and check out his stellar portfolio site.

]]> The Scrum Series, Part One: Three Agile Discovery Exercises tag:mightybytes.com,2012:blog/12.665 2012-04-26T21:46:44Z 2012-05-17T16:41:45Z James Johnston

Three Agile Exercises to Demystify Your Discovery Process

It’s an age-old problem for creative agencies or even freelancers trying to build simple sites…

A Typical Scenario

A client comes to you with an RFP or a list of all of the things their web app or website must do. Here are just a few of the must-have items from RFPs we’ve received recently:

  • “It’s got to have drop downs!”
  • “It’s got to work on an iPad.”
  • “It needs video and social networking.”

We’ve all heard (or said) these things at one time or another. And of course, the big question, “How much will this cost?”

What you should say here is, “I don’t know.”

What you may end up doing is undercutting your business and losing sleep. You do a bit of research, check hours from past projects, interrupt developers and designers from other projects, practice some amateur psychology trying to pair the client’s tone of voice with a dollar figure you think they can afford. You end up with your best guess at a number that might win you the business and allow you to keep your shirt, but the fact remains, at this point you have no idea what you’re really building or why.

Agile to the Rescue?

All the while you’ve been hearing about this other process that sounds like some magical land across the sea. People even pronounce the word the same way, Agile (ˈajəl), with some kind of reverence or pretentiousness. You have seen all the charts of continuous circles. You have attended conferences where people argue over what is true scrum vs. kanban (instead of telling you how to do it). The notion of sprints causes you to hyperventilate because no one is telling you how to get started. How do you get to the first sprint anyway?

I recently took Petri Heiramo’s CollabNet Scrum Master Certification class in an effort to cure some of my sleepless nights and help me figure this agile thing out once and for all. We have experimented with some agile approaches on past projects at Mightybytes, but still struggle with workflows, communication, and figuring out when it’s appropriate for a project and when it isn’t.

I certainly didn’t learn everything there is to learn about scrum and although I passed the exam, I don’t think I’d consider myself a scrum master…yet. I do think I can share a few scrum-based tools that will help you and your clients get through a “discovery” process. So here’s the first in a series that you can start to practice right away.

Exercise One: The Product Vision Statement

For our first exercise, we’re going to write a product vision statement. This doesn’t have to be perfect. Follow this model (Geoffrey Moore’s template from Crossing the Chasm)

FOR (target customer)
WHO (statement of the need or opportunity)
THE (product name) is a (product category)
THAT (key benefit, compelling reason to buy)
UNLIKE (primary competitive alternative)
OUR PRODUCT (statement of primary differentiation)

Here’s an example that we used in our scrum training…

“FOR book lovers WHO LIKE TO discuss and share experiences with like minded-people mybookshelf.com (pulled directly from Petri’s example during training) IS AN internet community THAT allows people to create their own virtual bookshelf and discuss their opinions and experiences. UNLIKE traditional discussion forums, OUR SERVICE provides tailored features to their needs.”

It’s not even that amazing, but you get the idea. Your mind is probably already thinking about what kinds of features mybookshelf.com should have or how you might write a similar product vision statement for one of your current clients.

Exercise Two: The Product Backlog

For exercise two, we’re going to create a product backlog. A product backlog is a list of everything that a product might do. According to CollabNet’s course materials, the product backlog is a “living series of requirements” and “represents the WHAT of the system” (rather than the how.) It’s an easy exercise and extremely valuable to your clients. You’ll need a bunch of note cards, some pens and everyone that may participate in the project, especially your client. The rules are simple:

  1. One idea per card
  2. Write the idea in the center of the card
  3. The format for the ideas should be written as follows:
    • As a (user role), I can (do something) in order to or
    • (User role) can (do something) so that (some benefit or purpose)

That’s it. It’s that easy. Ideas can be as complex or simple as you like. They can be related or not, detailed or simple. Anything. Go do it. Now. Give yourself 15-20 minutes.

Try it with a project you’re about to start. Try it with an internal project you’ve been putting off because it seems like a scary giant living in the hillside and you’re afraid to awaken him again.

You will notice right away that the project becomes more user-focused rather than site-focused. You probably won’t find any cards saying:

“As a site visitor, I can look at drop downs so that I can navigate the site.”

You may get to drop downs eventually, but for now, you’re putting the focus where it needs to be, value.

When you’ve finished writing everything down, read them out loud to everyone and eliminate any exact duplicates.

Exercise Three: Go to MoSCoW

For this exercise you’ll need a large table or a big wall that you can stick things to and perhaps some large size post-it notes. Imagine your 1.0 release. You’ll definitely want your client there for this. Think about what that first release looks like and which cards will need to be a part of the 1.0 release, but don’t think too much. Write out separate post-it notes with M, S, C, and W on them and pin them to the wall or stick them to your large table.

  • M means MUST be included for 1.0 release.
  • S means SHOULD be included for initial release.
  • C means COULD be included for 1.0 release.
  • W means WON’T (at least for now) be included in the initial release.

Yes, it’s that easy. Now, start going through the cards and placing them under M, S, C, or W. Take about 15-20 minutes. If new ideas come up during this time, write more cards and include them in the fun. When you have finished going through all of the cards take a look one row at a time. Are all of the M’s really M’s? S’s really S’s? Just do the best you can to decide this, and don’t stress. You’ll be revisiting this again and again. When in doubt, push the items toward W. Once you’ve gone through everything, stack all of the W cards and remove them from your table/wall. Notice, the weight of uncertainty lifting away as you do this and make sure your client notices it too.

Keep all of the rest of your cards and let’s continue this process. Stay tuned for part two.

Have you tried similar approaches to this with projects? Did it work? Was it helpful? Let me know. I’d love to hear how this plays out for other organizations.

Read Part Two

]]> The Scrum Series: Tips for Agile Project Execution tag:mightybytes.com,2012:blog/12.667 2012-04-25T15:44:26Z 2012-05-17T16:43:28Z Tim Frick

Interested in learning more about agile but not sure if it's right for your company? Maybe our scrum series can help.

We have talked about and experimented with integrating agile methods into our process for a while now. A number of workshops, a few lunch-n-learns, several books, a project or two, and many discussions later, our approach, like the process itself, has been iterative. Not every client project is appropriate for agile workflows and many of our internal projects don’t translate well to an agile approach. Successfully implementing these methodologies into an existing process is no small feat, which is why we decided to devote not one, but a series of blog posts to exploring various aspects of this approach to executing projects.

Big Questions

In our experience, all clients want to know three things:

  • Can you do my project?
  • When can you get it done?
  • How much will it cost?

Sure, they want to know more than that and each of the questions above begets more questions, but those are the big ones, the queries that frame nearly every first conversation with a new prospect. In this series we will explore different ways to address these valid questions using agile tactics.

But first some questions of our own.

Mighty Questions

When we started down this path our questions were many. Some we answered as we experimented (and made mistakes). Some of the bigger questions, however, consistently plagued us:

  • How do we bill for an agile project?
  • Can we apply our existing process to it?
  • Where do design and UX fit in?
  • Is agile just another word for ‘retainer’?
  • When is the project ‘done’?
  • Will Ashtanga or Bikram classes help?

Bad yoga jokes aside, being agile really is fundamentally rethinking everything about how you execute a project. Most companies (at least those that do what Mightybytes does) build teams based on functions. Designers work on the design phase of a project, then lob their deliverables over the wall to

developers, hoping that the project manager will smooth out any potential communication errors between stakeholders. Somewhere in the mix you might also have a content developer or copywriter, a marketer, and maybe even a QA team member or two, each working in a vacuum from the other. And that doesn’t include anyone from the client side! Inevitably, this makes for a lot of “CYA moments” on the part of the project manager. Woefully inefficient, to say the least.

Agile requires that we rethink how we form teams, how those team members interact and communicate with one another, how we interact with clients, and how roles are spread across a project’s duration. If you are successful in implementation, here are just a few of the benefits you stand to reap:

  • More project structure
  • Better relationships (with co-workers and clients)
  • A shared responsibility for success
  • Fast (and accurate) project reporting

All of this should, ostensibly, make for better profits and happier stakeholders. So what are we waiting for?

Scrumming

With agile protocols in mind, James recently attended a Scrum Master training series put on by CollabNet.

What is scrum, you ask? According to authors Lindsay Ratcliffe and Marc McNeill in their book Agile Experience Design: A Digital Designer’s Guide to Agile, Lean and Continuous, “scrum is a derivative of agile and can be described as the project management rule book for applying the agile philosophy.”

James returned brimming with techniques and tools for applying agile methods to projects, which we’re covering in the next post in this series.

Brewing

To add fun to the inevitable mystery and intrigue that a scrum workshop would facilitate, we coupled our recent scrum endeavor with something we love: brewing beer! While the hoppy aromas of a Zombie Dust clone filled the office halls, our conference table was filled with index cards and Sharpies. I think this quote best sums it up:

As a Scrum Master-in-training, I brew beer so that I can better understand the mysteries of agile.

Obviously as we delve further into these methodologies there will be more scrumming and less brewing, but this was a nice exercise that helped cover the inevitable down times that occur in the brewing process. Oh, and did I mention we roasted marshmallows too? This is how you infuse fun into what you do.

Here are some pics from that session:


Created with flickr slideshow.

Read Part One

]]> Responsive Web Design: What It Is and What It Isn’t tag:mightybytes.com,2012:blog/12.663 2012-04-09T22:22:45Z 2012-05-17T16:51:46Z Tai Palmgren

If you have paid any attention to the world of web design lately, you’ve likely heard of something called responsive web design.

It’s the new Big Thing, and as such it’s seen its fair share of hype as well as backlash. What designers need to understand about responsive web design is that it’s essentially a screen-size solution, not necessarily a full mobile solution.

“Desktop Only” is no Longer Enough…but Neither is “Desktop and Mobile”

A couple years ago I might have started a blog post like this by saying “mobile usage is on the rise,” but today it’s much more than just that. While the usage of smartphones has indeed grown by leaps and bounds, people today are using a multitude of devices to connect to the web. Smartphones and tablets are just the tip of the iceberg: users browse the web on e-book readers, smart TVs, video game consoles, portable video game players, even car dashboards and “smart refrigerators.” The number of possible screen sizes is extensive, and the number of devices that connect to the internet is growing by the day.

It’s clearly not enough to just make a desktop-optimized website anymore. A desktop site might render perfectly on an iPhone, but the user will be forced to use pinch and zoom maneuvers to be able to read and navigate. In the past, web designers have used server-side device detection to detect a mobile phone browser and serve the user a separate, dedicated mobile website. Relying on user agent sniffing however, is not perfect, and with a growing number of screen sizes, a “mobile” site is not always the right solution for the user. If you’ve ever been forced to use an iPhone-optimized site on an iPad, with no option to view the desktop version, you know what I mean.

Responsive web design is a new tool which attempts to address this problem.

What is Responsive Web Design?

Responsive web design is a technique for adapting web layouts to fit various screen sizes. Responsive designs use fluid (percentage-based) layouts, fluid width images, and CSS media queries to achieve a design that is ideal for the user at any screen width, whether it’s a smartphone, a desktop computer, or a big-screen TV.

Unlike separate “mobile” sites, a website that utilizes responsive web design serves up the same site to every device, but formats its layout to fit the screen of each device. For example, a sidebar might move from the left side of the main content on a desktop browser, to below the main content on a mobile device. Or a grid of images might be seen on a desktop browser with four images per row, but reformat on a smaller screen to two images per row. One of the first sites on the web to do this was Simon Collision’s website. If you’re reading this on a desktop browser, visit Colly’s site and resize your browser window to see it change. A device with a small viewport width, like an iPhone, will load the small-width version by default, rather than showing the user a shrunken-down website and forcing them to zoom in.

This reformatting with the magic of media queries. Media queries allow a designer to specify style rules that are only triggered when the browser detects a certain screen size. This technique can be quite powerful, essentially allowing a designer to craft an entirely different user experience depending on the size of the user’s browser window.

Since Ethan Marcotte’s seminal article on responsive web design nearly two years ago (which was expanded into a book), a slew of redesigns have hit the web, taking advantage of this new and exciting technique. Some notable examples include:

Why Responsive?

The reasons for using responsive web design are many. A designer can craft a mobile version of a website without having to build a separate code base for each target device. Depending on the complexity of the site, it can potentially be a quick and easy way to optimize layout for smaller screens.

Since media query-based style changes are dependent only on viewport size, there is no need to rely on user agent detection to detect specific devices. Making a mobile site work smoothly via user agent detection can be tricky, and when it goes wrong, the results can be disastrous. Responsive web design will theoretically work on any device, at any screen size, even the ones that don’t exist yet.

In addition, one single URL for a web page can be used across devices, rather than redirecting to a “mobile” subdomain, which can be beneficial for SEO as well as bookmarking, link sharing, and usability.

So…Great, Let’s Use it for Everything!

Not so fast. Like I mentioned earlier, responsive web design is a small-screen solution, not necessarily a full mobile solution. What’s the difference? Optimizing a website for a mobile device means more than just adjusting the layout to its screen. Other considerations include bandwidth (mobile users may be on a slow connection, and may also have a monthly bandwidth limit imposed by their service provider), user context (a user on a mobile phone may want different information than a user on a desktop computer), and various elements that might not resize easily, such as graphs, data tables, ads, and 3rd-party widgets.

User Context

A mobile context means more than just layout. A user on a mobile device may want different things than a user on a desktop. However, we shouldn’t make assumptions about user context. Just because a user is viewing a website on a mobile phone, it doesn’t necessarily mean they’re running down the street in a hailstorm trying to catch a cab, and all they need from the website is the business’s address and phone number. Hiding content from users based on assumptions about what they might want is a bad idea. That said, if the website in question is more of a web app, or if we want to explicitly tailor the mobile experience separate from the desktop/laptop/tablet experience, then it may be better served by a separate mobile site.

Bandwidth

Limited bandwidth is always something to take into consideration when optimizing a site for mobile, and it can’t be forgotten when building a responsive site. A slideshow with half a dozen splashy, 1000px-wide images might look great in a desktop view, but on a 320px-wide screen, even if the CSS is shrinking the dimensions of the images, all those huge image files are still being downloaded, potentially over a relatively slow mobile connection.

There are a number of attempts at solving this issue, such as Adaptive Images, Sencha.io Src, and a proposed <picture> element. None of these solutions are perfect, but they’re a start.

Of course, a small screen doesn’t always equal a slow connection, and vice versa. Ultimately, a web designer should always be aware of site speed and performance, regardless of the user’s screen size. The faster a site can load, the better, whether it’s on a phone in a hailstorm, or on a desktop at home with a cup of hot cocoa.

RESS to the Rescue?

A new technique combines responsive web design with server-side device detection. It’s called RESS (Responsive Design + Server Side Components). Rather than using server-side detection to redirect the user to a wholly separate site, it uses responsive web design to serve the same URL to each device, while using server-side detection to serve up various components of the site for differing devices. For example, a site may present a separate version of its navigation for small-screen devices, or a more optimized version of a big splashy slideshow. The same pitfalls of user-agent detection still apply, but it does help patch up a lot of holes that both responsive design and dedicated mobile sites leave open. If it’s not enough to just optimize images with your responsive site, then RESS may be worth looking into.

Think About the User Before Diving In

The choice to go with a dedicated mobile site with server-side detection, responsive web design only, or a combination of the two will be different for every project. Consider the users of the site and what they want. If you can, make these decisions based on hard data rather than trying to make assumptions. Additionally, remember that screen size, bandwidth, and device capabilities are all separate things.

A Brave New World

A “website” is no longer something that is 960px wide and viewed on a desktop by default. In truth, it never was. John Allsop’s article The Dao of Web Design urges web designers to “not hold fast to shapes,” as expressed in the Tao Te Ching—and that article was written 12 years ago.

The web, by its very nature, is fluid, flexible, adaptable, and not held down by the constraints of print. It’s a medium that is fully alive, and responsive web design recognizes that. We shouldn’t think of responsive web design as a way to “make a mobile site.” It’s a way to design for the web, the way the web is today, and the way it will be tomorrow.

Further Reading

]]> Mobile, UX, and Distributed Workforces: A DrupalCon Experience tag:mightybytes.com,2012:blog/12.660 2012-04-07T15:37:20Z 2012-05-17T17:08:21Z Peter Athans

Some take-aways from my first DrupalCon experience in Denver. What a week!

Bryan and I recently attended DrupalCon Denver for nearly a week of immersion in all things Drupal. The conference is divided into eight tracks: Business & Strategy, Coding & Development, Commerce, Core Conversations, Design & UX, Drupal Community, Mobile, Government and Education and Site Building. Most of the sessions I attended fell into either the Business & Strategy or Design & UX tracks and here’s what I learned. Links to session videos are provided where possible.

Initial Thoughts

DrupalCon Denver wasn’t what I thought it would be. I knew I wanted to learn a lot and attending DrupalCon would be my best opportunity to plug into the very community that could best teach me. I wasn’t disappointed. What I didn’t expect was the crossover between Drupal-geek and Beer-geek. Mightybytes brews Drupal sites and Mightybytes brews beer. What was surprising after the week in Denver was the number of web-geeks with similar affinities, also fully engaged in craft home brewing. Most Drupalistas I met either brew their own or have a kegerator in their garage. Besides the beer, which the TSA unfortunately wouldn’t let me bring back to Chicago, here are some tidbits I picked up.

Favorite Sessions

These sessions really stood out amongst the entire three day experience.

Mobile First

The numbers don’t lie, mobile devices are taking over or, from a developers worldview, have taken over. Because those of us on the cutting edge of technology are more concerned with, as Wayne Gretsky once said when asked how he’s always first to the puck, “Skate to where the puck is going, not to where it is.” Mobile devices have arrived and are quickly taking over the lion’s share of eyes on screens. That’s why everyone from Dries Buytaert to Luke Wroblewski harped on designing for Mobile Devices first throughout DrupalCon in the keynote addresses, in breakout sessions and Birds of a Feather meetings. I’m sold and you should be too. Here’s a link to Wroblewski’s keynote address.

UX Design for Every Screen

It’s great to know that Mobile is still the buzz word du jour, but what are we going to do about it? That’s when Aaron Stanush provided a voice of reason by begging the question, how do we skate to where the puck is going if we don’t know where the puck is going? In other words, it would be short sighted to design to the specs of the iPhone, iPad, current Android devices and other tablets only to have new devices continually hitting the market with different screen sizes. This signals the death of the static ‘page’ and forces design to turn in on itself. We can’t design from the page in toward the content. Rather, we need to design from the content out, responsively, and let that content flow to the screen size of whatever future device users adopt while maximizing usability on each device. How should we do that? Here are some helpful hints from the folks at Future Friendly. Here’s a link to Stanush’s session.

Growing a Virtual Company & Maintaining Team Moxie

Matt Westgate, co-founder of Lullabot, put together a compelling session on virtual companies. He sold me on no longer using the term ‘virtual company’. By choosing to use the phrase ‘distributed company’ instead he dispelled these common myths:

  • Distributed companies are not ‘real’ companies
  • Communication is inefficient
  • There is a lack of teamwork and it’s a lonely job
  • iI’s unsustainable as an organization grows

How does a distributed company dispel these misconceptions? By hiring the best of the best and treating the company as a social network. Look for people who are comfortable with social media, have strong written and verbal skills and can think beyond the laptop. A great quote from Matt, “Hire for the company you want to be, not always for the company you are.” That is very much in line with the theme ‘skate to where the puck is going’. In other words make that concept part of your company’s DNA in hiring, strategic planning, project management and deliverables.

DrupalCon Portland, Anyone?

Mightybytes will have representatives at DrupalCon Portland in 2013. We hope to see you there so we can all share our insights while enjoying a great craft brew. Were you at the Denver conference? Any highlights for you?

See Bryan’s take on all things Drupal

Bryan’s Blog

]]> DrupalCon Denver: Notes from a Developer tag:mightybytes.com,2012:blog/12.658 2012-04-05T13:39:01Z 2012-05-17T17:11:02Z Bryan Zera

Here's what we learned after nearly a week of immersion in all things Drupal.

DrupalCon is divided into tracks for site builders, themers, module developers, Drupal core developers and business professionals in the Drupal community. I spent most of my time in the module developer and site builders sessions. Here’s what I learned. Links to session videos are provided where possible.

In his keynote at DrupalCon Chicago in 2011, Drupal creator Dries Buytaert was asked what he would focus on were he to build Drupal 8 from the ground up. He replied that he would focus on Drupal’s presence in the mobile arena. Being that the theme of this year’s North American DrupalCon was “Collaborative Publishing for Every Device”, it’s no wonder that many of the sessions focused on methods for using Drupal as a platform for mobile sites, a backend for mobile apps, or even as a platform for native applications.

The Mobile Stuff

Service Module - Inside and Out

A robust and flexible interface for creating, storing and retrieving different types of content is a necessity for most mobile apps, and the Drupal Services module does just that. Out of the box, it provides REST endpoints for managing Drupal content, which is the de facto method of data exchange for most native mobile apps. The session “Service Module - Inside and Out” explored how to leverage Drupal as a data store for mobile applications via REST.

Auto-Generate Your Mobile App with Phone Gap

Drupal isn’t limited to being just a data store for your mobile app, however. The campy-but-approachable “Auto-Generate Your Mobile App with Phone Gap” session posited a heavyweight showdown between native app development, mobile web development, and PhoneGap, a service that allows developers to build a site, then export it to native apps for many popular mobile platforms, including iOS, Android and Blackberry.  Using a custom Javascript library, these sites-turned-native-apps can access the device’s native features such as camera or GPS location.  

The Drupalistas at Promet Source here in Chicago used PhoneGap in their six-week sprint to develop a taxi dispatch system and mobile app for use on iPads. In “Taxi Cab Confessions”, Andrew Kucharsi described the process, the pitfalls, the payoffs and where the next version of their dispatch app will go.

The Geeky Stuff

Drush 5

Being a command line junkie, it’s sad that I’ve only now become hip to Drush, the command line interface for Drupal. With Drush, you can download and enable modules, clear caches, query site variables and many other tasks that are difficult or impossible to do from Drupal’s administration interface. DrupalCon Denver was the stage for the release of Drush 5, which includes tab completion as well as the ability to install a Drupal site and run it in under a minute using Drush’s built-in web server.

Real World Performance Analysis

Building highly functioning Drupal sites creates a lot of application logic that users, thankfully, don’t have to see. That application logic can cause serious performance issues that must be handled before going to production. “Real World Performance Analysis” showed several methods for locating where your Drupal site’s performance is lacking. Narayan Newton, who administers drupal.org, provided a mantra for performance tuning your Drupal site: start with the low-hanging fruit (i.e. the items that are loading slowest on your site), solve those performance issues, then iterate through your site again looking for new low-hanging fruit.

Drupal Entities

Drupal 7 moves away from the “everything is a node” approach and replaces it with the concept of Entities. In Drupal 7, everything is an Entity:  Users, nodes, comments, taxonomies, etc. The benefit is that Entities can be extended with fields and provide certain module integrations in a consistent way. Two sessions at DrupalCon discussed entities. “Drupalize Your Data - Use Entities” gave us a developer’s overview of how Entities are defined and managed at the code level. In “The Alice in Wonderland World of Fields and Entities”, we were given a higher-level overview of where and how the Drupal community is leveraging the power of Entities. The slideshow for this session contains pages of links to modules that demonstrate the use of the Entity API.

The Practical Stuff

Rapid Development with Features

Mightybytes has been using the Features module for the migration of functionality between development, staging and production environments for some time with more success than frustration. “Rapid Development with Features” reiterated the initial goal of Features: to collect Drupal functionality and export it to another site. For example, you can create a feature that contains an Event content type and all the associated views on one site, then download that feature to use on any other site. In a practical sense, you can pre-build the features most commonly asked for by clients and deploy them quickly to any new Drupal install.

The Inspirational Stuff

Luke Wroblewski’s Keynote

Luke Wroblewski opened his Thursday morning keynote by joking about being in the “hangover slot” (referring to the three parties hosted by conference sponsors the prior evening). Wroblewski easily held the audience’s party-dulled attention span with a stirring discussion about mobile experiences. The most “Oooh”-ing and “Aaah”-ing of Wroblewski’s keynote was during demonstrations of how companies like United Airlines and apps like Presslite are making mobile experiences more personal and tailored due to their access to the locative information embedded in your phone.  

Wroblewski wasn’t without practical advice, though. As he demonstrated the exponential growth of mobile traffic and where it is projected to go in the next three years, he reiterated a mantra we try to use with clients when developing content strategies: Think Mobile First.

When we build mobile sites from existing websites, we end up trying to shoehorn 1024x768 pixels of information into a 240x320 pixel space. You lose 80% of your browser’s content going from desktop to mobile. Wroblewski encouraged us to start the content strategy process by thinking first about things your site needs to do that fit on your smart phone’s screen. Once your mobile site is complete, take the structure and move the pared-down experience to the desktop browser. Taking a mobile site from a small screen to a larger screen affords the luxury of an uncluttered interface with much less initial structure to worry about.

DrupalCon isn’t about the knowledge that you gain by learning a new technique or hearing about how Drupal’s core is going to progress in the next release. The beauty of DrupalCon is being in such close proximity to other people who understand the power of Drupal and have harnessed it for their own projects.  I gain a certain amount of momentum when exposed to what can be done with Drupal at DrupalCon. Once home, that momentum inspired me to work on projects for the sheer enjoyment of figuring out how to make it happen in Drupal.

See Peter’s take on all things Drupal

Peter’s Blog

]]> Untappd: Foursquare for Beer Geeks tag:mightybytes.com,2012:blog/12.653 2012-04-02T14:38:30Z 2012-05-17T17:21:31Z Tim Frick

If you’re out at a local watering hole and see folks taking pictures of their beer, there’s a chance they are using Untappd, a location-based social app that helps craft beer enthusiasts connect over their favorite brews.

Joy, Kris, Peter and I went to Acre Restaurant this past week for their Three Floyds tap takeover. It was the first real chance I had to use the less-than-24-hour-old Untappd app on my iPhone. Since I had no friends in this app, which is built around the idea of connecting with others over a common interest in beer, I immediately forced my cohorts to download and connect. Here’s what we learned with our maiden Untappd voyage.


Pic of Kris, Peter, and Joy

How Untappd Works

Untappd works like many location-based apps in that you use a check-in feature and friends connect with you based on information divulged in your check-in. Friends can comment on your check-in, toast to the beer you’re drinking, and a bunch of other fun stuff.

The app is divided into five primary tabs:

  • Friends: Where you see the latest activity of those to whom you are connected.
  • The Pub: Recent activity at pubs both globally and nearby.
  • Drink Up: The boldest of the buttons, where you ‘check in’ to beers.
  • My Tab: Information on your account and activity.
  • Notices: Friend requests, news, and notifications from friends.

The interface is built around users checking into beers rather than locations, which means you need to use the search field to enter the beer you’re drinking. Thus, upon first launch we found Untappd to be a bit cryptic. It does, however, have a ‘Suggested Brews’ tap which could be helpful if you don’t know what to order. In our case, it was all Three Floyds all the time, but I can see where this might be helpful on that one rare occasion where I can’t decide what to order. If you can’t find the beer you just ordered, Untappd allows you to add it to their database (this may be useful when our next batch of Mightybrew comes out).

Once you have checked in to a specific beer you can add your location, leave a comment, include a photo, or rate the beer. Untappd also lets you share check-ins with Facebook, Twitter, and Foursquare. You can also toast your friends’ check-ins if you happen to be a fan of the beer they just checked into.

Untappd Potential

Like Foursquare, users earn badges as they reach specific milestones, such as number of beers or locations checked into within a certain period of time. Also like Foursquare, Untappd offers a suite of tools for breweries and beer-related businesses to manage their brand, make personal connections with consumers, and gain insights into how a brand performs through a rich analytics platform. Untappd’s site claims that ‘marketing and advertising opportunities’ are available for breweries, bars, restaurants and beer-related events, which means if they haven’t already followed Foursquare’s lead it won’t be long before marketers can purchase their own custom badges or other perks on the platform.

Other things that worked for us in the app were:

  • Social Integration: Untappd connects with other social networks, allowing you to share check-ins, badges, etc on networks like Facebook or Twitter.
  • Add friends from other networks: You can see who is using Untappd on the aforementioned social networks, allowing you to easily add them as friends and build a bigger beer network.
  • Great branding: Though we had some usability issues when working with the app, the branding overall is pretty slick.

I haven’t used the app long enough but am hoping that some sort of friend recommendation engine based on beer preferences is built-in as well. I like super hoppy beers that are somewhat fruity with a bitter finish. Three Floyds’ Zombie Dust, Founders’ Double Trouble, and Bell’s Hopslam are good examples. It would be great if Untappd could make recommendations for friends who enjoy similarly-styled brews.

Tappd Out: Frustrations

Untappd has great potential, but in poking around we found a few frustrations using it as well.

  • Photo crash: Joy found that the app consistently crashed when taking photos on her Android phone.
  • Account connection: When connecting our Twitter and Facebook accounts the CSS didn’t load, making connecting these networks a jumbled process.
  • Inviting Friends: Peter found that the button to add friends was barely showing but he couldn’t scroll down to press it on his iPhone. Quitting the app and re-launching worked intermittently.

The Final Drop

Back at the Acre/Three Floyds Tap Takeover, it wasn’t long before we saw some guys across the bar taking photos of their beers and sure enough, all were Untappd users. Of course we instantly connected up with them both in person and through the app. I’m sure many folks at Acre that night just shook their heads as they walked by a bar full of beer geeks photographing pints of beer, but who are they to deny us our fun?

Untappd is a fun app that combines our love for good craft beer with our fondness for all things geek. Though it’s an early release (and in places that really shows), we have much hope for it and wish the developers luck in bringing more features to fruition.

]]> Illinois B Corp Legislation Passes in the Senate tag:mightybytes.com,2012:blog/12.651 2012-03-31T13:59:39Z 2012-04-02T13:42:40Z Tim Frick

New law would place the tenets of socially responsible business at the heart of Illinois companies that want to make a difference.

Last week the Illinois Senate passed legislation that would make our fine state the eighth in the nation to enact legislation that makes the Benefit Corporation (B Corp) a legally recognized entity. If the bill also passes in the House—which is scheduled to vote in May—this could be great news for Illinois companies that want to build business while still maintaining a commitment to being socially responsible.

B Corp Laws in Illinois

The Illinois Benefit Corporation Act (SB2897 in the Senate and HB4708 in the House) seeks to support socially responsible businesses in Illinois by giving them legal recognition within the state. Under current law, corporations must maximize profits and legally cannot take into consideration other factors in business operations. Many businesses seek to not only make a profit, but also pursue a public benefit mission, such as environmental sustainability or social responsibility. Benefit corporation legislation offers a new corporate form—alongside S-Corps, C-Corps, LLC’s, and the like—that does not impact existing corporations. B Corp legislation does not provide tax incentives, but rather a free market opportunity for businesses to consider society and the environment in addition to profit margins. Mightybytes is one of ten B Corps in Illinois.

Illinois B Corps Lobby

On March 22nd, several of the Illinois B Corps traveled to Springfield to lobby on behalf of the bill, which is sponsored by Representative Sara Feigenholtz of the 12th district in the House and Senator Michael Frerichs of the 52nd district in the Senate. Nancy Goldstein from CompassX Strategy, Steve Sherman from GreenChoice Bank, and Greg Christian from Beyond Green Partners (pictured above left; photo: Nancy Goldstein) travelled by train from Chicago to spend their day in the House talking to various Representatives about B Corp legislation.

“We were excited yet nervous,” Nancy mentioned in her blog post about their trip. “We are all business people, not legislators nor activists. But fueled by enthusiasm for our cause and lots of caffeine, we set off to Springfield [and] after a long day of . . . talking legislation, we arrived back home in Chicago, having learned a lot, participated in the democratic process and having made a difference.”

Since the legislation has passed in the Senate, we keep our fingers crossed that their efforts in the House will be remembered when it comes time to vote in May.

A Growing Movement

Support for B Corps is on the rise across the nation with seven other states leading the way to legalization. If you want to know about B Corps and how they operate, here’s a great piece that PBS Newshour ran recently about B Corporations:

Watch Benefit Corporations Aim to Make Profit, Positive Impact on PBS. See more from PBS NewsHour.

Support B Corp legislation!

If you are an Illinois resident and would like to show your support for this legislation, please sign this petition, and forward it along to others you think may be interested. If you would like more information, check out the Benefit Corp Information Center.

Sign the B Corp Petition

]]>