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

Posts by Jeffrey Schrab

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:

Development, Technology

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:

Technology

Tags:

legislation, SOPA, PIPA

Content Versus Container

by Jeffrey Schrab on June 30, 2011

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

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

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

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

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

Categories:

Content Strategy, Design, Development

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 Slideview Not all browsers support these features. But Webkit does, which means that all iOS devices can take advantage of them. The technical aspects of CSS 3D are more than I want to get into here. The key point is that websites on these devices can now be much more visually creative.

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

View the demo.

Categories:

Design, Inspiration, Technology

Tags:

3D, CSS, JavaScript

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:

Design, Technology