Archive for the ‘Web Basics’ Category

File Under: Web Basics

Put Your Site on a Diet With Google’s Image-Shrinking ‘WebP’ Format

WebP versus JPEG. Click the image to see the full size examples on Google’s WebP comparison page. Image: Google

Webpages are constantly getting bigger.

Massive JavaScript libraries and endless sharing buttons aren’t helping, but the main culprit behind most of the bloat is the good old image. According to the HTTPArchive, images account for roughly 60 percent of total page size. That means the single biggest thing most sites can do to slim down is to shrink their images.

One way to do that is with alternate image formats like Google’s WebP, which can yield images between 25 and 34 percent smaller than more popular image formats. Despite the astounding space-saving potential of WebP it, like JPEG 2000 and other efforts before it, has not completely caught on with browsers.

So far only Google Chrome and Opera support WebP (both also automatically convert all images to WebP for their respective proxy browsing mobile services). Mozilla objected to WebP when it was first launched, but all of the issues raised in that post have been addressed as WebP has evolved. Firefox still does not support WebP. Nor does Internet Explorer.

However, as Opera’s Bruce Lawson recently pointed out, using some cutting-edge CSS wizardry you can serve WebP images to Chrome and Opera, while still offering JPGs to the rest. Here’s what the code would look like:

.mybackgroundimage {
    background-image: url("image.jpg");
    background-image: image("image.webp" format('webp'), "image.jpg");
}

This code uses the new Image Fallbacks syntax, which is part of the CSS Image Values and Replaced Content Module Level 4. The format qualifier is borrowed from @font-face and ensures that browsers won’t download the WebP image if they don’t support it.

Of course this only helps with CSS background images, which probably aren’t the majority of the images most sites serve up. For content images there’s currently no easy way to do the same thing, though there might be in the future if browsers begin to support the proposed <picture> element. Because <picture>‘s syntax is roughly analogous, you would be able to do something like this:

<picture>
    <source src=image.webp type=image/webp >
    <source src=image.png type=image/png >
    <img src=image.png alt="alt text "> <!-- fallback content -->
</picture>

That would cover almost all the bases: browsers that support WebP and <picture>, browsers that support <picture> but not WebP and browsers that support neither. Unfortunately it’s going to be a while before this pseudocode becomes real.

WebP has other problems worth considering before you dive in. For example, when users save an image they may have trouble getting a WebP image to open in their favorite desktop app.

Still, while WebP may have a little ways to go, the potential to significantly reduce page size appears to be winning converts. If you’d like to learn more about WebP and how you can use it, check out the video below from Google’s Making the Web Fast series.

File Under: Security, Web Basics

Google: Here’s What to Do if Your Website Is Hacked

Chrome’s malware warning page. Image: Google.

Nothing drives away your visitors quite like a message from Google that “this site may harm your computer” or “this site may have been compromised.”

Hopefully you’ll never need it, but if your site does get hacked Google has set up a new site dedicated to helping websites that have been hacked.

The “Help for Hacked Sites” section of Google’s Webmaster Tools offers up articles and videos to help you not only recover from compromising hacks, but take steps to make sure it doesn’t happen again.

Part of what makes hacked sites difficult to deal with is that oftentimes developers don’t even notice that they’ve been compromised. “Hacks are often invisible to users,” says Google in its new help section. “For example, unbeknownst to the site owner, the hacker may have infected their site with harmful code which in turn can record keystrokes on visitors’ computers, stealing login credentials for online banking or financial transactions”

Google has an 8-step program for unhacking your site, which include basics like identifying the vulnerability that was used to compromise your site, as well as how to request a review so Google will remove the dreaded “this site has been compromised” message from its search results.

For more info and all the details on what to do if you’ve been hacked, check out the new Help for Hacked Sites section of Google’s Webmaster Tools.

File Under: Web Basics

Teachers Are the Key to Everyone Learning to Code

Code.org recently made a splash with its high-profile supporters — everyone from Bill Gates to Snoop Dogg have offered up their support for Code.org’s premise: that everyone should learn to code.

While Code.org’s goals are admirable, the movie above spends near zero time talking about what might be the most important part of the equation: computer science teachers.

The Code.org website has info for interested teachers, but the emphasis is still clearly on enticing students to want to learn to code. That’s great, but what about CS teachers?

To prepare for an upcoming talk at the annual Python conference, Pycon, Mozilla data architect and PostgreSQL contributor Selena Deckelmann recently started talking with actual High School CS teachers and has some surprising, if depressing, take aways about what we can do to help kids learn to code. Deckelmann’s survey is admittedly informal and rather small, but it’s a start.

Deckelmann reports that “reading comprehension is the biggest barrier to completion of AP Computer Science” and that “continued existence” is the biggest battle for a computer science teacher every year.

Deckelmann cites a 2010 report that found “the number of secondary schools offering introductory computer science courses dropped 17 percent from 2005 to 2009 and the number offering Advanced Placement (AP) computer science courses dropped 35 percent in that time period.”

More encouraging is that students at one high school learned three languages in three years (C++, Java and Python).

It’s also interesting to note that Deckelmann says “the CS teachers I’ve met want to share their lessons — with me and with other teachers,” and that “the CS teachers I’ve met don’t know other CS teachers.” That sounds like an opportunity for some kind of social site if anyone is interested — just be sure to talk to some actual teachers before you start building.

If you’re planning to be at Pycon this weekend be sure to check out Deckelmann’s talk “What teachers really need from us.”

Mobile Browsers Help Users Avoid Bloated Webpages

Stop feeding your website donuts. Image: D. Sharon Pruitt/Flickr.

Websites are getting fatter, dramatically fatter, with the average page size of sites tracked by the HTTPArchive now nearly 1.3 MB. If the current rate of page size increase continues, that number will reach 2MB sometime early next year.

That’s bad for pretty much everyone, but doubly so for mobile users with constrained bandwidth.

Fortunately for mobile users, the network increasingly seems to see large page sizes as damage to route around.

Services like Instapaper, Pocket or Safari’s Reader have long offered an easy way to strip out extraneous content. Now mobile web browsers are increasingly taking it upon themselves to speed up the bloated web.

The recently unveiled WebKit-based Opera Mobile borrows Opera Mini’s proxy-based Turbo Mode, or “Off Road” mode as it’s known now. Once only deemed necessary for feature phones (Opera Mini’s primary market) proxy-based browsing will soon be available in all Opera browsers.

Google’s Chrome for Android browser is getting ready to follow suit.

The beta channel release of Chrome for Android recently introduced an experimental data compression feature which Google says will “yield substantial bandwidth savings.” Chrome’s compression is nowhere near the level of Opera’s, but it does roughly the same thing — puts a proxy server between the user and the bloated site in question and then applies various speed improvements like using the SPDY protocol and compressing images with WebP.

To turn on the compression head to chrome:flags and look for the “enable experimental data compression” option.

Here’s Google’s description of the various optimizations:

For an average web page, over 60% of the transferred bytes are images. The proxy optimizes and transcodes all images to the WebP format, which requires fewer bytes than other popular formats, such as JPEG and PNG. The proxy also performs intelligent compression and minification of HTML, JavaScript and CSS resources, which removes unnecessary whitespace, comments, and other metadata which are not essential to render the page. These optimizations, combined with mandatory gzip compression for all resources, can result in substantial bandwidth savings.

In other words, Google and Opera are doing what web developers ought to be doing but aren’t. Just like developers should have been making reader-friendly pages, but weren’t, so “reader” modes were born.

It works too. In the video embedded below Google’s Pete Le Page shows how Chrome’s new proxy options take a page from The Verge and reduce it from a husky 1.9MB to a still fat, but somewhat better 1.2MB.

Want to make sure the internet doesn’t see your site as damage it needs to route around? Check out developer Brad Frost’s article Prioritizing Performance in Responsive Design, which has a ton of great advice and links, including what I think is the most important thing developers can do: Treat Performance As Design. In other words, if your site isn’t svelte and fast, it’s not well designed no matter how pretty it might look.

[Note: It is not ironic to post about web page bloat on a page that is, arguably, pretty bloated.]

File Under: Visual Design, Web Basics

Learn Typography Basics With ‘On Web Typography’

Web typography has come a long way from the days when the only way to get a custom typeface on a page was with images created in Photoshop. These days, thanks to widespread browser support for CSS @font-face and services like Typekit, a couple lines of code will add actual font files to your pages.

Go back to 2001 with that information and you would blow many a designer’s mind.

Of course if you’re not a designer, today’s overwhelming variety of type possibilities can be overwhelming. For some help deciphering it all and navigating the sometimes complex world of web typography, check out the video above of Typekit’s Jason Santa Maria‘s talk “On Web Typography.” The video comes from An Event Apart Boston in June of last year, but was only recently made available online (note that Santa Maria has since left Typekit).

After a whirlwind tour of the history of online typography, Santa Maria explores typography from a newcomer’s perspective, looking at how typography affects how you read and how to choose and combine typefaces for a better looking, easier to read site. It’s about an hour long, but you’d be hard pressed to find a better intro to and overview of the art of typography.