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.

Last 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.

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.

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.

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.

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

I’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.

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.

Not 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.

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.