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

Posts in Mobile

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

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

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:
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:

Facebook Introduces Pages App for Administrators

Chris Krasovich by on May 24, 2012

If you manage any Facebook fan pages, you may have seen a notification like this one on your iPhone recently:

Facebook Pages Manager

At long last, Facebook has introduced an easy-to-use tool to help brand page administrators quickly and easily stay on top of activity on their page from any location: the Facebook Pages App for iPhone.

The new app – available to U.S. users in the iTunes Store – has a familiar look and feel, as it’s strongly modeled after the user experience for its ubiquitous Facebook client, but it provides a streamlined experience for admins. Most notably, the app offers push notifications of page activity so you’re made aware when a user posts a comment or otherwise interacts with the page.

Other features:

  • Easy updating and interacting on the go
  • Access to all managed pages in a single location (or at least up to 50)
  • A readily available snapshot of page insights

For iPhone users, this app does represent something of a convenience. Here’s hoping this tool is eventually integrated with the main Facebook client.

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:

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:
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:

It’s Not Just a Phone, it’s a Credit Card

Chris Krasovich by on July 8, 2011

The evolution of the smart phone continues. Next up? Phone as credit card. I don’t know about you, but I love the idea of fewer items to carry around and according to this infographic from GPlus, leaving the purse or wallet at home is going to be very possible in a pretty short time. The winning provider has yet to be determined, but I don’t see that holding back progress. Do you love this advancement too, or will you miss that bulge in your back pocket?

GLG_Goodbye_Wallets_FINAL-L_1841

Categories: 
Share:

The Battle for Mobile

Chris Krasovich by on February 24, 2011

Remember when we used phones to talk to each other? It seems those days are gone. The increase in smartphone users has led to a decrease in calls to Mom. The good news is that we're definitely texting Mom, and we may also be playing Words with Friends together.

The results of a recent study of smartphone users by analytics firm Zokem found that messaging is king, with app usage very close behind. I suspect apps will overtake messaging for usage in the months to come. Interestingly enough, Web browsing is falling way behind. Actually using your smartphone to place a call ranks a distant third among categories defined.

Do you think browsers will catch up as web technologies evolve or will the optimized user experience offered by apps continue to make them more popular among users?

Categories: 
Share: