News, insights and inspiration about customer engagement.

Posts in Technology

Custom CMS

How to Decide Whether a Custom CMS is Right for Your Business

by Bob Prohaska on September 23, 2016

Twenty dollars a month, and you get a beautiful website almost instantly. Sounds amazing. And in a lot of ways it is. Just look at all the other companies who did the same and whose websites look sort of similar to yours. Heck, I even use those online website builders when I need a quick, rock-solid web presence for one reason or another. Then why should companies ever consider building a website with a custom content management system (CMS) built on a framework such as Django? To answer that question, it’s important to ask a few questions …

How important is it to position yourself uniquely on the web?

We lump a bunch of platforms into what could be classified as “starter kit CMSs.” They’re quick to set up because they’ve been structured with the assumption that one system can be built generic enough to account for a wide variety of use cases. They include a large set of generic templates and tools that aren’t specifically suited to doing one thing perfectly well, but can do some of what’s needed reasonably well for the largest amount of use cases. In other words, these sites can be set up fast because the structure of the website is dictated by how the CMS wants to structure the website.

At GS, we work with many different CMS platforms, including popular ones such as WordPress and Drupal. However, our preferred platform for custom CMS development is Django. Django is an open source framework that allows developers to build the CMS software that powers a website without having to start with a pre-defined structure and set of unnecessary tools. The benefits are many …

A custom CMS allows us to start with the content and not the technology. We look at all of the website content and make models that map relationships, structures, and hierarchies. Those models guide how the CMS gets built. The website is structured properly based on the content right from the start, providing a clean platform for enhancements without having to worry about how the CMS “wants” things structured. The structures and relationships we develop at that point enable an incredible amount of flexibility when displaying or maintaining content on the website. The need to manually maintain links, cross-promotions, and related content across many different pages of a site is removed, ensuring a great user experience as content changes.

Starting with a clean platform allows for the creation of an experience that’s completely unique and perfectly suited to the business’s brand and position. No two sites will be the same because the uniqueness of the business – not the technology – will dictate the website structure and design.

How important to your business is optimizing customer engagement and your user experience on the web?

To accommodate the greatest number of use cases, a starter kit CMS has a defined underlying structure for accepting and displaying content. Any deviation from this underlying structure essentially requires modifying the way it’s supposed to work in order for it to work a different way. Any good developer can modify a starter kit CMS to do something. To a certain point, this works just fine. But over time these modifications start to add up. The way the system was designed to run starts to get overrun by the way it has been modified to run.

As a starter kit CMS becomes heavily customized, it starts to become more unpredictable. Future enhancements start to take longer, the system becomes more complex to manage, and CMS security upgrades become increasingly difficult, resulting in a system more open to attacks and failures. As your CMS becomes more difficult to manage, the feasibility of essential new customer engagement features could start to be affected. These things have a real impact on the experience your customer has with your company.

By building a custom CMS with only the features needed, we start with a clean, solid platform to layer new functionality on. Instead of “hacking” the CMS to work a certain way, a custom CMS allows us to enhance an already optimized system to do what’s needed. Instead of the CMS dictating what can be done based on the way it was designed to work, we dictate what we would like it to do based on what’s right for the situation.

Another big factor in customer engagement on a website is how often content is refreshed. If it’s too difficult or time consuming to make changes on a website, then the site’s content will start to get old. With a custom CMS, the admin is built with the business’s processes in mind. The interface is designed around how the business works and how often updates need to be made, and optimized to ensure those things can happen quickly.

How seamlessly do you expect your website to integrate with other systems and processes you have in place?

Another benefit of a starter kit CMS is that there are a lot of plugins that make integrations possible with no coding. These plugs are great as long as they do what you’re looking for. If they don’t do exactly what’s needed, there’s the option to start with the plugin and make modifications, or develop the integration feature from scratch in the CMS. No matter which route you decide to go, you’re still working with the limitations of the existing CMS.

In a custom CMS, there generally still exists the option to start with a plugin or build from scratch. And the limitations of working with a pre-existing CMS have been removed. The result is a system that can be tightly integrated with other systems in a way that works best for your business. Instead of the CMS being an add-on to business systems, it can feel more like an integrated part of those systems.

A custom CMS isn’t the right solution for everyone. The scope of the websites that we build at GS varies considerably from very basic to highly complex, but in the end we believe that your business needs should ultimately guide the solution rather than be dictated by the technology the solution runs on. So while our preferred platform for custom CMS development is Django, all platforms have their place and are worthy of consideration. What are your answers to the questions above?

Categories: 
Share:
Stylized digital audio meter readout

Music Hath Charms – and Power – to Engage

by Mike Zimmerman on September 2, 2016

The truth is, nobody really understands very much about music. Why it affects people the way it does remains essentially a mystery. As legendary conductor Leonard Bernstein wrote in the introduction to his book “The Joy of Music”: “Ultimately one must simply accept the loving fact that people enjoy listening to organized sound (certain organized sounds, anyway).”

“Can anyone explain in mere prose,” he continues, “the wonder of one note following or coinciding with another so that we feel that it’s exactly how those notes had to be? Of course not. … It is not too much to say mystic or even magic.”

Even Dumbledore agrees: “Ah, music. A magic beyond all we do here!” (“Harry Potter and the Sorcerer’s Stone”)

Even if we can’t fully understand the why, we can clearly observe the what and the how. Music moves people. It affects their behavior. And it can even, recent studies show, make people well.

One promising area is in Alzheimer’s therapy, where music is being used very successfully to trigger memories in patients and help bring them back to a more present state of mind. There’s also evidence that there’s such a strong connection between mind, body, and music that music therapy can even help people recover from physical ailments.

As Barbara Else, senior advisor of policy and research at the American Music Therapy Association told “Medical News Today”: “We have a such a deep connection to music because it is ‘hardwired’ in our brains and bodies. The elements of music – rhythm, melody, etc. – are echoed in our physiology, functioning, and being.”

Read that quote again. I love that last sentence in particular – the idea that music is essentially a physical part of us. And whether you credit magic, nature, the universe, or the Almighty, it’s a pretty amazing thing to ponder.

The Power to Change People

Yeah, yeah, music is awesome. And powerful. We all know that, so what? So … as a marketer, how much thought do you put into the music that becomes part of your brand? If music has the power to heal, it certainly has the power to shape your brand – to turn your customers on or off. And it should be taken seriously.

Like music itself, this area is more art than science. Perhaps we can learn a few things from some restauranteurs who are starting to get serious about programming the music that plays in their establishments, as explored in a recent article in the “Wall Street Journal.”

“Restaurant playlists have a critical role in shaping a diner’s experience and an establishment’s image,” reports Erin Geiger Smith. “Music may make guests feel upbeat or calm. The right playlist can ward off a stuffy customer and attract a stylish one. It may also prevent the staff mutinies that come with hearing the same song 10,000 times.”

It’s not enough to just throw on a radio station or switch on Pandora, and take your chances. And don’t trust the whims of your employees to choose the right music for the atmosphere you’re trying to create. You want to engage your customers not your staff. (Though if your staff hates the music you choose, that’s not a good thing, either!)

Music streaming services, like Spotify, make it easy to create a targeted playlist. And companies, like El Media Group, are emerging to help restaurateurs, hoteliers, caterers, and other marketers create custom playlists to help put customers in a relaxed – and buying – state of mind.

Do’s and Don’ts

There are many subtleties involved in choosing the right music, but here are a few basics that Smith identifies, adapted for more general marketing application:

  • Steer clear of live recordings, as audience noise can add ineffectively to general background noise.
  • Avoid “gimmicky” songs. An example might be Pharrell Williams’s “Happy” that was so popular. A fun and recognized song, but anything that jumps out and gets stuck in your head like that can quickly become a distraction instead of an enhancement.
  • Watch the volume of your background music and vary it according to your audience size, the changing mood over the course of an evening, etc.
  • Louder is definitely not always better. If guests are having to yell across a table to each other or if background music overpowers narration, it’s time to turn it down.
  • Unless you’re really trying to excite a crowd, leave the thumping, high-energy dance music to the clubs.

Additionally, at an event, make sure your sound system can get the job done. If you’re providing it, make sure it can fill the room with quality sound. If the venue provides it, make sure the manager understands your needs before you arrive to set up. Nothing kills a mood faster than bad sound.

Bottom line: take your music seriously. Whether you’re adding ambience to a restaurant, choosing a product video soundtrack, or introducing a presentation, the notes, beats, rhythms, and melodies you choose have power – to excite, to soothe, to inspire. And to make or break your project.

Share:
Closing the Gap in Experience Personalization

Closing the Gap in Experience Personalization, a.k.a. Contextual Marketing

Sue Spaight by on March 2, 2016

Personalization (also known as contextual marketing, and adaptive marketing or adaptive content) is a practice that brands need to implement to better meet their customers’ growing expectations. There’s a sizable gap between how well marketers think they’re doing at experience personalization and how well customers think marketers are doing. Smart marketers will take the opportunity to close that chasm and create a better, more seamless customer experience in which customers feel recognized and valued.

Fortunately, more brands are taking on this challenge. Forrester Research found that a whopping 91 percent of marketers surveyed are prioritizing improving customer experience through personalization, in The Contextual Marketing Imperative. They also found that 79 percent of marketers surveyed believe personalization is very important to achieving their top marketing and customer experience goals, like increasing customer satisfaction and building customer loyalty, in The Power of Personalization

We agree, in part because companies that are personalizing web experiences and are able to quantify results are seeing on average a 19 percent sales increase. Harvard Business Review cites a more conservative 10 percent potential sales lift from personalization – with five to eight times the ROI on marketing spend – in How Marketers Can Personalize at Scale. Specific to the email channel, one study found that personalized email results in transaction rates six times higher than non-personalized email. 

Personalization seems like a worthwhile endeavor, right?

Contrary to marketer perceptions, customers are frustrated and their expectations are most often not being met.

There’s a fundamental gap between what most brands are providing and what consumers want. Currently, while two-thirds of marketers rate their efforts at personalization as “very good” or “excellent,” less than one-third (31%) of consumers say companies are consistently delivering personalized, cross-channel experiences. In other words, we as an industry are not doing as great as we think we are.  

It’s easy to see why failure to personalize the customer experience causes frustration, as it goes to the fundamental human needs of belonging and feeling recognized. We all want to be seen, heard, and known. Yet chances are good that you can recall a time in your recent past when you felt frustrated that a brand didn’t recognize you. I’ve had a couple of these disappointing experiences recently, most notably the fact that Pottery Barn blasts me with emails about buying a new dining room set when I just bought one from them. I’ve even invested the time to meet with one of their interior design consultants – in our home – about other interests that we have. She has photos of our house and a list of exactly what we want. Yet I still get the generic “buy a dining room set!” email, which actually discourages me from buying anything or engaging further in our relationship because they don’t “know” me and don’t seem to care about what I’ve already invested. Have you had a similar experience? Please share it in the comments. 

The “mobile mind shift,” as Forrester calls it, also contributes to higher customer expectations, of course. Customers now expect to get exactly what they want in their immediate context and immediate moment of need. 

Not sure addressing this for your customers should be a high priority? Consider these statistics:

•74% of consumers are quite comfortable with companies using data about them to provide personalized experiences. 
•70% of customers receiving personalization today see it as superficial.
•63% of customers feel personalization efforts are useless and feel bombarded with emails.
•40% of consumers say most promotions don’t deliver anything of interest.
•37% of consumers delete most email offers and promotions without reading them, while 40% have unsubscribed because they feel overwhelmed.

Sounds to me like a whole lot of marketing effort is being wasted by a whole lot of brands because it’s not customer-relevant anyway. The bottom line? If we as marketers don’t get our acts together and start treating our customers like the important individuals they are, they’ll continue to move toward tuning us out and disconnecting from their relationships with us in favor of others who know them and provide experiences accordingly.

The holy grail of personalization: a seamless and individualized customer experience across all stages and touchpoints. 

Experience personalization has gone way beyond addressing people by name (oh, the life of a marketer was so simple then), and beyond adjusting content and product assortments based on the customer’s past purchases and preferences. What’s sought after now is the ability to create the right overall experience for each individual customer and having that be seamless from touchpoint to touchpoint throughout all stages of the customer journey. It’s no small task, obviously, yet like any challenge it’s better to get started than to pretend it’s not there. 

About two-thirds of marketers are using demographics to target content and offers; some marketers may be thinking this is personalization, but it’s not – it's segmentation. Less than half of brands (41%) are using actual customer interaction and contextual data for personalization. 

While segmentation is a start, there’s now a relatively clear path to redefining personalization as experiences that are relevant to individuals, not broad segments. About half of marketers are already using more sophisticated personalization methods, including leveraging data from loyalty programs (52%) or behavior-based data, such as sales data and purchasing patterns (48%). These can be aggregated and turned into predictive models of future behavior. “Web analytics can flesh these out with content analytics and platform preferences, along with days and times that customers prefer to interact with specific types of content. This can be paired with offline data such as in-store purchasing information to produce a three-dimensional customer view,” in Aimia’s words. 

For example, if Pottery Barn was doing this right, instead of that annoying email trying to sell me a dining room set, I might have received one about living room furnishings based on my in-store behavioral data and in-home consultation. They could also incorporate a more personalized discount as a way of luring me back after an unfortunate customer service experience that I had, which ended in email dialogue with their social media/service support team. Connecting those dots is not happening, though presumably because the corporate email data silo is not talking to the in-store behavioral data silo is not talking to the customer support data silo. More about that issue later, because we need to start with strategy first. 

Start with strategy. Remember that half of strategy is deciding what not to do. 

To start your personalization efforts, first you need to determine where to play and how you’re going to apply personalized, contextual marketing for customer engagement. As with any experience, developing a customer journey map is a great place to start. Then you can plan your personalization (and other) strategies to address the areas where customers are having experiential issues, to bring the most bang for your proverbial buck. Define specific personas and use cases, and develop taxonomies. 

Here’s the thing to keep in mind as you strategically plan: You don’t have to do ALL THE THINGS. In fact, you likely can’t do all the things effectively. It’s easy in this world of rampant channel proliferation to get caught up in using all available channels, churning out piles and piles of content, with quantity trumping quality and value. As Forrester Research states, “Unfortunately, the personalization strategy employed by most marketers isn’t all that strategic. An overwhelming majority of marketers employ the ‘throw it up against the wall and see if it sticks’ method of personalization, spreading their ’personalization’ methods across any and all channels. The average marketer surveyed reported using or planning to use 11 channels for contextual marketing and personalized messages.” No wonder so many marketers are overwhelmed and less than optimally effective. 

Instead, choose a strategic focus. Then choose a few channels that are most important to your customers and fixate on using them extremely well, in a way that actually does personalize the experience for them, creating a sense of recognition and value. Creating value exchange should be at the heart of your strategy because customers expect value for sharing their data and for continuing to engage. “While consumers primarily expect perks like discounts, coupons and virtual rewards, they also want customer experience-related benefits, like the ability to provide feedback to the company, access to premium information, and for the company to remember them if they are a regular customer,” says Forrester Research. This is completely in keeping with the GS “BRAVE” model of customer engagement, activating the levers of Belonging, Recognition, Access, Voice, and Enrichment. Without that customer focus, most of your effort and investment could be wasted. 

Consolidate your data and secure the right technology. 

Approaching “big data” can be extremely intimidating for marketers. The good news is that just as you don’t need all the channels, you don’t necessarily need ALL THE DATA to get started using personalization effectively. In fact, having all the data can be a hindrance or as Aimia says, an “unfocused, unfulfilled promise.” They advocate for a focus on “Intelligent Data” instead, saying it’s “about finding real-time insights to add value and forge customer bonds, leveraging data insights to deliver meaningful, personalized messages to consumers at the right time on the right platform. When customers are able to engage with relevant content at the precise time they need it during their buying journey, the likelihood of a positive action is exponentially increased.”

Whatever your strategy and approach, at some point in your personalization rollout you’ll need a single, unified customer database or CDP (customer data platform). Siloed customer data is likely the single largest barrier to implementation of effective customer-relevant personalization. Just as marketers are often using too many channels to be effective, they’re also using an average of 15 separate systems to house customer data. Yes, FIFTEEN systems. How is it possible to create a sane system of personalized, contextualized marketing in that environment? It’s not. On the flip side, marketers using a single customer database are 16-30 percent more likely to have the capability to implement real-time marketing via email, online, mobile, the call center, and in-store. I’m somewhat surprised it’s not a higher percentage, though the database is only part of the challenge, of course.

The right technology systems are also needed to enable data analysis and action in real time, rather than outbound or push marketing, along with the right people and the right processes. Companies such as Monetate and Demandbase read the IP address of a visitor and deliver content dynamically based on his or her profile and other factors. That can move a marketer a step closer, certainly, but not all the way to the grail. Incorporating a predictive analytics model is key. 

In the abstract for its premium paper You Can’t Personalize Digital Experiences Without Predictive, Forrester Research says, “Digital experience delivery vendors have generally fallen short in their use of predictive analytics to contextualize digital customer experiences. Many of these vendors offer simple, rules-based recommendations, segmentation, and targeting that are usually limited to a single customer touchpoint. Historically, application development and delivery (AD&D) pros responsible for delivering their firms’ digital customer experience have thought that this is as good as it gets. But today, a host of new predictive analytics tools are poised to enable AD&D professionals to become clairvoyant architects of their customer’s success.”

If you want to learn more about solution options, many of them have been evaluated in the Forrester Wave™: Digital Experience Platforms study. Or we can help, as we’re evaluating several of them, as well. 

Finally, a brief note about managing customer privacy, which is a challenge to personalization success that must be addressed. We’re all too familiar at this point with examples like How Target Figured Out a Teen Girl Was Pregnant Before Her Father Did. Guarding against privacy issues – and avoiding crossing the line from relevant to seriously creepy – must be a primary consideration in planning strategy and technology. It’s also a good reason to dip your toe in with a limited pilot program before getting more ambitious. 

Start small. Get started. 

While the ultimate goal is to have seamless personalization across the entire customer journey – and all touchpoints – trying to optimize for everything right out of the gate is obviously unrealistic. Initially you can pilot an experience that addresses one or more of the highest priority user needs. Then analyze, iterate/expand, repeat. This is how we work at GS and Harvard Business Review espouses the same approach: “… expecting a machine to generate the perfect personalized experience is a fool’s errand. Rather, we’ve found the best way to achieve meaningful personalization is by systematically testing ideas with real customers, then rapidly iterating.” Forrester, too, condones starting small to prove ROI and customer value. 

Don’t let the perceived enormity of the challenge of experience personalization stop you. It’s time to get started because your customers expect it. Successful personalization will provide a more differentiated and valuable customer experience, enabling you to better meet your customer engagement goals.

Forrester sums it up beautifully: “Customers today expect to not only interact with companies on the devices and channels they want, but to be delighted by those experiences. Personalized experiences make customers feel catered to and valued, which in return makes them more likely to be an advocate for a company.”

Sources/Additional Reading: 

Adobe, Experience Design Optimization: Where Personalization Goes to Grow Up
Forrester Research and SAP Hybris, The Contextual Marketing Imperative: The Evolution of Personalization From Push Messaging To One-To-One Personalized Customer Experiences
Forrester Research and PwC, The Power of Personalization
Harvard Business Review, How Marketers Can Personalize at Scale 
Loyalty 360/Aimia, Big Data Loses Relevancy as Intelligent Data Drives Results 

Share:
The Day the Desktop Broke

The Day the Desktop Broke

Jim Broennimann by on April 20, 2015

The Sonic Youth documentary The Year Punk Broke chronicles how the punk generation gave way to grunge. This transition is not unlike what is happening now with the transition from desktop to mobile usage. The adopters who embraced grunge early bought their flannel and reaped the benefits. Similarly, early adopters of mobile noticed desktop usage dropping and responded by evolving their digital properties to be adaptive, responsive, and device-agnostic. Those brands are perfectly positioned for Google's next change, set to take effect tomorrow.

While there are many consumer trends circulating in 2015, this event will have the most immediate effect on digital strategy. The biggest and most obvious event happens on April 21st, the day in which Google will label your brand website as mobile-friendly or not. Short-term, this may have an effect on your search ranking and authority, meaning you may fall further down in results. In a nutshell, if your organization hasn’t evolved its web channel in the last five years, now is the time to make it happen. 

The importance of this becomes much clearer when revenue drops due to a decrease in leads and website traffic. The results of these situations, in my experience, usually lead to a reset in priorities. The what, how, when, and why need to be explained fairly quickly, and many companies that have been paralyzed by this shift in customer preference and business mindset may become overwhelmed. 

Fortunately, Google has established a cool and mobile-friendly experience to assess your situation. Don’t shy away from the words “developers” and “webmasters” in the web address – the information is very straightforward.

The article includes a mobile-friendly test, which is informative and fun to use.

Also included is a blog entry explaining the criteria that Google is using to define a mobile experience. The concepts are rooted in usability best practices:

  • Avoids software that is not common on mobile devices, like Flash
  • Uses text that is readable without zooming
  • Sizes content to the screen so users don’t have to scroll horizontally or zoom
  • Places links far enough apart that the correct one can be easily tapped

The first implementation of the “mobile-friendly” classification is based in technical aspects of the page code. This is a good place to start in the process of designing a mobile-friendly site. However, right now, it doesn’t get you much further than that.
Google explains two concepts in particular that I feel are the key to creating an actual device-friendly experience. Responsive web design and content structures are two concepts that, when blended together, not only create a mobile-friendly site, but also a compelling user experience. Creating a responsive experience will require a change in mindset from traditional thinking in the desktop space to building web interactions based on customer need, independent of the device.

At GS, we collaborate with different disciplines in the planning, design, and execution of a responsive experience. A site we recently launched, MercuryMarine.com, took this collaborative approach. We designed the content first with input from our client, front-end and CMS developers, designers, copywriters, editors, and UX. Starting with the content (the highest risk of most web projects) provided focus, priority, and a flexible approach to copy and any additional content. This framework creates a truly device-friendly experience. 

What are your thoughts about responsive design? What do you think about the change Google is making?

Categories: 
Share:

Using Asynchronous Typekit and LESS for Great Justice

by Steve Schrab on March 27, 2014

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

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

 

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

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

 

Asynchronous Typekit

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

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

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

 

Setting Up LESS Functions For Your Font Stack

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

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

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

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

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

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

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

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

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

 

LESS and Typekit

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

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

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

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

Share:

APIs as a Service

by Jeffrey Schrab on January 16, 2014

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

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

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

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

Pros

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

Cons

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

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

Categories: 
Share:

Vine and Instagram for Brands

by Micah Eberman on November 21, 2013

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

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

VINE

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

INSTAGRAM

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

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

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

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

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

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

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

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

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

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

Share:
1

Stock Mindset (SM™)

by Nicholas Krueger on October 24, 2013

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

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

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

Theme on

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

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

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

Me: [blank stare]

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

Me: [blank stare]

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

Me: [blank stare]

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

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

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

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

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

Me: [flip conference room table]

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

Fine for some

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

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

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

 

 

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

 

 

Share:
1

Vine AND Instagram Not Vine VS. Instagram

by Micah Eberman 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
Comedy Central
Funny or Die

 

Share:
1

The Internet of Things

by Jeffrey Schrab on November 15, 2012

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

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

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

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

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

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

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

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

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

Hang on. It gets crazy from this point on.

Categories: 
Share:

Get More Out of Gmail Through SCIENCE!

by Chris Krasovich on September 20, 2012

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

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

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

 

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

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

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

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

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

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

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

Categories: 
Share:
1

Advice From a Successful App Developer

by Chris Krasovich on August 23, 2012

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

Kirill's Apps

What made you get into iPhone app development?

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

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

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

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

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

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

What was it like when you sold your first app?

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

What advice would you give to a new app developer?

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

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

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

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

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

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

Design matters big time.

What are are the challenges of developing for the iPhone?

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

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

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

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

Share:

People in Advertising Are Not Normal

by Chris Krasovich on July 19, 2012

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

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

Share:

Nerd Superbowl (aka 2012 Apple WWDC)

by Steve Schrab on June 21, 2012

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

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

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

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

Share:
2

Responsive vs Adaptive

by Eric Dyken on June 14, 2012

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

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

Let’s break it down.

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

Responsive

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

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

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

Adaptive

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

Some examples of an adaptive strategy:

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

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

Share:
1

Content Wants to be Available!

by Jeffrey Schrab on June 8, 2012

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

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

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

Examples:

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

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

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

Share:

The Journey of an HTML Email

by Aaron Konkol 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:

Make a Fast Website or Lose Your Eyeballs!

by Jeffrey Schrab on March 29, 2012

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

T’was a piece of crap.

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

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

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

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

 

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

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

Ouch!

 

What to do?! Get SPDY!

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

Categories: 
Share:

New iPad: the Human Eye Meets its Match

by Steve Schrab 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:
1

Can Google be Trusted?

by Justin Derleth on February 23, 2012

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Categories: 
Share:

SOPA - The Day the Web Went Black

by Jeffrey Schrab on January 18, 2012

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

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

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

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

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

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

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

Categories: 
Share:
9

Practical SVG Usage

by Steve Schrab 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 ...

by Aaron Konkol 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

by Steve Schrab on November 30, 2011

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

Rich Snippets Testing Tool

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

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


Media Queries and Meta Viewport tags

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

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

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

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


Portrait and Landscape Media Queries

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

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

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

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


“Mobile First” CSS and working with legacy Internet Explorer

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

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


Handy Tools - cubic-bezier.com

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

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


jQuery 1.7 Released

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

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

Share:

Refresh Your Cache Yo!

by Steve Schrab on November 10, 2011

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

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

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

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

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

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

Categories: 
Share:

Runs, Hits and Eras

Sean Donnelly by on October 13, 2011

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

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

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

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

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

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

Share:
5

What’s your favicon strategy?

by Steve Schrab on September 29, 2011

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

ICO Favicon

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

PNG Favicon

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

Base64 Favicon

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

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

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

iOS touch icon

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

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

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

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

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

So, what’s your favicon strategy?

Share:

20 Things I Learned about Browsers and the Web

by Steve Schrab on November 19, 2010

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

Categories: 
Share:
1

CSS3 - The Third Dimension

by Jeffrey Schrab on November 12, 2010

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

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

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

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

View the demo.

Share:

iPad Adoption Rate

by Steve Schrab on October 7, 2010

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

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

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

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

Categories: 
Share:

Schedule your stuff with Google Calendar

by Aaron Konkol on July 23, 2010

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

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

Google Calendar screen shot

Here's how to get started with Google Calendar

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

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

3. Start adding stuff!

4. Dig deeper with cool features:

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

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

Add reminders via email or text.

Use it with with iCal or Outlook.

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

Categories: 
Share:

Good Form!

by Jeffrey Schrab on January 20, 2010

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

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

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

The Path to Completion is Clear

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

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

Gather Only What is Necessary

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

Distractions are Removed

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

Give Immediate Feedback on Progress

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

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

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

Categories: 
Share: