Save-Data for Low Bandwidth Users

Everyone likes a fast website, but some users have connections and data plans that make it especially critical. Some browsers support a ‘saves-data’ setting which sends an HTTP header along with requests that the server can use to respond with a lighter weight page.

In mobile Chrome this is called ‘Lite Mode’. Desktop browsers can also enable the setting via an extension. Turning the setting on doesn’t necessarily do much on its own, but it does however give the server a chance to make its own aggressive optimisations knowing the user is on board.

To help low-bandwidth users have a good time websites can detect the header and avoid serving unnecessary assets such as custom fonts or background images and videos.

I’ve created a few save-data customisations here on my site. When the WordPress functions.php file detects this setting it doesn’t enqueue the custom fonts stylesheet from Google Fonts. I’m also using slightly different styles to drop the decorative background image from the masthead.

You can see the difference here:

The setting can be detected server-side by looking for a HTTP header (save-data=on) or client side in JS to set a flag for your CSS selectors.

<?php

function saveData(): bool {
   return ( isset($_SERVER["HTTP_SAVE_DATA"]) &&
      strtolower($_SERVER["HTTP_SAVE_DATA"]) === 'on' 
    );
}
//JS example (courtesy of Nooshu)
//add save-data class name to document element for CSS selectors
if ("connection" in navigator) {
    if (navigator.connection.saveData === true) {
        document.documentElement.classList.add('save-data');
    }
}

Exactly what you do with save-data is up to you. Nothing is automatic, so it’s up to the website to determine what can be changed to better serve those users. It just gives you a clear hint at the user’s preference about bandwidth usage.

The Value of The Basic Design Components

I was recently involved late in the process of a web project. The design and development were all but complete with only last minute adjustments and fine tuning of new content required. The hard part of the design work had already been done. Getting the site completely finished though took longer than it should have because some basic parts of the design had broken down along the way.

Type Hierarchy & Spacing

The site in question had a very visually appealing design and most pages worked in isolation, but during the development process some consistency had been lost between various levels of the design hierarchy. Most pages had a top-level H1 heading, but not all; the H2s were usually a specific size, but not always. The spacing between a heading and the next element wasn’t always the same and the reasoning for the colour of a given element wasn’t always consistent. During the iterative refinement at the end of the project these pages were styled individually which caused them to break down as a group, requiring more rounds of refinement to unify them again.

There wasn’t a guiding principle for the size, colour and hierarchy of elements, so these decisions had to be made several times over–and for multiple pages–which added quite a bit of time to the process.

Design Groundwork

The type hierarchy and element spacing was not the sexy part of the design. It’s not something users would notice when it’s right, but the absence of that groundwork definitely made getting the to the final result more difficult.

The lesson for me was a reminder that the basic elements like spacing, alignment, repetition and consistency enable more interesting things and should be a guiding force later in the process when you’re short of time and needing to implement things quickly.

Beauty vs Bandwidth

Some visual flair, a bit of bold imagery and a beautiful custom font or two can be great ways of making your website enticing. Those elements bring trade offs though in the form of increased page weight and load time.

The great thing about a website is that it can be accessed anywhere, from a bucketload of different devices. It’s also a challenge because you don’t know what context your users are coming from.

Those design enhancements that delight someone in their office could be a source of frustration when your page loads slowly when they’re out and in a hurry. It is possible to detect devices and remove some of the unnecessary, heavier items from the page, but this approach isn’t perfect. An iPhone struggling to hold onto a 3G connection is a different beast from one connected to a good WiFi connection; so knowing what sort of device your user is on is only part of the story.

It’s important to consider everything added to the page as having pros and cons. Being too stingy with the page weight could lead to a boring design. Being too fast and free with image sliders, video and graphics could come back to bite you when a busy user on a bad connection gets frustrated and leaves.

The design needs to balance these needs.

6 SEO Tips for Web Designers

It’s a common conundrum in the web world. A designer puts a beautiful website together that the client is absolutely rapt with and hands it to the SEO to get it ranking who sheepishly tells them that it needs a bunch of changes. It’s almost like pretty sites just aren’t rankable sites. Well fortunately that’s not the case. Joe from Orange Digital has put together a list of helpful hints to ensure that your pretty website is still as SEO friendly as any.

1. Web Fonts are Your Best Friend

There’s nothing worse than being handed a website that has no crawlable information. If everything is displayed in images the Google bot (and others) can’t read it. Your amazing design is virtually unrankable. Web Fonts By using a combination of CSS, HTML and web fonts you can almost always reproduce the same effect that you get by displaying information with an image. Not only will your content be crawlable, but it will also be able to be marked up with metadata, meaning your awesome header graphic could also be the H1. If it were an image that wouldn’t be the case. Furthermore if you create a graphic using this method as opposed to an image, editing it is a cinch. If you want to change the text, colour, size or any other styling, you don’t have to pull the graphic back into Photoshop to change.

2. Copy Is Important

Accessible Copywriting Those minimalist highly visual, low word count designs might look great, but for SEO purposes they are incredibly counterproductive. Google needs content to work out what the website is about. Sure your metadata does some of the job but Google is a completionist and good copy indicates digestible information for the end user. Google’s algorithm is all about sending their users to results they can trust. If you want to retain the minimalist approach then the solution could be to hide the copy behind mouse-overs, however it may be worth questioning whether doing this pits aesthetics against usability.

3. Assume the Need For Drop Down Menus

The amount of times that I as an SEO have come across a WordPress site that doesn’t have properly designed drop down menus (or worse still doesn’t have them at all) is absurd. It’s a WordPress default function! The first live version of the website may not need them but just assume that down the line they will be needed and include them please. Drop down menus are an important part of site architecture from an SEO purpose as it allows you to internally link in a way that looks good and is natural, and the trends with design right now leaves no choice for SEOs but to create internal landing pages to rank. We need Google to be able to access them from other parts of the website and the top menu is the best place for it because…

4. Google Reads Like A Person

That means it reads from left to right and top down. The information that is higher on the page is assumed to be more relevant. If there is no crawlable information anywhere near the top of your page, the information that is crawled is assumed to be not important enough to show your users immediately. So that means that if you build a website that you have to scroll to before you get to the first part of the copy, the copy is SEO weak. At least try to include some crawlable information high on the page.

5. Ajax Content IS Crawlable

There once was a time when Ajax content was difficult, and in some cases impossible to crawl. Thankfully Google figured it out. It does involve tweaking. You can read more about the process here.

6. Consider Your SEO Friends

It’s basically just something to live by. If the website you’re designing has even the potential to ever need SEO, do right by your client and yourself by considering future need for SEO. Don’t just assume because it’s not your concern that it’s not a concern at all and never will be.

Joe McCord Joe McCord on Google+. Joe McCord on Twitter.