On this page:

March 26, 2015

mobiForge blog

Where's the !@££@$£ content? The scourge of the spandex web.

How has it come to this? The gentleman in the phone shop told me I was buying the latest and greatest phone, yet every site I visit loads at a glacial pace, speeds that make tectonic plate movements look positively spritely. It all feels like an act of pennance for some terrible act I committed a long time ago.

by thecurmudgeon at March 26, 2015 03:31 PM

March 24, 2015

mobiForge blog

Get ready for the mobile-friendly SEO update

As many of you may be aware, Google has announced on its Webmaster Central Blog that starting from April 21, websites offering below-par mobile optimization can expect a drop in search rankings. This change will affect mobile searches in all languages, in all countries. Google, as ever, do not give a huge amount of detail on what the change entails. Here’s what we definitely know about the approaching update.

by pawelpiejko at March 24, 2015 03:20 PM

Who wants the Pointer Events API? Everyone, nearly

The Pointer Events API is an HTML5 API with an interesting history. It's an open API that Microsoft developed as an alternative to the more widely supported Touch Events API. Introduced with IE10 for Windows 8, it defined input events unified across Mouse, Touch and Pen input devices.

by ruadhan at March 24, 2015 01:01 PM

March 23, 2015

Cloud Four Blog

Responsive Field Day Portland!

For the last two years, I’ve devoured the podcasts from Responsive Day Out—the conference that Jeremy Keith and Clearleft put on across the pond in Brighton.

I’ve encouraged anyone who would listen to subscribe to the podcast. It is my favorite conference that I’ve never been to.

That’s why I’m so thrilled to announce that we’re bringing the Responsive Day Out format to Portland!

Responsive Field Day

We’re calling it Responsive Field Day. It is a one-day conference on responsive design. It will take place on September 25 at Revolution Hall.

We plan to continue the spirit of the Brighton event where Jeremy famously said that “every expense has been spared.” So you can be certain the event will be affordable and inclusive.

Lyza, Aileen and I are traveling to Brighton for Responsive Day Out 3: The Final Breakpoint to watch the masters and learn how to make Responsive Field Day a success.

We’ve already got some fantastic speakers lined up. We’re not ready to announce the lineup yet though, so you’ll have to trust us when we say, “OMG! OMG! I can’t believe they said yes!

So mark September 25th on your calendar and start planning your trip to Portland. Sign up for email or follow us on Twitter to receive updates when the speakers are announced and tickets go on sale.

Finally, thanks so much to Jeremy and Clearleft for inspiring us and sharing what they’ve learned.

by Jason Grigsby at March 23, 2015 11:13 PM

The End of Mobile Portland

In December 2007, Lyza, Aileen, John and I decided to start Mobile Portland so we would have place to talk about mobile.

After eight years, Mobile Portland is coming to an end. Tonight is the final meeting.

Over the years we’ve had some amazing speakers and topics. I’m proud of the quality of the talks and the community we built.

We also inadvertently started a worldwide open device lab movement. It’s been amazing to see device labs spread and know they started in Portland.

I’d like to thank everyone who attended a meeting and those who helped out in any way. Every small contribution lifted a huge burden off the shoulders of frantic organizers.

I want to extend a special thank you to my co-founders at Cloud Four for helping get Mobile Portland off the ground and funding it; Matt Gifford for organizing so many meetings; Seth Shikora for recording nearly every meeting we’ve held; and to Elia Freedman, Dylan Boyd and Rob Mills for being the best board members I could have asked for.

Tonight’s meeting

But before Mobile Portland rides off into the sunset, we have one final meeting tonight, and it is going to be the best one yet!

I can’t think of a better speaker and a more fitting topic than Josh Clark talking about Magical UX and the Internet of Things. This is the next frontier of technology and mobile plays a bit part in it.

This will also be our largest meeting ever. We’ve had to create a waitlist for the first time so if you’ve already RSVP’d and are unable to make it tonight, please update your RSVP so people on the waitlist can attend.

What’s next?

Since we announced the end of Mobile Portland, people keep asking me two questions. First, “Why end Mobile Portland when there is still a lot of interest?”

Because eight years is a long time to do anything and instead of the group gradually winding down and losing relevance, we made the decision to go out on top.

The second, inevitable question is, “What’s next?”

I’m pleased to say that I can finally answer that question. Let me tell you about Responsive Field Day.

by Jason Grigsby at March 23, 2015 11:13 PM

Brad Frost » Brad Frost | Web Design, Speaking, Consulting, Music, and Art

Email Responses #1: Workflow & Client Education

Note: I’m going to start posting some of my email responses to people here on my blog. I think a lot of people’s questions are valuable and think they’re worthy of a broader discussion. And I hope the advice I’m giving is generally useful.

The first correspondence comes from a attendee of a conference I recently spoke at. I was talking about atomic design and how our multi-device reality necessitates a change in process and workflow. Here’s their question:

You mentioned how Front End should be implicated from the beginning of a design process if not before. At the same time, you have to do the style tiles with the designer and so on. My question is in regards to educating the client. They are used to the process of infinite psd change workflow. How do you go about educating them of this new workflow?

How you go about educating a client really depends on the client. Generally speaking, I think it’s important to bring up why this process change is needed in the first place. I’ve found these three images to really help get the point across and help get them excited for change rather than to fear it.

It’s also important to help clients understand that design is more than aesthetics (the Steve Jobs quote is always a winner). Design includes aesthetics sure, but it also includes performance, clarity, intuition, ergonomics, etc. That’s more ammo for why a change of process is absolutely necessary.

It’s also helpful to talk money, and have a discussion about why infinite psd changes waste time, money, talent, and resources. At the end of the day, Photoshop comps and other abstractions are not the final product. The sooner you can get into a more realistic environment (read: the browser), the sooner you can demonstrate all those other important aspects of design (For example you can’t mock up performance in Photoshop).

If all that rationale fails, a swift punch to the gut can go a long way.

Hope this helps a bit, and good luck convincing your clients!

by Brad Frost at March 23, 2015 01:36 AM

March 20, 2015

Cloud Four Blog

Responsive Images 101, Part 5: Sizes

When we last left our intrepid web developers, they had discovered the power of srcset width descriptors, only to be faced with a new challenge—the browser only knows the size of the viewport when it begins downloading images.

Now, it is time to meet the hero of our story: the sizes attribute.

sizes-hero

Sizes attribute is required!

The sizes attribute is required any time you use srcset width descriptors.

In fact, sizes only makes sense if you’re using the width descriptors. If you’re using the display density descriptors, you don’t need the sizes attribute. The browser won’t know what to do with it.

Sizes syntax

Out of all the new responsive images standards, sizes was the hardest one for me to wrap my head around at first.

Sizes syntax repeated below

Like srcset, the sizes attribute contains a comma-separated list. This comma-separated list describes the size of the image in relation to the viewport.

I want to repeat that point because it is the key to understanding sizes.

We’re telling the browser what size the image will be in relation to the size of the viewport. And we can tell the browser how that relationship changes as the size of the viewport changes.

<img src="cat.jpg" alt="cat"
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

Like srcset, each comma-separated item contains two values separated by a space.

Media conditions

The first value is a media condition. A media condition is similar to a media query, but not as full featured. For example, you can’t do things like ‘@media screen’, but you can do everything else you would likely want to do in sizes.

Most commonly, your media condition is going to be a something like ‘(max-width: 480px)’ or maybe ‘(min-width: 480px)’.

Lengths

The second value in each comma-separated item is a length. This length is often expressed using the viewport width (vw) unit.

There’s a good chance you haven’t seen vw units before. They are fairly new, but have wide support in current browsers.

Each vw unit represents 1% of the viewport width, which is a fancy way of saying that 100vw is 100% of the viewport width and 33vw is 33% of the viewport width.

The length doesn’t have to be expressed as a viewport width unit. It can be any length including absolute and relative length. You can even use CSS calc() to do things like auto-calculate margins dynamically.

How does the browser select the correct sizes value?

When the browser starts through the comma-separated list of values, it grabs the first value where the media condition passes.

Take another look at our sample markup and the order in the sizes attribute:

<img src="cat.jpg" alt="cat"
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

If we translated this into a bulleted list of instructions, it might look like this:

  • (max-width: 480px) 100vw — If the viewport is 480 pixels wide or smaller, the image will be 100% of the viewport width.
  • (max-width: 900px) 33vw — If the viewport is 480 pixels wide or smaller, this rule will never be reached because of the previous media condition. Ergo, if this rule effectively says that if the viewport is 481 pixels wide to 900px, that the image will be 33% of the viewport width.

  • 254px — When there is no media condition listed, the length is assumed to be a default value used when none of the other media conditions are met. In this case, we have media conditions covering viewports up to 900 pixels. Therefore, from 901 pixels wide to infinity, the image will be 254 pixels wide.

  • To help you visualize how this might work in the real world, I created a little video that looks as how the values might change as the viewport width increased on the Walmart Grocery site.

    NOTE: As of the time of publication, the Walmart Grocery site was not using srcset and sizes. This is hypothetical markup. If you want to see srcset and sizes in action, take a look at The Guardian which recently switched to using srcset and sizes.

    But what about separation of content and presentation?

    I’ve seen many complaints about the new responsive images specification. Most amount to either complaints about complexity that ignore the fact that images on the web are inherently complex3 or some variation of WWIC.

    But the one complaint I have a tremendous amount of sympathy for is the idea that we now have presentation information—the size of the image—in the markup. I doubt there was anyone involved in the responsive images standards process who didn’t share this concern at some point.

    Unfortunately, it is unavoidable. As discussed in Part 4, the browser starts downloading image sources before the size of the image in the page is known.

    The only way to support the pre-loader and make sure the right source gets downloaded is to provide some information about the size of the image in the markup.

    Is the pre-loader worth it?

    If you’re like me, you may have found yourself wondering whether the pre-loader was worth all of the problems it causes?

    Yes. Yes, it is.

    pre-loader-faster-web

    Andy Davies wrote about how Google saw a 20% and Firefox a 19% increase in average page speed after implementing the pre-loader. Steve Souders thinks that “preloading is the single biggest performance improvement browsers have ever made.”

    We can’t simply throw out that web performance boon in favor of responsive images.

    Therefore, we have to find a compromise. The sizes attribute is that compromise. It provides just enough information for the browser to do its job.

    Srcset and sizes = Smart browsers

    Srcset and sizes provide all of the functionality you need for the resolution switching use case. They give the browser just enough information to allow it to make smart decisions.

    Dog with glasses

    But what happens when you need more control? What about art direction?

    Next Tuesday, Responsive Images 101, Part 6: The Picture Element.


    Responsive Images 101 Series
    1. Definitions
    2. Img Required
    3. Srcset Display Density
    4. Srcset Width Descriptors
    5. Sizes
    6. Picture Element
    7. Type
    8. CSS Responsive Images
    9. Image breakpoints

    Footnotes
    1. How quickly we forget web-safe colors, Lynda Weinman‘s multiple books on web graphics, and the way different images formats compress. And it’s not getting any simpler. Images on the web are inherently complex.
    2. Super hero by Ashley Rose. Dog Intelligence by Alice Jamieson. Licensed under Creative Commons.

by Jason Grigsby at March 20, 2015 02:45 PM

Martin's Mobile Technology Page

VoLTE: The Locality Advantage

VoLTE certainly is an 'interesting' beast and continues to occupy the minds of thousands of engineers to make it work in networks around the globe. I wonder how this monumental effort stacks up against other VoIP services such as Facetime, Skype and others that are centrally managed!? That probably costs a lot less money and they are already up and running for many years now. So far I've seen one major advantage of VoLTE over other voice over IP service on mobile devices: It can do a fallback to 2G and 3G circuit switched channels once you run out of LTE network coverage.

Recently, another advantage came to my mind: Instead of globally managed from a single country there are several independent VoLTE systems in each country. While that creates all sorts of problematic disadvantages, the advantage of such a distributed system is that there is no single point of failure and no single point of control and interception. So if somebody wants to spy on VoLTE installations they have to make the extra effort to break into each and every system independently. Not that I think that this is beyond the capabilities both in terms of knowledge and man power of some organizations but it's a lot harder to do and a lot more difficult to conceal.

Not that VoLTE is an end to end encrypted system but at least it makes it a more local problem.

by mobilesociety at March 20, 2015 01:45 AM

March 19, 2015

Eurotechnology.japan

Nintendo smartphone pivot?!

Nintendo partners with DeNA Taking Nintendo intellectual property and characters to smartphones Nintendo was founded on September 23, 1889 by Fujasiro Yamauchi in Kyoto for the production of handmade “hanafuda” cards. Nintendo Headquarters are still located in Kyoto (you can see the Nintendo headquarters building from the Kyoto railway station). The Chinese characters used to … Continue reading Nintendo smartphone pivot?!

The post Nintendo smartphone pivot?! appeared first on Eurotechnology Japan.

by fasol@eurotechnology.com (Gerhard Fasol) at March 19, 2015 05:00 PM

Cloud Four Blog

Responsive Images 101, Part 4: Srcset Width Descriptors

In Part 3, we looked at display density descriptors and concluded that they are great for fixed width images, but are insufficient for flexible images.

Flexible images is where srcset’s width descriptors shine.

Width descriptors

The syntax for width descriptors is similar to that of display density descriptors. The value of the srcset attribute is a comma-separated list of image sources and descriptors.

Srcset syntax with width descriptors. Repeated below.

The difference is that instead of having 1x, 2x, and other values representing the density, we now list the width of the image source such as 320w, 480w, etc.

<img src="cat.jpg" alt="cat" 
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">

The width of the image source can cause some confusion. Width descriptors are looking for the resolution of the source file.

In other words, if you open the image in an image editor, what does it say the resolution is? Grab the width and put it in the srcset attribute.

The browser picks the best source?

When you use width descriptors, you’re providing the browser with a list of images and their true widths so that it can select the best source. How does the browser do that?

Your first instinct is probably to say that the browser looks at the size of the element in the page and compares it to the list of source sizes. That makes sense, but it isn’t how the selection work.

See, when a browser starts downloading images, it often doesn’t know the size of the image in the page.

Browser pre-loader and speculative asset downloading

If you look at a timeline of how a browser renders a page, you’ll notice something striking.

AnEventApart.com Chrome timeline

Shortly after the browser downloads the HTML, it requests CSS and JavaScript. But before the CSS and JavaScript is done loading, the browser starts downloading images.

Because neither the CSS nor JavaScript is complete, the browser is downloading images without knowing what the layout of the page will be. And without knowing the layout, it doesn’t know what size the image element will be.

BTW, this pre-loading behavior is why we can’t solve inline responsive images using CSS or JavaScript. They aren’t available when the browser starts downloading.

The only thing that the browser does know is the size of the viewport. Once we move past display density descriptors, everything hinges on the size of the viewport.

Why does this matter?

The viewport can be a poor substitute for the actual size of the image. Take the images on Walmart’s Grocery site:

Small screen version of delivery.walmart.com showing that images are nearly full width of page.

On narrow viewports, the images are nearly the same size as the viewport width. They are certainly close enough to work.

Wider screens, however, are a different matter:

Wide screen version of delivery.walmart.com showing how images are much smaller than the viewport.

In the second example, the viewport is 1540px wide, but the images are only 254px wide. Knowing the size of the viewport won’t tell the browser enough information to be able to select the right image source.

Sizes to the rescue!

How do we tell the browser about the size of the image in the page so that it can download the right source from our srcset list? Use use the sizes attribute!

Read more in Part 5: Sizes.


Responsive Images 101
  1. Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints

by Jason Grigsby at March 19, 2015 02:45 PM

March 18, 2015

Martin's Mobile Technology Page

OpenStreetMap (for Android) Part 4: Recording A Route And Import To OSM

While it very rarely happens where I tend to go but still every now and then there are roads and paths I take that are not in Openstreetmap. To my pleasure I recently discovered how easy it is to add them to the OSM database with the Openstreetmap for Android (OSM) GPX plugin.

The pictures below show how it's done. First, activate "Record your trips" in the Osmand 'Plugins' settings. Afterward a "GPX" button is shown in the map on the right hand side that can be tapped-on. Once tapped-on, the path that is recorded is shown in turquoise color on the map and the GPX button is replaced by the distance to the location where the GPX recording was started. To stop the recording, a tap on the distance indicator brings up a pop-up menu from which "save" can be selected (the third option in the pop-up menu, don't mix it up with 'stop' which doesn't save anything). The resulting GPX file is put into the Osmand folder in internal storage or on the SD card.

Once the GPX file is on a PC it can simply be dropped on the Openstreetmap web site after 'editing' mode has been activated. As can be seen on the last screenshot the my GPX track is exactly on the railway track of the train I was sitting in when I took the GPX recording.

Osm1 Osm2 Osm3

by mobilesociety at March 18, 2015 05:28 PM

Cloud Four Blog

Responsive Images 101, Part 3: Srcset Display Density

Ever since Apple launched a retina display on the iPhone 4, web designers have been looking for a way to handle high density displays. That is where srcset and its display density descriptors come in.

Resolution switching uses srcset

As a reminder, display density is a resolution switching use case. And when we’re solving for resolution switching, we want to use srcset.1

The reason why we want to use srcset is because it gives the browser choice. When we use the media attribute provided by the <picture> element, we’re dictating to the browser what image it must use. That makes sense for art direction.

But when it comes to resolution switching, the browser knows best what image will work. It can make decisions based on factors that we’re not privy to such as network conditions or user preference.

So unless we are doing art direction, we should strive to give the browser options and let it make smart decisions.

Display density descriptors

The syntax for display density is fairly straight forward:

srcset example repeated below

The srcset attribute is added to an <img> element. The value of srcset contains a comma-separated list. Each item in the list contains the path to an image and the density of that image provided as a multiple (e.g., 1x, 2x, 3x…).

<img src="cat.jpg" alt="cat" srcset="cat.jpg, cat-2X.jpg 2x">

The display density values—the 1x, 2x, etc.—are referred to as display density descriptors. If a display density descriptor isn’t provided, it is assumed to be 1x.

That seems easy…

It is easy—assuming all you care about is display density. I have my doubts about how often that will happen.

Let’s take a look at the Apple Watch image from Part 1:

Apple Watch Hero Image

As mentioned previously, the image is 5144×1698 pixels and 398K in its 2x incarnation. There is also a 1x version. Let’s compare them to the size that would make sense for a single density, Blackberry Curve 9310:

.densitytable {width: auto;overflow:auto;border-collapse:collapse;border-spacing:0;} .densitytable td, .densitytable th {text-align:center;padding:5px;background:#fff;border:1px solid #ccc;width:25%;}
Image Width Height File Size
2x large 5144 1698 398K
1x large 2572 849 256K
320px, Single Density 320 106 8K

For the final row in the table, I resized the image to 320px wide and saved as a JPEG in order to estimate what it would be.

It should be obvious that two sizes of an image aren’t sufficient. Sure, we could start at 320 as 1x and then rewrite our markup to look something like this:

<img srcset="cat.jpg, cat-2X.jpg 2x, cat-3x.jpg 3x, […], cat-16x.jpg 16x">

That will get us from 320px to the 5144px of the largest image, but it seems insane to me.

And this highlights another reason why I find the display density descriptors to be less desirable than other solutions. I don’t have any interest in keeping track of all of the different display densities available.

Do we want to provide 1x, 1.5x, 2x, 3x variants? What about accounting for things like the iPhone 6 Plus’s downsampling?

Not to mention what happens when you start working with flexible images. Now you have multiple densities at multiple image breakpoints. And sometimes you’re repeating your image sources because 2x at a small size could be the same as 1x resolution at a larger image breakpoint.

It gets messy quickly.

Display density descriptors are best for fixed width images

The moment you move beyond providing alternate densities of a fixed width img element, the display density descriptor becomes unwieldy and inadequate to the task.

What do you need instead? Part 4: Srcset Width Descriptors.


Responsive Images 101 Series
  1. Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints

Footnotes
  1. Unless we’re providing different image formats which we will cover later.

by Jason Grigsby at March 18, 2015 02:55 PM

March 17, 2015

Brad Frost » Brad Frost | Web Design, Speaking, Consulting, Music, and Art

Successful Product Design, pt. 4: Atomic Design with Brad Frost

I got a chance to talk about atomic design on The Dirt podcast. I had a blast!

For the fourth chapter in our series on Designing a Successful Product, we sit down with Mr. Brad Frost to discuss Atomic Design and creating visual systems. Brad takes us through the benefits of designing systems rather than individual pages. We chat about Pattern Lab, creating style guides, and how to sell someone on the approach. We do all of this with the grace and elegance of a gazelle.

by Brad Frost at March 17, 2015 06:14 PM

Cloud Four Blog

Responsive Images 101, Part 2: Img Required

One of the main reasons why we need solutions for responsive images is because the <img> element is insufficient. It only has one src and we need multiple sources.

Given that fact, it may be surprising that we’re going to start by talking about the <img> element instead of the new, shiny toys like <picture> and srcset.

No matter what responsive images solution you use, <img> is required.

The <img> element is critical for all of the inline responsive images solutions. The way I like to think about it is that the img is a box into which all of the responsive image rules are added and applied.1

img-required

You can use JavaScript to watch for changes in the currentSrc of the img element. Here is an incredibly simple script that watches for changes and writes them to the page2:

(function() {
  var currentSrc, oldSrc, imgEl;
  var showPicSrc = function() {
    oldSrc     = currentSrc;
    imgEl      = document.getElementById('picimg');
    currentSrc = imgEl.currentSrc || imgEl.src;
 
    if (typeof oldSrc === 'undefined' || oldSrc !== currentSrc) {
      document.getElementById('logger').innerHTML = currentSrc;
    }
  };
 
  // You may wish to debounce resize if you have performance concerns
  window.addEventListener('resize', showPicSrc);
  window.addEventListener('load', showPicSrc);
})(window);

You can see this in action on this demo page3. Resize the browser to see the currentsrc change.

Why does this matter?

The fact that the <img> will always show the current source means that any existing JavaScript that interacts with the <img> element will continue to work as expected.

(Not to mention the decades worth of code that browser-makers have written to handle images correctly.)

As Eric Portis puts it, “we’re progressively enhancing the img” when we use the new responsive images standards.

Do you need more than img?

There are some scenarios where the img element alone might be enough:

  • A fixed width, single density web page — If you don’t have a responsive design and aren’t worrying about “retina” displays, then the img element is all you need.
  • Small differences in file size — For some images there isn’t much difference between the file size of the largest and smallest variants. We’ve seen this with badges, icons and other small images that don’t change much as the viewport changes. If there isn’t much difference in file size, a single img source may suffice.

  • Using vector-based images like SVG — If you’re using a vector-based image format like SVG, the image can scale without providing multiple sources. In that case, you may be able to link directly to the SVG as the single source for the img.

    This depends, of course, on whether the browsers you support also support SVG. You may be better off using the picture element to provide alternative image formats as fallbacks—something I’ll cover later in this series.

  • What if you want to support high-density displays?

    If you want to support high-density displays, then we need to supersize our <img> element. Learn how in Part 3 in this series: Srcset Display Density.


    Responsive Images 101 Series
    1. Definitions
    2. Img Required
    3. Srcset Display Density
    4. Srcset Width Descriptors
    5. Sizes
    6. Picture Element
    7. Type
    8. CSS Responsive Images
    9. Image breakpoints

    Footnotes
    1. Box icon made by Daniel Bruce from www.flaticon.com and is licensed under CC BY 3.0
    2. Thanks to Lyza and Erik for helping with the JavaScript.
    3. Demo page forked from Google Chrome Team picture element example that was used in Pearl Chen‘s great article on Built-in Browser Support for Responsive Images.

by Jason Grigsby at March 17, 2015 02:55 PM

March 16, 2015

Cloud Four Blog

Responsive Images 101, Part 1: Definitions

Over the last few years, we've written a quite a few articles about responsive images. Now that responsive images have landed in browsers, it seemed like a good time to step back and cover the basics for those who are just starting to tackle responsive images.

Ergo, a new series of articles called Responsive Images 101 that will cover everything from why we need responsive images to how to pick the right responsive images solution.

Let's dig in!

What are Responsive Images?

The idea of having the browser resize images has been a key part of responsive web design from the beginning.

However, simply resizing images can mean that users will download images that are far too large. Take this Apple Watch image:

Apple Watch Hero Image

The largest version of that image, used for large, high density displays like the iMac, is 5144x1698 pixels. It weighs in at 398K.

Delivering an image that large to a device like the Blackberry Curve 9310—with its display resolution of 320x240 pixels—doesn't make any sense. We need a smaller image.

Therefore, when I talk about responsive images, what I'm referring to is:

A method for providing the browser with multiple image sources depending on display density, size of the image element in the page, or any number of other factors.

Often, when people talk about responsive images, they are referring to solutions for inline images. Why? Let's take a look at our old friend the <img> element:

<img src="giraffe.jpg" alt="Giraffe">

The fact that <img> only provides for a single image source has been the biggest challenge. But responsive images aren't limited to HTML. We'll look at CSS techniques later in this series.

Understanding your use case

When you start looking at responsive images solutions, it can be overwhelming to figure out which solution makes the most sense for your image. The key to knowing what solution will work best is to know what use case you're solving for.

The Responsive Images Community Group (RICG) defined multiple use cases. I encourage you to read through the full list of use cases—there is some good stuff in there—but for our purposes, I'm going to simplify things into two major use cases: resolution switching and art direction.

Resolution Switching

Resolution switching is the most common use case. It refers to any scenario where you all you want to do is provide different sizes of an image and you're not making any modifications to the content or aspect ratio of the image.

Example of resolution switching using a photo of Michelle Obama

Resolution switching not only encompasses flexible images that change based on the size of the viewport, but also scenarios where you want to provide different image sources based on the display density (a.k.a., retina images).

Art Direction

Whenever you need to make changes to content or aspect ratio of an image based on the size of the image in the page, you're doing what the RICG refers to as art direction.

Take for example the following photo of President Obama speaking at a Chrysler plant.

Obama speaking at Chrysler plant

When the image is displayed at larger sizes, it makes sense for the image to show the automobile factory in the background. The background helps explain where the event took place and adds to the image. But look what happens when we scale the image down to fit a smaller screen.

Obama speaking at Chrysler plant shrunk to 100 pixels wide. Obama himself is tiny in the picture at this size.

At that size, you can barely recognize Obama. You can’t make out his face. Instead of simply resizing the image, it may make sense to crop the image to get rid of some of the background and focus in on him. The end result is an image that works better at the smaller size:

Obama speaking at Chrysler plant shrunk to 100 pixels wide and cropped so Obama can be seen better.

Art direction isn't limited to cropping images. For example, on the Nokia site where they showed off the new version of their browser, you can see how the image changes from landscape to portrait based on the size of the screen:

As Stephanie Rieger explained at the Breaking Development conference, the decision was made to change the image so that the browser itself could be seen more easily. If the image shrunk too much, the browser chrome became unreadable which is why the design switches from landscape to portrait.

The most common place I see art direction is for images that contain text. We can see an example at the CB2 site and one of its hero images.

CB2 hero image with text

This image contains three photographs, two logos with type in them, and a stamp and text that both use thin strokes. If we simply resized this image to 320 pixels wide, the text would be too small to be readable.

CB2 hero image with text shrunk to 320 pixels making the text unreadable.

CB2 doesn't currently have a responsive site, but it does have a mobile web site where we can see how they handle this hero image on small screens.

CB2 mobile hero image

In order to make the image work on small screens, CB2 does the following:

  • Changes from three photographs to two
  • Removes text
  • Modifies the aspect ratio to make the image taller
  • Redesigns the layout of the image

As you can see the changes necessary to make an image work on small screens can be substantial.

Let the games begin

Now that we've got the definitions out of the way, we can start looking at how these solutions work. Read more in Part 2: Img Required.


Responsive Images 101 Series
  1. Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints

by Jason Grigsby at March 16, 2015 07:33 PM

Martin's Mobile Technology Page

How to Counter Hotel WiFi Deassociation Attacks

Recently the FCC made it crystal clear that Deassociation Attacks by hotel Wi-Fi installations to force their 'guests' using the hotel's Wi-Fi instead of tethering their equipment to their smartphones and tablets is illegal. That only applies to the US, of course, and despite it being a very effective move to aggravate customers it doesn't mean nobody else will be trying to use it in the future. But it turns out, there's an effective countermeasure against this, at least in the foreseeable future.

The attack vector used by such Wi-Fi installations is to send De-association management frames to devices connected to a hotspot other than that of a local venue. Unlike data frames which are encrypted and thus can't be forged, Wi-Fi management frames are sent in the clear and can thus be sent by anyone. To mitigate rogue de-associations and other attack vectors the 802.11w amendment to the Wi-Fi standard describes a way to also protect management frames which effectively counters such attacks.

There are many amendments to the Wi-Fi standards that have never been implemented and for a long time it looked like this was yet another one. But since July 2014 the Wi-Fi Association requires implementation of the protected management frames amendment in its Wi-Fi certification scheme when a device supports 802.11ac, the latest super high speed transmission mode as reported here, here and here. That's good news as this certification is required for the Wi-Fi logo on the sales packaging and as a precondition by many companies (such as mobile network operators) to sell a Wi-Fi capable device. Also, a growing number of access points and devices such as notebooks, smartphones and tablets support 802.11ac today and even more will do so in the future.

PmfI ran a quick trace of all access points in the neighborhood but didn't find any indication of the feature being supported in their beacon frames. As described here in detail and shown in the screenshot on the left there are two bits towards the end of the beacon frame that indicate to devices whether PMF (protected management frames) are supported or not. These indicator bits are also sent by devices during connection establishment so it's easy to find out if a device supports PMF. One source claimed that the Samsung S5 already supported it but when I traced the connection establishment both bits were set to 0. So at least my S5 does not or doesn't want to indicate this capability to an access point that itself doesn't support it. The result is perhaps a bit disappointing but not really surprising as the new rule just came into effect half a year ago. So I will have to get hold of devices certified after that date. I'll keep you posted.

The article linked above remarks that PMF counters all management frame attacks observed so far. One thing it can't protect against are attacks with Ready To Send / Clear To Send frames that include long reservation times for transmissions (up to 32 milliseconds). The good thing is, however, that such frames are not network specific and thus would not only slow down an attacked network but also the hotel Wi-Fi itself on the same channel. In other words this is no caveat for hotels that have a special treat for their customers...

by mobilesociety at March 16, 2015 06:01 AM

March 15, 2015

Eurotechnology.japan

Sir Stephen Gomersall: Globalization and the art of tea

by Hitachi Chief Executive for Europe and subsequently Hitachi Board Director (2004-2014) Princess Chichibu Memorial Lecture to the Japan British Society at Ueno Gakuen, Tokyo, 5 March 2015 It is a great honour to be giving this lecture this evening. HIH Princess Chichibu was a charming and broad-minded Patron of this Society and of the … Continue reading Sir Stephen Gomersall: Globalization and the art of tea

The post Sir Stephen Gomersall: Globalization and the art of tea appeared first on Eurotechnology Japan.

by fasol@eurotechnology.com (Gerhard Fasol) at March 15, 2015 07:57 AM

March 13, 2015

mobiForge blog

Mobile Web Traffic Report Q4 2014

Getting hard data on the fast-changing, complex mobile landscape can play a key roles in your mobile strategy, and we have a report that can help you with just that. This paper gives you all the need-to-know information on mobile web traffic today so that you can maximize your results for your target market.

Traffic stats help you understand mobile user behaviour

by pawelpiejko at March 13, 2015 11:05 AM

March 12, 2015

Martin's Mobile Technology Page

GPRS to LTE Reselection During Data Transfers

It's standard practice for mobiles for many years now to implement GPRS to 3G reselection during data transfers. It might sound like a small and unimportant feature but in mobility scenarios it's very important when a subscriber losses 3G coverage during a data transfer and drops down to 2G. Without this feature the device would be stuck on the very slow 2G layer until the data transfer has finished. Quite to my surprise the same feature for LTE has only become available in mobile devices in the last year or so. My Galaxy S4 can still get stuck on 2G during data transfers or when I use it for tethering on the train and kind of 'rescues itself' to 3G rather than going back to LTE when both networks become available again. But on newer devices I have noticed that they now have the ability to also search for LTE during 2G transmission gaps and go back to LTE. That makes a real differences especially in areas where only 2G and LTE is available. In Germany that is the case in a lot of rural areas. A small feature but a big benefit to the traveling user. What's still outstanding, however, is 3G to LTE redirection/handover.

by mobilesociety at March 12, 2015 07:11 AM

Eurotechnology.japan

Crisis leadership post-Fukushima

Global leadership in the extreme Dr Chuck Casto: Leader of the US Integrated Government and NRC efforts in Japan during the Fukushima nuclear accident in 2011 I don’t think that there is anyone with deeper insight into the Fukushima-Dai-Ichi nuclear disaster, its management, causes and consequences, than Dr. Chuck Casto. Dr Casto arrived in Japan … Continue reading Crisis leadership post-Fukushima

The post Crisis leadership post-Fukushima appeared first on Eurotechnology Japan.

by fasol@eurotechnology.com (Gerhard Fasol) at March 12, 2015 03:29 AM