Notes and news, insights and inspiration from the autonomous collective mind of GS.

Posts in Technology

Using Asynchronous Typekit and LESS for Great Justice

Steve Schrab by on March 27, 2014

Using Typekit and LESS togetherLately we’ve been messing around with a tool called sitespeed.io. It analyzes your website’s speed and performance based on performance best practices and metrics. It collects data from multiple pages on your website and analyzes the pages using its rules. Trying to reduce file sizes, http requests, and other problems almost becomes a game in an effort to get the overall score higher. But it’s no game, as the speed of your website can have a great effect on your user’s experience.

One of the things that comes up on a number of sites is JavaScripts that synchronously load in the head. Synchronously loaded code stops the browser from loading and displaying anything else until it’s finished loading that code. Typically we like to avoid synchronous code in the sites we write, but sometimes we use third-party code that isn’t written to be asynchronous. One of the big ones we use on a number of sites is Typekit.

 

Mom! Dad! It’S FOUT! Don’t touch it!

Typekit likes to synchronously load so that you avoid FOUT. FOUT stands for “Flash Of Un-styled Text.” It’s when your text loads into the page using the browser’s default fonts but then suddenly swaps to your web font when it finishes loading. So Typekit synchronously loads to avoid showing anything before the font is downloaded. Which, most of the time, avoids FOUT. But synchronous loading slows things down. The browser stops everything before loading other assets.

 

Asynchronous Typekit

Typekit does have the option to asynchronously load. When you get the embed code, you have the option of getting the “advanced” embed code, which is asynchronous. If we asynchronously load Typekit, the browser can start multiple download threads to get all of the page’s assets at the same time. That speeds up the site and also doesn’t stop the rendering of the page while you wait for stuff to load.

The downside is that you bring back the possibility of FOUT. Now Typekit also offers CSS callbacks, which will tell you when the fonts are loaded and available. Their suggestion is to hide the elements that include their fonts when the “wf-loading” class is present on the HTML tag.

This is a good solution, as it won’t display your fonts until they have downloaded from Typekit. However, writing all of that extra CSS to hide elements that use the fonts seems like a pain. Luckily, LESS makes it easier to include if you set things up right.

 

Setting Up LESS Functions For Your Font Stack

When using LESS, I’ve taken to the idea of setting up Typekit fonts as a function. For example:

.facit-bold-italic (@size: 16px, @height: 1em) {
	font: italic 700 @size/@height 'jaf-facitweb',sans-serif;
}

This means that instead of writing out a long font property in CSS every time you want to use a font, you can just call it out by name in the CSS. Like so:

.cool-box {
	border-radius: 4px
	background: #ccc;
	.facit-bold-italic(28px,30px);
}

Because the arguments in the function have defaults of 16px size and 1em line height, it’s optional to set them when declaring the font. So if you want your font to be 16px with a 16px line height, you can just put this:

.cool-box {
	.facit-bold-italic;
}

Or even just supply the font size if you want the line height to be the same as the size:

.cool-box {
	.facit-bold-italic(28px);
}

It’s neat! Yes, this is my idea of fun.

 

LESS and Typekit

I like making these functions, as it creates a nice list of the fonts I have selected in Typekit that are usable by the site I’m working in. Plus it allows me to just refer to the font by name. Which I personally find easier (your mileage may vary). But how does this help with asynchronously loading Typekit and avoiding FOUT? Because it’s LESS, we can easily add rules into these fonts that adhere to Typekit’s callbacks.

.facit-bold-italic (@size: 16px, @height: 1em) {
	font: italic 700 @size/@height 'jaf-facitweb',sans-serif;
	.wf-loading & {
	    visibility: hidden;
	}
}

Now whenever we call this LESS function in our CSS, it’ll not only have all of the correct font stuff, it’ll bring this hook along that hides the font while we’re loading Typekit.

So we’ll have a speedier site, no FOUT problems, and our code is still easy to manage.

Share:

APIs as a Service

Jeffrey Schrab by on January 16, 2014

I recently came across a company that’s making me wonder if I have just seen the shape of things to come: Stormpath.

Stormpath is a software-as-a-service (SAAS) provider, of sorts, offering “User Management and Authentication for Developers.” The idea is that user account/profile management systems are hard to write, costly to create, and a big security responsibility. Creating them takes developers away from making your application really special because they’re spending time creating something that has been done thousands of times already.

It’s interesting to me to see SAAS go to the point of PIECES of your application being provided. If this continues to be a pattern, then the role of a developer swings more to that of being an integrator of existing systems and services rather than a creator of those systems and services. Any coding that a developer does will be to glue these systems and services together instead of creating new applications. So it would appear that Stormpath is an example of “APIs as a Service.”

Now any decent application is going to leverage existing development frameworks; pre-made libraries; and other bundles, modules, gems, what-have-you. But to go so far as to say that someone else will be responsible for more and more of the pieces of your application is something that has been evolving for some time now. Looking at it a little closer, here are some pros and cons:

Pros

  • Costs go down – Custom software is always more expensive. The “buy vs. build” debate swings in the favor of “buy” in this case.
  • Quality goes up – Companies like Stormpath can spread developmental costs across many users.
  • Quality continues to go up – Again, the developmental costs of improvements can be spread across many users. Because of this, it’s more likely that new features will be added and existing features refined. Everyone benefits.

Cons

  • Too many eggs in one basket – We’ve seen the break-in at Adobe. Stormpath’s business model creates quite a honeypot for black-hat hackers. But one would hope that Stormpath would recognize that security is its bread-and-butter and have a solution that’s just plain better.
  • The eggs are in someone else’s basket – As a developer responsible for an application, you don’t control EVERYTHING anymore. But this may be a false alarm. It’s mind boggling to think of all the companies that provide services that allow you to read this Web page right now. And it works.

It’s going to be interesting to see where this goes.

Categories: 
Share:

Vine and Instagram for Brands

Micah Eberman by on November 21, 2013

When “Video on Instagram” came out, I wrote a blog post with my take on the differences between the solid and established Instagram with its newly minted feature and what was once one of the fastest growing social apps, Vine. While their use and dominance continues to swing, they remain two highly engaging and expressive platforms for interacting with the passionate and digitally connected.

I’m definitely one for immersion and exploration when it comes to the latest, greatest expression of tech geekosity (often to my wife’s chagrin). So, after several months of stop-motion Vines with my kids, acquisition of my trusty iPhone-compatible multi-lensed Olloclip, and checking the apps obsessively every two or three hours, I’ve made a few observations I thought I’d share.

VINE

In a word, it’s all about “surprise”...you have only six seconds, so make the best of them. The feel of Vine is puckish, curious, and experimental. It’s highly communal, with its ardent fans often expressing a mixture of adoration, appreciativeness, collaboration, positivity, and just a dash possessiveness...in a good way. If you’re in, you’re in. How do you get “in”? You participate. Vine memes run rampant, with fun ideas spreading like wildfire from the highly influential “Vine-stars” to their fans and back again through use of hashtags. Themes have ranged from musical collaboration (#songcollab), to the celebratory/absurd (#LNPP - late night party patrol), to the caring and altruistic (like finding a kidney for someone, or raising funds for a popular Viner with cancer).

INSTAGRAM

Instagram has a very different feel to it than Vine. With a video length of fifteen seconds  (over twice Vine’s) and a less responsive means of capture, Instagram is a bit more long-form than Vine. There’s more time to linger and savor...to express. It’s really about sharing moments. These are captured moments in time...more artful, often more personal. It’s less of a dialogue and more of a “performance”. What really seems to work is when you let someone in to your world, and give them a peek behind the curtain.

Incidentally, Vine very recently updated their app with two new features. One, Sessions. You can start a Vine and finish it later. Two, Time Travel. You can remove, reorganize, or replace any shot at any time. With these two features, Vine will be nearing feature parity with Instagram and its editing capabilities and likely remaining the app of choice for extra-creative video creators.

SO, consider that several months of obsessive-compulsive behavior saved (your significant other thank me later). If either of these platforms sound right for your brand/organization (and hey, you can share your posts on Facebook, Twitter, your web site, etc.), here are a handful of tips and ideas to get you going:

Experiment with ways play to bring your brand to life
Vine’s great for stop motion / time lapse (be sure to get a good tripod).

Try different looks, angles, filters, and lenses
Olloclip is a favorite of the smartphone auteur. Want to see a master at work? Check out Adam Goldberg's Vines.

Use sound to create greater impact and connection
Viners have experimented in a number of ways, from simple ambient sound, to video-hacking and adding audio overlay, to stretching audio digitally for stop-motion efforts. Consider grabbing up a product like Zoom’s forthcoming iQ5 iPhone microphone to give your social videos bigger presence.

Play with cross-promotion
Do an extended edition of your Vine on Instagram, promote live chat sessions on Omegle, or promote regular posts to YouTube. Some Viners have embraced Instagram as a means of providing images and video that compliment a story, extend it, show behind-the-scenes shots, or even compile their Vine creations. Some Viners, like comedy king Will Sasso, have pointed out how weird it feels to create an Instagram video when you’re used to the snappiness of Vine.

Want to really up your game and reach? Connect with the pros.
Lowes had a great series of highly engaging Vines with photographer Meagan Cignoli, Peanuts and MTV tapped into stop-motion paper artist Khoa, and Virgin Mobile was one of the earliest brands to tap the first Vine talent agency, Grape Story. This approach also allows for you to tap into their base of followers to get your brand off to the races. The key here is to let your creators do what is authentic to their style, humor, and nature. Forcing them into other shapes feels unnatural and their ardent followers can smell it a mile away.

Give them a peek behind the curtain
Red Bull shares incredible photography from their Red Bull Media House army, and has most recently shared captured moments of their athletes in motion. Lauren German and other cast members have been creating Vines betweens scenes of their show, NBC’s Chicago Fire.

More than anything, be authentic to the platform and community
Play. Experiment. Participate in memes. Post consistently. Tag well, tag often. And most importantly, find your voice and be true to your brand.

Share:
1

Stock Mindset (SM™)

Nicholas Krueger by on October 24, 2013

ThickStock photoUsing stock art is a reality that we designers have learned to live with. Photo of a middle-age bearded man? Done. Illustration of robot working at PreCrime? Yes, please. Stock art is fast, accessible, and cheap. The downside? Limited creative control over things like composition, style, quality, and even subject matter. Ever found exactly the right photo from a stock search? I haven’t. Seriously. Not once. 

In Web design, this stock mindset (SM™) has crept into another area … design itself. I’ve known about sites like Template Monster for a while. But in recent years, more user-friendly services like Squarespace have arrived. With Squarespace, you can customize a legitimately well-designed template with your own content right in the browser. You don’t even have to know how to spell “div”! 

Then there’s Wordpress, a blog publishing platform that can be used as a framework to build websites. An advantage of Wordpress is that it’s open source, with a large community of developers contributing plugins and themes (design templates) for copious use. The catch is, unlike Squarespace, you have to know what you’re doing. Hint: If you don’t know what “server-side include” means, you don’t know what you’re doing.*

Theme on

Our team recently used Wordpress themes (from ThemeForest) to build a handful of sites for clients on tight budgets. It seemed like a good idea: We could minimize design and development time, and deliver a fully content-managed, responsive website for a fraction of what it would cost to build one from the ground up. Win! Unfortunately, that didn’t prove to be reality.

When looking for themes, we narrowed our search to include only responsive layouts. We weren’t surprised to find a huge range of quality and features. What did surprise us were some of the design limitations that were only apparent after we purchased and installed the theme. Here’s an actual (super accurate) conversation:

Eric: Nick, you can’t add a column to the footer like that.

Me: [blank stare]

Eric: Let me rephrase. We can add the extra column, but with this theme it would be relatively time-consuming. I think it would be more efficient to change your design to conform to the theme.

Me: [blank stare]

Eric: ... I’m just gonna go ahead and NOT build in the extra column.

Me: [blank stare]

We ran into stuff like that throughout the process. And it became clear that themes, while flexible in some ways, are meant to be used as is. If you customize too much, you pile on extra development costs. For us, that was unacceptable. After all, we were using a stock design to save money.

Strangely, on a completely different project with a different theme, we were able to customize the footer fairly easily. It was glorious. Then this happened:

Eric: The flyout menus you designed will take a while to build.

Me: But I thought this theme was easier to customize.

Eric: The footer is. Not the main nav. The template layout doesn’t allow for any more elements because of the fixed width of the container div. We’d have to recode the entire template.

Me: [flip conference room table]

Themes are cheap for a reason. Designers who make and sell them are banking on volume, hopefully selling enough copies to offset the cost of development. Which means every theme is a one-size-fits-all solution. SM™ strikes again.

Fine for some

GS is a strategic agency. We deliver thoughtful, bespoke, from-the-ground-up solutions built on strategic foundations. Working with a stock design template required a lot of creative compromises, and sometimes we weren’t willing to have those trade-offs. That led to time-sucking modifications to a code base intended for out-of-the-box usage.

That said, themes (or services like Squarespace) might be appropriate in certain instances: with clients who lack the budget for an agency partner or projects where an out-of-the-box design solution does, in fact, pay off the strategy. But if a client tells an agency to use a Wordpress theme because they want agency-level smarts at a discount price, beware! You can’t just uncouple strategy from design like that.

We designers have learned to live with stock art. But that doesn’t mean we shouldn’t push to create original content whenever possible. And for agencies built to create original and strategic solutions, there really is a business case to avoid stock design.

 

 

*Wordpress does offer a fully hosted website creation service similar to Squarespace. But for purposes of this post, I’m focusing on the self-hosted DIY version. Here’s a comparison between the two: http://en.support.wordpress.com/com-vs-org/

 

 

Share:
1

Vine AND Instagram Not Vine VS. Instagram

Micah Eberman by on June 25, 2013

A way too long post on similar, yet different, apps.

It’s well known within the walls of GS that I’m a complete and utter nerd. I loves me some gadgets (particularly of the Apple orientation). I love voraciously reading about said gadgets and the latest software/apps. And I also love downloading, immersing myself in, and learning from all of it.

One app that has really moved from curiosity to near obsession is “Vine.” Vine is a mobile app for the creation and sharing of six-second videos … looping videos, to be more specific. As I understand it, Vine was created around the summer of 2012 and acquired by Twitter around October of 2012. However, it really started taking off early this year as more and more people, ranging from your average Joe to well-known actors, comedians, and musicians, began to really push and define both what the app was capable of and also what “plays.”

What really seems to work best on Vine is a blend of frenetic comedy, episodic creative exploration, and stop-motion animation/videography. The highly responsive mode of creating videos by simply touching the screen to record is perhaps one of the defining characteristics that makes it so easy and enjoyable to use.

Just a handful of months in, the Vine community has raised up its own “stars,” where number of followers jumps from an average 20-100 to four- and five-digit followings. Some of these champions of Vine have even gotten opportunities to Vine for top brands and events (like Puma, Lowes, Peanuts, and Orange Cineday at Cannes) or have banded together to create their own “best of” Vine channel/account, “unPopular Now”, a play off of the app’s “Popular Now” trending filter apparently thought up by bananas Viner Pete Heacock.

In fact, it was just announced that Vine “celebrities” may be getting their own unofficial talent agency, Grape Story, started by social media consultant and entrepreneur Gary Vaynerchuk and his partner Vine phenomenon Jerome Jarre (#livelifelikecrazy).

If you want to see the organic chemistry of digital culture, look no further than Vine.

Along came Instagram

All was churning along happily, particularly with a jump in participants due to the recent addition of Android user, until Twitter’s peer/dark nemesis Facebook announced that its own acquisition Instragram was getting into the micro-video game with the aptly named Video on Instagram. Suddenly, this growing app community swimming in its own little blue ocean had a fear of sharks in the water. “Is everyone going to jump ship for the much larger Instagram?” “Is this dingo going to eat my baby?!” “Is the fun over?” “Wait, how many hours have I lost to this app?”

People began choosing sides, some claiming that they’ll go down with the ship with much vitriol for the perceived gorilla coming into their room and trying to claim all of the bananas. However, some people (including myself) were curious to at least see what the deal was.

If you’re just reading the bullet points, the new rival does seem a little bit similar and bandwagonesque. Both offer micro-video recording and sharing to both a built-in network, as well as outside social network sharing. Instead of six seconds, you get about 15 with Instagram. Instead of either keeping or ditching your video (some involving much more labor, blood, sweat, and tears then you’d think), you can delete your last take and try again. Oh, and the feed style that Vine kinda stole from Instagram is now still on Instagram yet somehow feels stolen from Vine. Weird.

However, the similarities stop there. Because of these subtle differences, Instagram just … I don’t know … FEELS different to record, post, and view. Now, I’ll state that I’m a Vine fan through and through, and don’t really use Instagram outside of its easy filter/crop/share features … I just don’t look through my Instagram feed, even though I obsessively check and troll through my Vine feed. But I have to say, Instagram has incorporated video in a way that feels and plays significantly different from Vine. While it has been less than a week since Instagram’s videos launch, the differences are subtle, but hopefully enough to let both communities flourish and thrive.

So … what ARE the differences?

Vine is frenetic, impish, impulsive, and spontaneous. 
There’s something incredibly playful about it, and I believe that a lot of what comes out on Vine begins with how it feels to record with it … it’s fast, snappy, easy on and off. It has quirky bugs at times, so you don’t always know what's going to happen. As a viewer, you rarely know what to expect when you log in again.

Instagram is composed, beautiful, and feels slower. 
Fast Co Design put it exceptionally well when it stated that it’s about capturing a beautiful moment and letting it breathe a little …. ”Keep the butterfly alive while keeping it pinned.” I believe that this, too, comes from the actual recording interaction. Instagram’s is not as quick and responsive as Vine’s, which could very well be purposeful. Instead of jumping to life with a touch, there’s a slight delay in recording. In fact, when I’m pressing the record button (a small record button unlike Vine’s “touch any part of the screen approach”) I actually feel like I have to mash down on my screen. Work faster, dammit! 

Clips are inherently longer, with frame-by-frame animation nearly impossible. This delay also occurs when you’re viewing the feed. You have to really want to view the video in order to fire it up (either by waiting for it to start or hitting a play button). You’re set up for this when publishing your video. You get to both choose from Instragram’s famous filters, as well as pick the poster/still image for your video. In fact, illustrating its dedication to the shot/composition, Instagram has put a lot of time and attention into Cinema stabilization for Video on Instagram, further improving quality of video output. Because of this, it feels inherently more purposeful and composed, more precious and thoughtful, where Vine has a bit of a “don’t look back” immediacy and urgency.

Vine has a rhythm to it. When you try to do a Vine video on Instagram it just feels … weird. 
After acclimating, the timing is just a part of the experience. The limits put on it with only six seconds of video have become the mother of invention. It’s the six seconds plus automatic looping that turn almost every video into a song of sorts. It’s like Bjork in “Dancer in the Dark,” and the whole world has turned into your orchestra. When you’re used to the Vine song, watching Instagram for the same things feels off. Everything moves a little too slowly and goes on a little too long. But really, that may be the point. Instagram ISN’T Vine; it’s something new to be used somewhat differently. To see the differences and test the waters, some of the Vine stars like Meagan Cignoli (on Vine, on Instagram) and Jordan Burt (on Vine, on Instagram) are experimenting with both to see not only what works best for their voice but what their fans respond to, as well.

The right tool for the right idea

What’s great is that for the video stars out there, it has given them one more set of creative tools and a huge audience to play with. I have to say that one of the first things I did when Instagram went live was to look up my favorite Viners to see if they were on Instagram (and many were, previous to Vine). However, I hope that others see these apps the way I do … different means to different ends, and something for everyone.

Just to get you started, here are some of my favorite Viners. The categories are fairly subjective, and many traipse across categories, so whatever …

Comedy
Will Sasso
Chris Delia
Jordan Burt
Sunny Mabrey
Ima Pube / Allie Dawn
Ridd Sorenson (Red 6) / Xander
Owl Porn Yard
KC James
Pete Heacock
Kat Bateman
Thomas Sanders

Music
Nicolas Megalis
Jacob Carr
Fictionist
Mark Waldrop of The Digital Age

Animation
Meagan Cignoli
Khoa
Pinot
yelldesign
Ian Padgham

Auteur/Artful Video
Adam Goldberg / The Goldberg Sisters
Andrew Lynch
The Ghost of Merrit Lear

Famous people like Vine, too!
Colin Hanks
Thomas Lennon
Eric Stonestreet
Jesse Tyler Ferguson
Maisie Williams

Stars of Vine
unPopular Now
Jerome Jarre
Rudy Mancuso
James Urbaniak

OhMyGodWhatAmIWatching?
Rob Johnston
Keelayjams
Marlow Meekins

Best Brands on Vine
Lowes
Puma
Orange Cineday
Comedy Central
Funny or Die

Share:
1

The Internet of Things

Jeffrey Schrab by on November 15, 2012

One of the joys of working at GS Design is the talented people I work with who have interests and creative drives outside the workplace. There’s an ongoing show-and-tell session among many of us for what we’ve created in our spare time.

Now it’s my turn. I present to you the TwittaBox 9001!

I’ve been working on this little red box on and off for two years. Using the geek-culture darling, the Arduino prototyping platform, the TwittaBox 9001 is a miniature Webserver on the GS Design network. With a simple single-page form, a very short anonymous message can be sent to it and displayed on the LCD display. The finger inviting arcade-style buttons permit cycling through a list of new messages and deleting old messages. Flashing “new message” lights complete the silly little thing.

Okay, so it really has nothing to do with Twitter. But what it does demonstrate is that the devices we’re connecting to the Internet are increasingly things that we wouldn’t identify as “a computer.” The term used for describing this trend is The Internet of Things.”

When we think of the Internet, we think of many computers connected by a single logical network. What we mean by “a computer,” however, has been changing and will continue to change. Originally, it was the dishwasher-sized PDP-11s and VAXs of universities, and the mainframes of the U.S. military and their contractors. Then were added the desktop PCs of the ’80s and ’90s, along with the pizza box-shaped servers they connected to. Now we hold in our hands the mobile Internet in the form of smartphones and tablet computers. Each step of downsizing leads to many more devices connected to the Internet each time. And the physical downsizing of computing won’t end there. Anything that can be connected to the Internet WILL be connected to the Internet. The only reason not to do such a thing is cost. The core of my TwittaBox is a microcontroller that costs less than $2.

What we normally identify as “a computer” is changing, always has been changing, and will continue to change.

It doesn’t take too much imagination to see every lightswitch in a home connected by WiFi and controllable by a smartphone app – and that level of computing will represent pennies of cost.

What comes next? Will our jeans know how many times they’ve been washed, report this back to their manufacturer, and a sale offer for a new pair be emailed when they’re reaching their expected end of life? Will our shoes know how far they’ve “walked” and their owner receive a discount on their healthcare premiums if it’s over a certain average daily distance?

If such things sound too far out there, too far in the future, remember that the iPhone came out in 2007. Android devices were available about a year after that. Five years later, it’s hard to imagine a world without smartphones. The Nest thermostat and Philips Hue wireless lighting are examples of what’s possible today. The next five years will pass quickly.

Hang on. It gets crazy from this point on.

Categories: 
Share:

Get More Out of Gmail Through SCIENCE!

Chris Krasovich by on September 20, 2012

Google logoAll right, maybe it’s not science exactly – though an official lab and the scientific method are involved. Apparently, the super smart Google Labs team offers a bevy of semi-secret experimental Gmail enhancements that can make emailing more convenient, efficient, accurate, and/or entertaining.

According to Google, “The idea behind Labs is that any engineer can go to lunch, come up with a cool idea, code it up, and ship it as a Labs feature. To tens of millions of users. No design reviews, no product analysis, and to be honest, not that much testing.”

Pretty cool, huh? The features are constantly being developed and rolled out to the masses! The downside is that the enhancements can be taken down at will if Google decides to can them for some reason; so if you fall in love with one of the beta-phase features, you may end up with a broken heart. Based on the offerings (check out some highlights below), I think it’s worth the risk!

 

Create a Document – Allows you to create a Google Document from an email conversation.

Google Docs Gadget – Adds a Google Docs display featuring recent and starred docs to your email view.

Undo Send – Offers one last chance to “unsend” a message a few seconds after you hit the Send button.

Recently Used Emoji – Tracks your favorite emoji, and provides a quick and easy way to insert them into messages.

Preview Pane – Generates a mail preview pane next to your list of conversations, making mail reading more efficient.

Sender Time Zone – Adds your sent time and the current local time of individuals you communicate with via email.

Read more about the Labs, including how to enable them (it’s super easy), and then be sure to let us know which features appeal to you!

Categories: 
Share:
1

Advice From a Successful App Developer

Chris Krasovich by on August 23, 2012

At GS we’re lucky to have employees with wide and varied personal interests. For example, did you know that we have a beekeeper on staff? Or a major golf aficionado? We do! And sometimes those personal interests intersect beautifully with the work we do at GS, serving to amplify our client offerings in new and exciting ways. Kirill Edelman is a perfect example of the kind of employee with interests that improve our work. He has a passion for apps and has developed several of his own: Super Durak, Overdub, and Artifact, now selling through the Apple App Store. We thought it would be interesting to pick Kirill’s brain and get his input on some of the trials, tribulations, opportunites, and pitfalls associated with app development. Here are the results. If you have any additional questions for Kirill, please leave them in the comments.

Kirill's Apps

What made you get into iPhone app development?

I think the point where I decided to start learning about making apps was Apple’s announcement that they weren’t going to support Flash on their mobile devices. As a seasoned Flash developer I was outraged and headed to AT&T to get an iPhone right away to see what they were all about. I was hooked from there.

For me, the most appealing aspect of app development is the quick production pipeline – you can submit an app and have it in the store within a week, making money. There are some hoops to jump through, but Apple keeps making it more and more accessible and easier to work with.

How did you come up with the idea(s) for your apps?

I find inspiration in frustration: when I want to do something with my phone but can’t find an app for it. For instance, like any other aspiring bathroom singer I also sing in the car. Sometimes original beats or ideas for a melody come to me, and I have no way to capture them apart from recording the sound of my voice with my phone. I couldn’t find an app that would also let me overlay voice “drums” and voice “base” on top of my recording. That’s how the idea for Overdub was born.

How long did it take for you to get your first app from idea to the App Store?

My first app took a few months to build and had a pretty steep learning curve for me. I brainstormed my user interface on paper and made a lot of mistakes, but apparently the app itself fills a particular niche of amateur musicians, as it became pretty popular with practically no marketing effort on my part. I even made it to the “DJ and Producer Apps” featured list in the App Store.

What was it like when you sold your first app?

I couldn’t believe that someone would actually pay for something I made, but apparently there are a bunch of people out there who find my app useful enough to give me money! Mind blown.

What advice would you give to a new app developer?

Save money on books; there are plenty of free tutorials online.

If an app you’re making isn’t an original idea, you’d better have one hell of a marketing department to promote it.

Users have no interest in reading your instructions. Ideally, your app shouldn’t require much in the way of explanation; people should just “get it” right away.

It’s really hard for a small developer to get an app critiqued on app review sites. If you have some connections, or marketing muscle, use them. If not, use Twitter, make YouTube videos, make Facebook pages, lean on friends and relatives to spread the word, make a Website to go along with your product. The App Store alone doesn’t drive sales very well at all. The basic advice is: Plug your apps every way you can because it doesn’t matter how awesomely fantastic your app is if nobody knows about it.

To get featured in the App Store, implement a new feature from the next release of the iOS. For example: We’ll see a lot of PassKit apps featured when iOS 6 rolls out.

No more fart apps. Please. Make cool, smart, innovative stuff.

Design matters big time.

What are are the challenges of developing for the iPhone?

The nature of the device. An iPhone or iPad tends to introduce some interesting challenges into development. One of the recurring problems I’ve run into is the device’s lack of RAM. Unlike programming for the desktop, or for the Web, you have to be very conservative and careful with how much memory you’re using. iOS will unceremoniously crash your app after a single warning if you use up too much.

Another challenge is collecting crash reports. Typically when your app crashes on someone’s device (and it will crash all the time, trust me on this), you won’t get any error logs or anything to help you debug. Luckily now there are some third party services that help you collect this information.

What advice would you give to companies looking for the right app development agency?

Look for a company with diverse digital talent. Making an app is a bit like making a Website – you'll need designers, application developers, managers, and copywriters. A good-looking Web portfolio will probably translate well into a good-looking app.

Share:

People in Advertising Are Not Normal

Chris Krasovich by on July 19, 2012

A smart designer I know sent this infographic around a couple of weeks ago, and I keep coming back to it. In addition to breaking down how agency parties are different from parties in the mainstream business sector, it provides a helpful reminder to all agency types that goes a little something like this: You are not the norm.

It can be easy to think that our familiarity with new tools and emerging technologies and platforms should extend to the audiences we serve, but the fact is that Joe Average just doesn’t want or need to be as engaged in those topics as the creatives, technophiles, and account folk that populate agencies. It’s a mistake – and a dangerous one – to assume that we accurately represent the interest level of non-agency audiences when considering how best to serve them, as the infographic below from the good folks at Heat makes all too clear.

Share:

Nerd Superbowl (aka 2012 Apple WWDC)

Steve Schrab by on June 21, 2012

Apple WWDC 2012Last week Apple had its Worldwide Developers Conference (WWDC). As some of our regular readers may have guessed, there are quite a few Apple fans at GS. Apple no longer live-streams these events, but that doesn’t stop a few of us from watching the play-by-play action from live bloggers. It’s literally a text feed from attendees of the event that’s updated more than once a minute. That way we can get our fix of what awesome things Tim Cook and the gang are talking about as they happen. Could we wait for the video to be posted a few hours later? Sure. But what fun is that? There’s an excitement at an Apple event that just isn’t matched by any others in the industry. There’s a mystery around the event due to Apple being so tight-lipped about any unannounced products. Being so secretive creates a rumor-mill feeding frenzy, which gets many fans even more excited about what will happen. There’s this sense that Apple could really announce anything, and the world could suddenly change from underneath us. That would probably come off as a fan-boyish statement if it hadn’t happened before ... multiple times.

Love them or hate them, Apple is the company to watch. They’re a leader in the industry and always looking for ways to re-invent how we use technology. Even when Apple announces technology that follows the industry, that product is such an improvement over what was previously available that they’re able to “own” it. They’re envied and emulated by just about everyone in and out of their industry.

Back in the mid-90s they were nearly dead. Stock value was in the toilet, product line was stagnant, and some analyst said Apple should just start making Windows clones. Can you imagine? When Steve Jobs took over he made some bold decisions that moved the company forward and made them innovate again. From there they’ve risen to one of the most valuable companies in the world. Perhaps it’s this “come-back kid” feeling that has us all cheering for them. Maybe that’s why so many people download what’s basically a 2-hour commercial of them unveiling their latest offerings.

But don’t take my word for it. Watch the 2012 Apple WWDC Keynote yourself and tell me you wouldn’t want to be sportin’ one of those new Retina Display MacBook Pros.

Share:
2

Responsive vs Adaptive

Eric Dyken by on June 14, 2012

As we hurtle at light speed toward mobile overtaking desktop devices, some new philosophies in Web design have surfaced – philosophies that redefine how we approach our clients’ needs.

At GS Design, we’re exploring a new approach to Web design and development called “Mobile First.” Directly related to this strategy are two Web terms to digest: “responsive” and “adaptive.” What do they mean? Aren’t they the same thing? It seems there are as many opinions on the correct definition of these two terms as there are Web developers.

Let’s break it down.

Both terms can refer to allowing a Website to provide the best possible experience on a variety of devices, whether it be mobile, tablet, or desktop.

Responsive

The term responsive design can be credited to Ethan Marcote, who coined the term in his book Responsive Web Design to describe using “fluid grids, fluid images/media & media queries.” This basically speaks to the layout’s ability to respond to the user’s technology (browser or device) to best meet the user’s needs.

Although Marcote is credited with the term, he’s really only describing the most modern incarnation of this Web design strategy. The idea of tailoring a Website based on the user’s technology has been around for quite a while, as developers have always been programming to accommodate different experiences (like our old friend Internet Explorer). After Marcote’s book was published, his publisher later clarified their stance on responsive design to mean any technique used to achieve this end, not just fluid grids and media queries. For example, if we use jQuery or other javascripts to adjust the layout along with CSS media queries, that’s also part of a responsive strategy.

Resolution Independence: 2012.dconstruct.org responsive layout. A “fluid” grid allows the layout to “respond” to its respective device (or browser window) width.

Adaptive

Aaron Gustafson is the author of the book Adaptive Web Design. According to Gustafson, adaptive Web design “is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function).” He also states that “adaptive web design is just another term for ‘progressive enhancement’ of which responsive web design can (and often should) be an integral part, but is a more holistic approach to web design in that it also takes into account varying levels of markup, CSS, JavaScript and assistive technology support.” By these descriptions we can come to the conclusion that adaptive Websites are those that adapt their design, structure, and content to best meet the needs of their user, with responsive design being a subset of adaptive.

Some examples of an adaptive strategy:

  • Programming touch event functionality, such as swiping through a gallery, for devices that understand touch events.
  • Adding geolocation functionality for devices that can track the user’s location (e.g., “Use my current location”).
  • Programming a canvas element to replace an image if the user’s browser supports HTML5.

Basically, responsive and adaptive aren’t mutually exclusive concepts. They go hand in hand. Adaptive is an overall approach, and responsive is sort of a bullet point within that approach. It could be argued that responsive is more about the layout, and adaptive is more about enhancing the experience, but I’ll leave that for you to decide. Combined, they’re part of a strategy to provide the best experience based on the technology being used. It’s all about exploiting the capabilities of the user’s environment to create a more authentic and personalized experience.

Share:
1

Content Wants to be Available!

Jeffrey Schrab by on June 8, 2012

For any product manufacturer, exposure of content so that it’s accessible by way of a service – not just a Web page – won’t merely be necessary but expected.

At GS Design, we’re often called upon to share our views on future trends. A current request to do just that led me down the path of asking myself the question: What’s in the future for making Website content available?

I believe the near-future goal will be to provide site content not just as pages but as a service that can generate structured data that’s usable for a wide variety of purposes, not just Web page generation.

Examples:

  • A Website could expose its product details/specifications via a data service. External consumers, such as aftermarket dealers, could re-purpose Website product content in a style of their choosing. Because this data is not a copy of the product data but an actual up-to-date stream of data from a corporate Website, a single point of content control can exist across a wide variety of sites.
  • Exposure of product content by way of a service wouldn’t be isolated to just Websites. Reuse of site content in non-Web platforms – such as natively coded applications for mobile devices – should be made possible.
  • “Search Engines” are the past, “Knowledge Navigators” are the future. Knowledge Navigators, like Apple’s voice-directed “Siri” service, will become more prevalent. But in order for this to work, content needs to be exposed in a semantically rich way. We strongly believe that in the future, Apple (and other vendors) will provide APIs that allow anyone to expose knowledge sources. Content exposed as a service will make this possible.
  • Television is about to change. It might be Apple that will do it. It might be Google. Or it might be Microsoft. It doesn’t matter. “Channels” are going away and “apps” will be how you access rich “channel” video. No longer will information-enhanced television content be restricted to bottom-of-the-screen tickers and crawlers. While watching any sports event, you can ask: Who’s that rider/driver/athlete right there? What team are they with? And what parts do they have on that motorcycle/car/bike? Furthermore, how television content is being requested is expanding. It used to be that a thumb-flick on the remote was the only way of making a content request with a television. Even today, there are more ways than that. Microsoft’s Xbox Kinect can direct television content requests with the wave of a hand in the air. By using Apple’s Airplay technology, an iOS device can direct a television content request by touch. Availablity of content and the variety of methods to access content will surely continue to expand.

For any product manufacturer, exposure of content so that it’s accessible by way of a service – not just a Web page – won’t merely be necessary but expected. People will be disappointed if they can’t ask questions and get instant gratification of receiving the knowledge they’re looking for at that moment.

To talk about “Website visitors” will be an outdated concept. The content available from a Web source will have its tendrils extend much farther than a corporate Website.

Share:

The Journey of an HTML Email

Aaron Konkol by on May 3, 2012

You know how different browsers display Web pages differently? From a development standpoint, it takes some massaging and understanding the shortfalls of various browsers to get a page to display the way you would like. When it comes to HTML email, getting your message to display as you would like is a bit more complicated. Web browsers (IE, Firefox, Safari, and Chrome) all use the code you write to display a page verbatim. Email clients, on the other hand (Outlook, Hotmail, Apple Mail, Yahoo Mail, Gmail, etc.), insert, update, and neglect code that the developer writes. Litmus has a great infographic that explains the convoluted process an HTML email takes from designing and coding to the recipient’s inbox.

The Road to Rendering an HTML Email
Share:

The Ability to Make A Difference

by Amie Abendroth on April 26, 2012

My very first blog post, I suppose it’s appropriate that it marks a significant point in my career. For the past six months or so I’ve had the pleasure of working on a project that has been truly fulfilling. I’m pretty passionate about my projects in general. I consider myself a “dedicated” project manager – but this, this project was different. I felt like I was doing something for the greater good. And I know that my fellow GS team members felt the same way.

Once you meet Damian Buchman you’ll be drawn into his story and his vision. You won’t be able to help it – everyone I’ve worked with on this project has stated, “As soon as I met Damian, I knew I had to be involved.” We are no exception.

Damian is a childhood cancer survivor, a one-in-a-billion survivor to be more specific. But that’s just a small piece of his story. He’s a visionary, whose passion for life and making a difference in the lives of others drives him.

Damian’s vision is “The Ability Center” (TAC), where everyone has the opportunity to play. Imagine a facility. Where no one is left on the sidelines. Where people with disabilities and the able-bodied public feel equally comfortable. Where “accessibility” is a part of the natural landscape. Where sport chairs share equal status with running shoes. Where the only stares are those of wonder and amazement. The Ability Center is just such a place.

Sounds incredible, right? We thought so. GS Design was approached by mutual friend and colleague Clay Feller. Damian and Clay explained that they were looking for GS to create a Website. The Website would need to tell the story, it would need to be authentic, and, of course, be highly accessible. It should be professional and beautiful, and set the foundation for what would likely be a multi-phased approach.

We jumped at the chance to work on this project. Our core team met and developed personas for each of our potential audiences – helping us define the best way to architect the site. User Experience Architect Jim Broennimann lead the charge as we identified the goals of the Website for phase one, before TAC is a reality, and then the goals for phase two, once TAC is built.

We worked very diligently to research not only the standards on accessibility but also strove to exceed those standards, similar to the way TAC will exceed the standards of accessibility once it’s built. The website features large type, high-contrast colors, and large clickable areas. Our designers, Nick Krueger and Andrea Zehnder, led by Creative Director Sean Donnelly, found the perfect balance of beauty and function.

It was developed on Drupal CMS as a low-cost and user-friendly solution for Damian to easily update his site going forward. We also were diligent not to include any “hidden text” and used Web fonts versus graphical fonts further ensuring accessibility. Developers Steven Schrab, Jeffrey Schrab, and Kirill Edelman are known at GS for their attention to detail and innovative technology solutions, and it shows.

We were also happy to have our Social Media Strategist Chris Krasovich help make some recommendations so that Damian could streamline his social media presence and drive traffic to his new site.

In addition, our design team also defined the photography style and GS photographer Mark Brautiguam took many of the photos of the board of directors, the story photos, and the photos of Damian right here in our GS studio.

Damian was by far one of the most prepared clients I’ve worked with. He had much of his content, articles, thoughts, and business information ready for us to work with. Mike, our writer, masterfully crafted those thoughts and content into engaging copy that tells a wonderful story on the Website.

The Ability Center Website was launched at an incredible event at the Hyatt in downtown Milwaukee on March 22, 2012. It was attended by more than 200 people who all share Damian’s vision and are working toward making TAC a reality. The GS team, including Jeff Prochnow, Sean Donnelly, Andrea Zehnder, Jim Broennimann, Mike Zimmerman, Jeffrey Schrab, Steven Schrab, and I, all attended. It was incredibly rewarding to hear the genuine gratitude from all of our new friends involved with TAC and to meet so many good, kind people. And, our very own graphic designer Andrea Zehnder volunteered her time outside of her busy work schedule to design a printed brochure that, similar to the Website, is an educational and inspirational piece that was handed out at the event.

I could go on and on about the project, the people, and the vision for The Ability Center, but instead it’s my great pleasure to invite you to check out The Ability Center Website. As a GSer, as a parent, as a person – I will tell you that this has been such an incredible learning experience and one that I’m really proud to have been involved in. I’m confident that once you read about Damian and TAC you’re going to understand exactly what I’m talking about. And maybe, hopefully, you’ll help to make it a reality too.

Share:

Make a Fast Website or Lose Your Eyeballs!

Jeffrey Schrab by on March 29, 2012

I may sound like a “Get off my lawn!” old-timer, but my first Web access was through dial-up phone connection. Ah, my loyal USRobotics 9600-baud MODEM.

T’was a piece of crap.

My current iPhone has Web access speeds at least 40 times faster than that. My cable modem connection is about 80 times faster than that. And it’s still not enough. The New York Times ran an eye opening article citing the fact that while Web browsing we have gotten use to speed. And we want more. The one-line summary of the article is that studies by Google and Microsoft suggest that the goal for Web page loading should be sub-second and that a difference of as little as 250 milliseconds can be enough to turn site visitors away. This is down from the 2-second goal that use to float around a few years ago. Compare this with the thinking held back in 2007 that suggested a 4-second rule – and an 8-second rule back in the ’90s – and you see where expectations are going!

In terms of the industry of Web development, this affects EVERYBODY:

  • Graphic designers need to produce artwork that can rely on CSS-defined styles (vs. graphic images) as much as possible.
  • Front-end developers need to squeeze every byte they can – optimize PNGs, don’t use redundant asset references, don’t make CSS references to graphics you don’t need.
  • Application developers needs are about server-side code performance; whenever possible cache, cache, cache!
  • System administrators need to tweak Apache and MySQL configurations for performance (because default settings just don’t cut it) and look into CDN services along with AppDevs.
  • Project managers need to make sure the above people are doing their jobs! And share industry thinking with clients to communicate the value their agencies are providing them.

This is all a lot of work up front and requires eternal vigilance to assure that page delivery times stay consistently fast. But in order to give our clients the edge over their competitors, we have to do it!

 

What’s in the Future? WHAT? The future is ALREADY HERE!?

The need for speed is colliding with a new development – the New iPad and its Retina Display. Very high resolution displays are coming. First it was the iPhone 4, then to the 2012 edition of the iPad, soon to notebook computers and then to desktops. Oh, and your HDTV may start looking bad, too, with 4K HD standards coming. So at the very same time that Websites need to deliver pages faster than ever, those pages will have larger than ever file-size images attached to them.

Ouch!

 

What to do?! Get SPDY!

Some help is on the way. The venerable HTTP protocol that is used to deliver Web pages has not been changed much in 12 years. Google is looking to change that. SPDY is a revision to the HTTP protocol that seeks to reduce the overhead of page delivery. SPDY requires that both the Web browser a site visitor is using AND the Web server serving the requested page support the SPDY protocol. Google Chrome has supported SPDY for awhile now. Firefox supports SPDY, but only recently and only if one enables it. Simply put, this is an evolving technology that isn’t pervasive – yet. Furthermore, Microsoft also recognizes the need for a faster Web and working to take the goals of SPDY even further. This will hopefully lead to specifications that ALL software products can use to make a faster Web for all of us, regardless of the browser or device we use.

Categories: 
Share:

New iPad: the Human Eye Meets its Match

Steve Schrab by on March 22, 2012

The New iPadFor those of you not watching Apple’s product announcements like a hawk, just recently they unveiled the new iPad. One of the big, new features is the Retina Display. For iPhone folks, this is nothing new. We’ve had Retina Displays in our phones for a couple of years now. However, we’ve never seen a retina-quality display at this size. It squashes more pixels into a 9.7-inch space than your 1080i HD TV.

Daring Fireball has a pretty thorough review of the The New iPad (3). What jumped out at me was this:

“All of Apple’s software has been updated to retina-caliber graphics. (If they missed anything, I didn’t spot it.) Most third-party apps, of course, have not yet been updated. Just like with the iPhone 4, these up-scaled graphics are passable, but annoying. They stick out like sore thumbs after using true retina-display-optimized apps. Websites, too – most graphics and images on the web are behind the curve, as of today. Text looks great in Safari, but non-retina images look slightly blurry. The iPad display is so good that it shows, like no device before it, just how crummy most images on the web are.”

Web imagery takes a leap with this device. So what’s the best way to take advantage of it? GS has already been moving toward this space of high-res displays in a couple of areas. For example, we’re big proponents of using HTML Text and Web Fonts. New iPad users of sites using web fonts (for example, this one) will be treated to crisp, sharp text! We’ve dabbled with SVG graphics. Again, sites with these elements (for example, this one) will remain sharp and glorious. Another technique to take advantage of is to use more CSS-created elements vs. graphics. For example, using CSS-created rounded corners on elements instead of creating this effect using graphical files. So sites using a lot of CSS-created “chrome” (for example, this one) should scale up nicely on the new iPad. The great thing about these three techniques is that they’re actually more efficient than their graphical variants. They use less bandwidth to deliver and, therefore, download faster and speed up the user’s experience. But where does this leave photographs?

Photographs really have only one way to be properly delivered on the Web. That’s the JPEG format. While this format has done a noble job of compressing large photographs without losing a ton of quality, we’re starting to hit a bit of a bandwidth wall. The obvious solution is just increase the resolution on photos used on the Web. Maybe even do a little client-side sniffing and only deliver those images to users of high-density displays. Problem is, are we really going to ask mobile users who have limited speed or limited bandwidth (or, in most cases, both) to download an image that could be four times the file size? I want my photos to look great, too, but I also don’t want to go over my bandwidth limit each month.

So what’s the solution? I’m afraid there isn’t an easy answer at the moment. While there are solutions, it’s hard to know what the user will want and when. Someone without a high-res display has no use for high-res images. Users of high-res displays may appreciate those slick graphics when they’re on their personal WiFi connection, but they may hate you when they’re on a 3G network waiting forever for images to download and watching their bandwidth get chewed up.

It’s an interesting problem to solve. I, for one, can’t wait to see what it looks like when we strike that balance.

“The Retina Display’s overall effect is like that of high-end glossy magazine print — except that it updates live. It’s living breathing print.” —John Gruber

GSDesign.com on a Retina Display iPad

Update: July 23, 2012

Want more? Check out this article I wrote for the BizTimes on improving your website to accommodate retina displays.

Share:

Can Google be Trusted?

Justin Derleth by on February 23, 2012

Despite its “Don’t be evil” slogan, many people are starting to believe Google is just that. They believe Google to be the ultimate big brother and believe it to be using our private data for its own gain. So would you trust your corporate email with Google? 

We’re in the discovery stages of switching email platforms. Being a Mac- and Linux-based shop, Microsoft Exchange is ruled out. This leaves Google Apps and Zimbra as the two big players we’re considering. Comparing the two, there’s a lot of noise about security and privacy issues with Google. 

A little background on why I’m qualified to speak on this subject: I got into computers through the hacking scene, have a Masters of Science in IT Security, am a senior system administrator, and have enough real-world experience to have seen several server compromises at various companies. I voluntarily turn on multi-factor authentication and have several one-time password tokens for my personal accounts. That said, I still have a hard time buying into the security and privacy issues with Google Apps Premier.  

I think most people really need to get over themselves. What the majority of people do is just not that important for Google to give a damn about. The last I checked, Google was valued at $111 billion dollars. The next widget you’re designing is meaningless to them. Even if the Terms of Service allowed them to utilize your data (which, at least for Premier it doesn’t), the scandal Google would face if it became public that it was doing anything more nefarious than targeted marketing could ruin the comapny.   

After reviewing the TOS for Google Apps Premier, the scariest section I could find is the following:

2.2 Aliases. Customer is solely responsible for monitoring responding to and otherwise processing emails sent to the “abuse” and “postmaster” aliases for Customer Domain Names but Google may monitor emails sent to these aliases for Customer Domain Names to allow Google to identify Services abuse.

The “abuse” mailbox, in particular, is commonly used to report spam, denial of service attacks, or other nefarious actions to the system administrator of a domain. Google reserves the right to monitor “abuse” and “postmaster” for these types of messages. I doubt it really does, but it reserves the right to. If this really bothers you, your concern may be valid.  

Any other use of customer data by Google is prohibited by section 7.1 of the agreement. 

7.1 Intellectual Property Rights. Except as expressly set forth herein, this Agreement does not grant either party any rights, implied or otherwise, to the other’s content or any of the other’s intellectual property. As between the parties, Customer owns all Intellectual Property Rights in Customer Data, and Google owns all Intellectual Property Rights in the Services.

Even Google Ads are disabled by default, and the administrator of the account must enable them if targeted advertisements are desired.

1.4 Ads. The default setting for the Services is one that does not allow Google to serve Ads. Customer may change this setting in the Admin Console which constitutes Customer’s authorization for Google to serve Ads. If Customer enables the serving of Ads it may revert to the default setting at any time and Google will cease serving Ads.

So if Google were spying on you, it wouldn’t face only a potential PR nightmare, it would also be in breach of its own agreement.

The issue of confidentiality is only one-third of the security picture, though. The other two-thirds are the often-neglected components of availability and integrity. There’s no point in keeping your confidential data private if authorized individuals can’t access that data, and you can’t guarantee the data hasn’t been altered or corrupted.  

I’m fairly sure that Google's data centers will provide higher availability and integrity than any in-house solution I could design. Small companies wouldn’t have the budget, manpower, or economy of scales that Google does. But for some companies this may not be true, so let’s get an idea of where the breaking point is. 

While Google is pretty secretive about its infrastructure, I think it’s safe to assume everything has redundancy built in. Let’s just assume you can build a fully redundant email solution with six servers. That would be two load balancers, two MTAs, and two databases to hold the mailboxes. When you’re talking about enterprise-class equipment, you’re talking $400-$800/month per server from a reliable data center. Virtual servers need not apply for the type of IO that an email server does. On the low side, this is $28,800 per year and is only looking at the cost of the hardware and internet connectivity at the data center. You can purchase the same or better availability and redundancy from Google for $50/user per year. Even using this lowball figure, which doesn’t include management costs, support costs, or software licences (and probably other costs), you would need to have 576 employees before it would be more economical to do it yourself.

But this blog isn’t supposed to be about the economics of Google Apps. It’s about security and privacy issues, so let’s get back to security …

Even if it makes economic sense for you to do it yourself, do you really think your internal IT staff has the same level of expertise as Google when it comes to designing and hosting email solutions? At its January 2012 earnings call, Google reported having 350 million active Gmail users. This expertise plays a big role in the availability and integrity of your email, which, as I stated, are two-thirds of the security pie.

So are we going to use Google Apps instead of Zimbra? I don’t know yet. I’m just over the issue of privacy and security being the big argument against Google, with most Zimbra users assuming you must be insane to trust your email with Google. If you really do have something that sensitive, it has no business being transmitted over the Internet.

Disclaimer: Everything I stated is regarding the Google Premier service and not the free service. As always, you get what you pay for.

 

Categories: 
Share:

SOPA - The Day the Web Went Black

Jeffrey Schrab by on January 18, 2012

Today, major parts of the Internet went dark. Intentionally. This was done as a show of protest against proposed legislation that would threaten to break the Internet as we know it. What was being protested? Two pieces of legislation: SOPA, the Stop Online Piracy Act, and PIPA, PROTECT IP Act (Preventing Real Online Threats to Economic Creativity and Theft of Intellectual Property Act of 2011).

But what are SOPA and PIPA, and why should you care? 

SOPA and PIPA represent pieces of American legislation that aim to give the Department of Justice direct tools to shut down websites on a basis of "reasonable belief of infringement" alone. This potentially can apply to many cases. Hosting of unauthorized distribution of copyrighted material seems like an obvious case. But even linking to copyrighted material could cause a site operator to be considered as infringing. For example, should your website have an open comment section for site visitors, commentors could, within their comment, link to material that is considered copyrighted. In such a case, the DoJ would have the power to remove your website’s domain name from the Internet, making it pretty much nonexistent. Site operators would have the full responsiblity of moderating ALL contributed content and comments to assure that someone didn't link to their Flickr account containing a scanned image of a professionally taken portrait of themselves (this isn’t always legal to do – really!).

Holding individual website operators responsible for making legal judgments for ALL contributed content could be more than any site operator would care to do. Some wouldn’t even take the risk; they would simply close their user-contributed content capabilities and be done with it. But then there are major sites that represent nothing BUT user-contributed material (like YouTube and Facebook) – which could cease to be. This opens the can of worms of a loss of free speech and the chilling effects that follow.

The fact is that SOPA represents a potential eroding of due process. It will be possible to shut down a website without a full review by a court of law to prove that a law has actually been broken. Should a website represent an online business, the impact could mean the end of that business regardless if there was an infringment or not. Clearly, such a scorched-earth policy is not a case of “let the punishment fit the crime.”

Finally, SOPA may not solve anything. Shutting down potentially offending sites could hurt the innocent and do little to curb online copyright infringement. Also, it has been argued that we have plenty of laws to govern blatant copyright law already. Why don’t we seek to more effectively work within existing parameters instead of seeking a harmful shortcut?

Intellectual property rights DO need to be protected, but it needs to be done better. SOPA and PIPA represent pieces of legislation that are still evolving. The opportunity to have one’s voice heard still remains. With this link you can contact your congressperson today.

Categories: 
Share:
9

Practical SVG Usage

Steve Schrab by on December 21, 2011

Scalable Vector Graphic (SVG) files are nothing new; they’ve been around for years. Despite this, we still haven’t seen them used as broadly as they could be. Given that the goal today is to build increasingly responsive and adaptive sites that look great not only on high-res desktop displays but also in the palm of your hand on mobile devices, bypassing SVG is a huge oversight. SVG files shine in this area as they’re completely resolution independent and (typically) have a smaller file size than their bitmapped brethren. If you’re targeting an iPhone with a Retina display, do you really want to make 3G users download a bigger file just to take advantage of that screen? Why not scale a single SVG file without wasting additional bandwidth?

Comparison of PNG scaling versus SVG scaling

Comparison of PNG scaling versus SVG scaling.

Of course, SVG files aren’t appropriate for every image type. Photography is still in the realm of the JPEG, and many sites use photography as their main graphic elements. Where you don’t need photography, CSS3 is able to fill in a lot of gaps as far as design elements are concerned. So, then, where is SVG appropriate? How about one of the first elements to generally appear on a web page – the logo.

The logo

Many logos are already created in vector drawing programs, like Adobe Illustrator. Yet they’re often rasterized and placed on the page as a PNG or GIF file. Why not preserve their original precision?

Consider the following:

  • A brand logo is an ever-present element on your site and one that is found on every page. Spending time optimizing global elements is always time well spent.
  • A logo isn’t simply some random bit of chrome or graphical glitz. To some extent, it can be considered “content.”
  • If you’re into print style sheets, an SVG file’s resolution independence can make your site’s printouts look as good as your company stationary.
  • A logo is a key part of your website. It’s your brand. Your identity. Certainly it’s worth a little extra time and effort.

How do I do it?

In Adobe Illustrator you can save SVG files out directly. In the dialog box, choose the profile SVG Tiny 1.2., which is meant for devices with reduced computational and display capabilities. Sounds perfect for mobile devices, doesn’t it? Uncheck the "Include XMP" box (You have to click “More Options” first). Including the XMP data will add a lot of unnecessary metadata making your file size much bigger. Since this data is irrelevant on the web and we really just want the vector info, we can get rid of it.

Once you have your SVG file, you can link to it using image tags or CSS background images. Previously you needed to link them via object tags, but since we’re not looking to add any scripting or interactivity to our SVG files, linking them via a static image method should be appropriate. However, be sure to tell your server admin to set up a mime type for ‘image/svg+xml’ for your SVG files. It may not be set by default.

In your image tags, you can even set a width as a percentage to make your logo perfectly scalable with your responsive layout. You’ll find your logo looks great at all resolutions, with no multiple image swapping and still just a tiny file. Many of the logo files I've used in SVG format have ended up being as small as 2KB with gzipping. For example, the GS logo on the corner of this site.

What about browser support?

All modern browsers have good SVG support. Many have had it for quite some time. Internet Explorer has support as of version 9. Using a JavaScript library called Modernizr, we can easily test for SVG support and swap a vector file for a well-supported bitmap file. Just put Modernizr on your site, and it takes care of most of the work for you. You'll need to create a fallback PNG file, but by using these methods you can avoid the browser downloading both files.

For example, in CSS just use .no-inlinesvg and .inlinesvg before the selector with your background image.

.no-inlinesvg #logo {
	background: url('logo.png');
}

.inlinesvg #logo {
	background: url('logo.svg');
}

For image tags, you can use JavaScript to swap your files.

<script>
$(document).ready(function() {
	if (Modernizr.inlinesvg) {
		//SVG.
		$('#logo').html('<img src="logo.svg" alt="Your Company" />');

	} else {
		//No SVG.
		$('#logo').html('<img src="logo.png" alt="Your Company" />');
	}
});
</script>

<a href="/" id="#">Your Company</a>

While many browsers support SVG files, they don’t all support SVG use in IMG tags or in CSS backgrounds. For example, using SVG inline has only been supported in Firefox since version 4.0. So the venerable Firefox 3.6 would receive the PNG fallback in this case.

What is the payoff?

The mobile space continues to grow. Android and iOS both have devices with scalable high-res displays. Instead of making bigger high-res bitmaps that will inevitably have a larger file size, simply use a single small SVG file that will look great regardless of how large or small displays become.

On the desktop when you use browser zoom, your SVG files will scale just as flawlessly as your HTML text. What’s more, the latest version of Safari allows you to double tap with two fingers (assuming a laptop trackpad or Magic Trackpad) and zoom your viewport much like you do on the iPhone. Again, your SVG files will scale beautifully.

Speaking of Mac OS X Lion, there’s evidence that future versions of OS X will take advantage of high-res displays. You can scale the display up without changing your resolution. There's similar development within Windows 8 as well. While display resolutions are still not high enough to really justify this, you can see a day where we’ll have a Retina caliber display for our desktop machine.

With a combination of web fonts (for greater use of HTML-rendered text), CSS-rendered graphics (rounded corners, gradients, drop shadows, etc.), and SVG files, we can future-proof (or at least future-friendly) our websites by making them more resolution independent. Sure there are a number of steps beyond just linking to a file, but we can start with one of the single most important graphical elements on our site. The logo. It’s an element that will help you dip your toe into the manner in which we may be making websites in the future.

Share:
1

You know you’ve got a rockstar developer when ...

Aaron Konkol by on December 8, 2011

he’s featured on Engadget for a little something he dreamed up and built in his spare time. Our very own GS funnyman Kirill Edelman has got some wicked skillz when it comes to developing applications. Two years ago our company identified development of mobile service offerings as an area of focus for. Kirill took it upon himself to shift from Flash Actionscript developer to iOS App developer.

After working on the first GS iPhone app, he has created two on his own (Overdub and Artifact). And another GS app is in the works.

Check out the Artifact app review on Engadget. Keep on rockin', Kirill.

Artifact in use

Share:

FED Stuff - November Edition

Steve Schrab by on November 30, 2011

FED Stuff is a collection of the little CSS and Front-End Developer tricks that I’ve learned each month. There is a lot to learn. Some may be new to you. Some may be what you assumed is common knowledge. But we can't know for sure unless we share. This is my attempt to share them. Little tricks add up to big things.

Rich Snippets Testing Tool

This is a great tool by Google for testing rich snippets of microdata, microformats, or RDFa information. This type of information is being used a lot more in search services. Include rich snippets for shopping, recipes, reviews, video, and events, and music. By using this testing tool, you can make sure your rich snippet data is formatted correctly.

CHECK IT OUT: http://www.google.com/webmasters/tools/richsnippets


Media Queries and Meta Viewport tags

I've been messing doing a lot of work with mobile web apps this past month and found a lot of pain points. For example, setting the viewport to the same size as the device width...

<meta name="viewport" content="width=device-width">

...doesn't necessarily give you the exact pixel resolution width of your device. Many devices give a pixel display much smaller than their screen resolution. The iPhone 4 has a resolution of 960 x 640. Yet if you query it's width, it returns 320px. The manufacturer mostly likely found this the best way to display a web site that wasn't specifically designed for mobile (which most are not). Either way, it can make fitting your design to different sized screens a real pain. Using a combination meta viewport tag and width media queries are the best way to insure your site looks as intended at the target resolution. Though it can require a bit of tinkering to get it right. Read this article at quicksmode.org for the full scoop.

READ MORE: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html


Portrait and Landscape Media Queries

Speaking of media queries, detecting Portrait versus Landscape is nothing new. What I didn’t know is that media query isn’t set by the hardware telling the browser what orientation the device is being held at. What it’s doing is testing whether the browser window is taller than it is wide. So if you make your browser window skinny, it’ll swap to portrait mode.

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

This is not only cool for detecting the orientation of a device, but you could even re-layout the page for desktop browser windows that are longer than wide. It’s also a great way to do some quick testing.

One more note, older versions of Internet Explorer (8 and less) will not recognize the media query tags within your CSS documents and just render the styles within. So make sure you put the default styles after the changed values so they get overwritten properly. If landscape is your default style, set the portrait styles first, then override them with the landscape ones. Which leads to our next topic …


“Mobile First” CSS and working with legacy Internet Explorer

Nicolas Gallagher wrote great article on some techniques of writing your CSS Mobile First (building your styles up from mobile to desktop) and still working around IE 6/7/8 (which don’t understand Media Queries). He also talks about using Sass (A CSS Pre-processor) can help, but you can still use these techniques without it. Definitely worth a read.

READ MORE: http://nicolasgallagher.com/mobile-first-css-sass-and-ie/


Handy Tools - cubic-bezier.com

A tool that helps you work with the easing functions of CSS3 transitions and animations. It’s pretty pimp.

CHECK IT OUT: http://cubic-bezier.com/


jQuery 1.7 Released

Probably old news by now as this happened early in the month, but there's a new version of jQuery. This new version features new event APIs of .on() and .off(). From the examples on the press release, it looks like these are unified way of attaching events.

MORE INFO: http://blog.jquery.com/2011/11/03/jquery-1-7-released/

Share:

Refresh Your Cache Yo!

Steve Schrab by on November 10, 2011

refresh buttonHow many times have your heard that? You ask a developer to make a change to your website, they tell you it’s done, you go to check it out, and it appears nothing has been done. They speak the phrase they’ve probably said so many times in their life, “It must be cached. Just force refresh.”

For those who don’t know, your cache is temporarily stored files on your computer so future requests for those files can be served faster, rather than re-downloading, say, an image file that likely doesn’t change. Cache can get in your way when it’s caching assets on your computer that have been updated on the server. Most of the time, this isn’t an issue.

While I’m guessing the majority of readers are already familar with cache issues, you may not be aware of quick keyboard commands for your browser to bypass your cache. As a developer, I use these so often that I often bypass my cache every time I hit the refresh button, whether I need to or not.

So without further ado, here’s a handy-dandy list of keyboard commands for bypassing and refreshing your cache:

  • Internet Explorer
    Hold the Ctrl key and press the F5 key.
    Hold the Ctrl key while clicking the refresh button in the toolbar.
     
  • Firefox
    Hold down both the Ctrl and Shift keys and then press R. (Alternatively, hold down the Ctrl key and then press F5.) On a Mac, use the Cmd key instead of Ctrl.
    Hold down the Shift key and click the Reload button on the navigation toolbar.
     
  • Safari
    Hold down the Shift key and click the Reload toolbar button.
     
  • Chrome
    Hold the Ctrl key and press F5.
    Hold the Shift key and press F5.
    Hold the Ctrl key and click Reload button.

Check out this Wikipedia entry for an exhaustive list of ways to refresh your cache in just about any web browser:
http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache

Categories: 
Share:

Runs, Hits and Eras

Sean Donnelly by on October 13, 2011

MLB GamecastMLB.com GamedayWith Milwaukee delirious with baseball fever, many folks around here will be glued to their televisions, following the post-season exploits of the Brewers. But an ever-increasing number of fans will also be fixated on their computer monitors, tablets, or mobile devices during the ball games. And why not? The real-time updating provided by the Internet can enhance the game-watching experience, offering instant access to information that a television broadcast would rarely, if ever, cover.

Whether you prefer ESPN’s Gamecast or Major League Baseball’s own Gameday web app, the amount of relevant statistical data they supply is mind-boggling – far beyond batting average or ERA. Want to know the kind of pitch thrown, its velocity, trajectory, and ‘nasty factor’ (whatever that means)? It’s in there. Want to know a hitter’s hot and cold zones, his hit distribution, or how he fares with the bases loaded? It’s in there. Want to know if a player prefers chaw, bubblegum, or sunflower seeds? Well, it’s not in there yet, but I hear an upgrade is coming any day now.

Recently MLB introduced Postseason.TV, enabling fans to further immerse themselves in the game experience. Subscribers have access to the raw video feed from the network, choosing from eight different camera angles including the dugout view (in case you’re wondering which body part your favorite Major Leaguer is scratching at any given moment). And like most things interactive, social media capabilities have been integrated into each of the apps, so fans can share their reactions to plays the instant they happen. In essence, we’re seeing the emergence of a technology-driven media hybrid, one that effectively connects fans more strongly to their team, increases their brand loyalty to the content source (ESPN or MLB), and amplifies the social experience inherent to all spectator sports.

MLB.com Post SeasonPlay-O-GraphBut a look at history reveals that Gamecast and Gameday represent the evolution of an earlier technological marvel. A century ago, when communal experiences took place in a physical location rather than a virtual one, crowds would gather in a city street to follow ball games on a large animatronic scoreboard called a Playograph. At its heart was a reproduction of a baseball diamond, complete with a little white ball that would simulate the movement of pitches and hits. Surrounding the diamond were the lineups and their batting results, much like a boxscore. Fans, then, could witness a rudimentary re-enactment of the game without being at the ballpark. It required three men to operate the Playograph: one to receive the plays via the telegraph, another to move the ball, and a third to helm a keyboard that controlled the rest of the scoreboard’s functions. While the Playograph was primitive by today’s standards, it was quite popular in its day (see the accompanying photo). Perhaps it’s because it addressed fans’ social need to come together and share their passion.

Ply-O-Graph Crowd ShotJust as the Playograph was replaced with new and better technology, in the next 100 years something will come along to render the Gamecast/Gameday experience obsolete. What form it will take is anybody’s guess, but what won’t change is our desire for that shared experience – whether it’s online or in real life – that baseball provides.

Special thanks to the wonderful Uni Watch blog for resources and information about the Playograph.

Share:
4

What’s your favicon strategy?

Steve Schrab by on September 29, 2011

faviconI’ve always joked with my team that the favicon is the most important part of a website. When we start creating a website, the first thing I do is create the favicon. Then I send the dev address around to the rest of the team and proclaim “we’re half done already!” But seriously, I love favicons. They’re just one part of a ton of little details you can add to a site to make it that much cooler. And I really dig putting little fit and finish details on a website.

ICO Favicon

I always start by making a favicon ICO file using Dynamic Drive’s FavIcon Generator. Not sure if there are better tools out there, but it’s worked so far without any issues. This is the file I place in the root of the directory. Some browsers will actually delivery a 404 error if they don’t find it. That could add a lot unnecessary crap to your server log files. So it's a good idea to put it in there and not just for style sake.

PNG Favicon

Next make a 16 x 16 PNG version of the icon. I like to use PNGs because I can take advantage of a full 8-bit alpha channel (it’s still a really small file). The full transparency looks great on tabs in browsers like Firefox where the backgrounds can change. Then, we link to this icon in the head of our HTML document. This link overrides the favicon in the root for browsers that know how to read the PNG file as a favicon. Others will default back to ICO file.

Base64 Favicon

Lately I’ve taken to converting these files into base64 data and putting that into the LINK tag. Google recommends that you avoid making tons of http requests in order to speed up your page. Converting images to base64 converts the image into a text string that you can just include on your document without linking to an image file. The browser then interprets the text string into an image. For example:

<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcxJREFUeNp80t8r3XEcx/Hv8SM/IhdL6UzRUGTHj3NWqBEJR201NwvHBeUPsNoFN1smkhtKWhQXxG4ou9glSrK2aaE1P7O7JS5YGykcnu96fXV241OPvp/v9/P5vj/vz+f98QQCgZDjOL2IwzZmMYm/zv8tBk1ohg9RGIz2er1zdB4hCb+QgHb9tKlnEEN4iBuUIBl+i3qtSUd4jjNkoxvlOMQTvMU3zd1AAS4tjVV9tMge9ffRahPwBq8ifnb03dpPC/BBL6koVt+LNSyiE8so05htN6D+jJ2B7btCA3/wFSs41TaWEIt0ZZuhDBbw3kMVHB3KR63WhjzkKOC9LUrPL6hGnbKxrPwqbbxWTZOMiLO6C2CtBo22LzzDjipklRrQHTnAGPLdIG6AQvTjXOU6xm9c4R+mkKLvE5jHCzeARytYunMq4Wu80+FZa9B5BLWNLPTYpbP0KlHrlkXPRa1iZ/NAF6weWwjjQtt4aRmE9NNJxGX5jlyUYlyLfNbYns7CWosFeKoXN7J7qfqQiRF0KW13Xlh9n20hUS+W6jR28Rif0KExq86wVk/SuLUEu4l2q4pUATvQdVViKaLEP3TR7A5UqbQ2f/RWgAEA6xlnphy+IP4AAAAASUVORK5CYII=" />

To convert files to base64 data, I use the online base64 encoder/decoder at motobit.com.

iOS touch icon

Finally I make a iOS touch icon. I make a 129 x 129 PNG for this. Might seem like a weird size, but that’s what Apple uses so I figure it must be good. You could just name your file “apple-touch-icon.png” and stick it in the root of your site just like a favicon.ico file and iOS will find it. Now you can make multiple sizes and point to each of them depending on whether you're using an iPhone, an iPhone with a retina display, an iPad, or even an Android device. But I think creating one larger icon and allowing it to scale is the most efficient approach.

I don’t know about you, but I like keeping my directories as clean as possible. Especially the root. So I link to them in head:

<link rel="apple-touch-icon" href="/_images/common/favicon-mobile.png" />

You can also use the rel attribute of “apple-touch-icon-precomposed” if you don't want iOS to add “teh glossy” to your icon.

Is this a lot to process? Granted it might seem like small flourish, but this is just that added touch of branding to your site. This is what makes your site jump out in that long list of bookmarks you keep. It’s just one of the many details we put into our site that is probably under-appreciated.

So, what’s your favicon strategy?

Note: This is reposted from an article I posted on Forrst.com.

Share:

20 Things I Learned about Browsers and the Web

Steve Schrab by on November 19, 2010

The Google Chrome Team has authored an online book addressing some common topics on the Internet. It not only offers awesome examples of what you can do with HTML5/CSS3/JS, but is also a good book about the Internet in general. As a developer, I particularly like the section on how older browsers are slowing down innovation on the Internet. Take a look and let us know what you think in the comments. http://www.20thingsilearned.com/

Categories: 
Share:
1

CSS3 - The Third Dimension

Jeffrey Schrab by on November 12, 2010

Looking for a creative new way to make your website stand out?

Additions to Safari now make it possible to do 3D transformations of HTML elements. To give these transformations a whirl, I made this slideshow.

CSS3d SlideviewNot all browsers support these features. But Webkit does, which means that all iOS devices can take advantage of them. The technical aspects of CSS 3D are more than I want to get into here. The key point is that websites on these devices can now be much more visually creative.

Somewhere along the line it became clear that not all Safaris are alike.  For instance, mobile Safari on the iPad (iOS 3.2.2) does not render reflections when a 3D transformation is applied to an element.  Neither does Safari for Windows 5.0.2.  But mobile Safari for the iPhone 4 and the latest version of Safari for MacOS do render reflections, even if a 3D transformation is applied.

View the demo.

Share:

iPad Adoption Rate

Steve Schrab by on October 7, 2010

CNBC is running an article about Apple's iPad adoption rate. To summarize, it's pretty hot.

“iPad sold three million units in the first 80 days after its April release and its current sales rate is about 4.5 million units per quarter, according to Bernstein Research.”

“At this current rate, the iPad will pass gaming hardware and the cellular phone to become the 4th biggest consumer electronics category with estimated sales of more than $9 billion in the U.S. next year, according to Bernstein. TVs, smart phones and notebook PCs are the current three largest categories.”

Whether you think the iPad is revolutionary or an expensive toy, it would be best to pay attention to these numbers. Read the article for more information.

Categories: 
Share:

Schedule your stuff with Google Calendar

Aaron Konkol by on July 23, 2010

A while back, my wife and I had trouble scheduling stuff and regularly had scheduling conflicts ... "Oh, I forgot about the graduation party that day." ...  "I told my sister we could babysit." ...  "I forgot your brother is in town that weekend."

And then we found Google Calendar. Life has never been the same, for there has never been anyone like Google Calendar ever in the world. I have used it almost daily for the past four years.

Google Calendar screen shot

Here's how to get started with Google Calendar

1. Create a Google account (if you don't already have one).

2. Sign in and go to http://www.google.com/calendar.

3. Start adding stuff!

4. Dig deeper with cool features:

Hook it up to your iPhone and add items to your calendar remotely.

Subscribe to public calendars like sports schedules for the Brewers, Badgers, or work calendars.

Add reminders via email or text.

Use it with with iCal or Outlook.

Follow the Google Blog to find out about new features that are added, like tasks.

Categories: 
Share:

Good Form!

Jeffrey Schrab by on January 20, 2010

A few of us at GS Design had the opportunity to attend An Event Apart, a conference for Web developers with a focus on best practices in Website development. One of the many speakers there was Luke Wroblewski. Luke's experience was in Web form development for companies like eBay, Yahoo!, and others.

The big take-away was that forms require a lot of work to do right. A completed form starts a conversation, and a good form experience can make the difference between connecting with a new site visitor – or turning them away forever. Here's the business reason from Wroblewski's book Web Form Design: Form redesigns have been shown to result in a 10-40% increase in completion rates.

What makes for a good form? This is a subject on which books have been written, but here are a few basics:

The Path to Completion is Clear

People. Don't. Read. Websites. They scan them. The eye wants to follow a straight path. Forms should guide the eye from top to bottom with as little unnecessary wandering as possible. The key phrase here is "unnecessary wandering."

There are some field patterns that our eyes have become accustomed to that might seem to break the "straight path from top to bottom" pattern. For example, putting "city, state, ZIP" in a single line leading the eye left to right instead of top to bottom might seem to violate this rule. But we are familiar with that address pattern on postal mail. Sometimes the familiar experience is the best choice.

Gather Only What is Necessary

Form design by committee is doomed to failure. What starts as a simple e-newsletter sign-up form with only an e-mail address required can balloon into something that will drive away potential subscribers. A big, intimidating form will make site visitors quickly think, "I have better things to do." Just like in our offline relationships, the information we share about ourselves is a graduated process. There are just some things you don't ask on a first date.

Distractions are Removed

Notice how Amazon.com's pages become less "noisy" when you're entering the final checkout. All of the "90% buy the item featured on this page"-type content is removed. A shopper actually has to go out of his/her way to leave the shopping experience as an encouragement to complete the form – and the sale.

Give Immediate Feedback on Progress

Thanks to AJAX techniques, rich real-time interactions with the Web browser are possible without full page reloads. In the case of forms, field validations can take place on a keystroke-by-keystroke basis, guiding the site visitor toward a successful validated form the first time without the iterative submit-form/fix-errors/repeat-as-often-as-necessary pattern in years past.

All said, good form design is not easy. At GS Design, we have found that a well-designed and developed functional form can take many times longer to design and develop than a static form-less page. But such forms are the business end of the Web. The time taken is well worth it if it establishes connections with site visitors.

This is a huge subject! In the months to come, I hope to showcase some specific examples of Good Form(s) and the thinking behind them. What constitutes a good form is more a matter of philosophy versus a hard bullet-point list of commandments.

Categories: 
Share: