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

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.

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.

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.

We’re always thrilled to be asked to work on the interesting projects that come to us from long-time client Harley-Davidson, but when a project is also an opportunity to pay tribute to a man of legendary status who has inspired legions and changed lives – even lives right here at GS – the project becomes something even bigger.

The Willie G. Davidson microsite was such a project.

Willie’s name is synonymous with the Motor Company, and as his role shifted and his incredible career in Styling ended, Harley-Davidson wanted to give riders around the globe a chance to express their appreciation to Willie G. directly. That’s where we came in. We were called on to create a microsite that would accept and display UGC and messages to Willie. The team worked efficiently and in a close, iterative fashion with the client, and created a site that allows users to engage with Willie G. in a truly special way. Messages from near and far have been coming in – and by far we’re talking locales like Bahrain, Brazil, Australia, Thailand, and more – with expressions of appreciation that are truly memorable.

We’ve had opportunity to add thank-you messages of our own, but really, for us, the whole project was one big thank you to the man and the client who has played such a large role in GS’s success.

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.

For 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

Update: July 23, 2012

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

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.

How 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

Content Strategy.  For web communications, it's on the forefront of the mind of every industry professional these days.  Or it should be. As an industry we've been focusing on the container not the content for years now.  To be fair, it's only recently that the technology developed to a point where we didn't have to work so hard to coax code and graphic design to do what we wanted it to do and could think of concentrating on other things. Like the reason we make websites in the first place. Content Strategy reminds us that we've been putting the cart before the horse for quite some time now.  And as an industry we are waking up to that fact and making changes to the very production process of web communications.  Recently I read an interview with Karen McGrange, an upcoming speaker at the Do It With Drupal conference.  Karen is a Content Strategist at Bond Art + Science. In this interview while discussing the importance of content, she nailed it:

I think so much of web design and development is approached as just that: design and development. What does it look like and feel like? What are the technologies we'll use? How will we code this? There's been this third leg of the stool, the content, that we've never really talked about, or we've treated as somebody else's problem. We say, "Oh, that's the client's problem!" or, "We're going to come in, and we'll do a redesign and put in a CMS, and that will solve everyone's web problems!"

One commenter of the above article extended what Karen had to say by saying:

Content is rarely the focus of web redesigns and this often leads to massive budgets being used to create incredibly attractive "containers" (and of late, attractive and 'responsive' containers).

Really good stuff.  Everyone must read this. (via Kristina Halvorson)