A Few Different Ways To Use SVG Sprites In Animation


There are some issues we all know and like about SVGs. First, SVGs have clean, clear edges on any show, so utilizing SVGs can scale back the variety of HTTP requests for picture alternative. Second, it’s straightforward to make an SVG scalable to its container for responsive improvement.

In this text we’ll cowl a number of methods of utilizing SVG sprites to explain movement on the internet. I’ll present some methods for utilizing SVG sprites in complicated animation that takes benefit of those elements. All examples proven will assume using an auto-prefixer and a few primary information of CSS animations.

Technique #M: Complex Responsive Animation With An SVG Sprite

Most of us have been utilizing sprites for improvement for a very long time now: utilizing SVG in a sprite just isn’t new enterprise. This article by Ilya Pukhalski1 breaks down Joe Harrison’s responsive icons technique2 in a really spectacular approach. In this primary instance we’ll take it one step additional and use SVG sprites not only for iconography, however for complicated, fluid animation as nicely.

Animation has soared in reputation this yr as a result of elevated browser help for animations and user experience benefits3 of motion that helps content material. But till now, we’ve got not considered this medium in the identical approach we now have about so many different design ideas that shift for various display sizes. Even if the animation is complicated, we will nonetheless get probably the most bang for our efficiency buck whereas nonetheless catering to our customers’ wants.

Responsive net improvement adapts content material for various shows for therefore many parts of UI interfaces. Animation can modify with the identical issues because the typography and format, adjusting to the viewport and clarifying the design.

This is what we’ll be making:

See the Pen Responsive SVG Sprite Animation that Adjusts Based on Viewport4 by Sarah Drasner (@sdras27225) on CodePen28236.

In this instance, I’ve made a modern-day Book of Kells initial illustration7 to point out a posh animation within the context of web page content material. First, I’ve made three totally different designs based mostly on small, medium and enormous viewports.

Full Kells SVG animation design
Full Kells SVG animation design displaying the designs for giant, medium and small viewports.

I use this as my map for the remainder of the challenge and seek advice from it typically. Other individuals plan in a different way, working within the browser or making sketches. Choose the tactic that makes you most efficient.

Grouping And Drying It Out

Now that we have now a map, we will begin decreasing the repetition of parts. We determine the shapes that the primary and second variations have in widespread so we will reuse them. A class could be assigned to the rect within the background and in order that we will change the fill utilizing a media question. All the objects are named and grouped for straightforward reference, reminiscent of “mountains”, “bridge” or “tower”.

We’ll additionally put a category on all detailed shapes, similar to constructing home windows or bridge ropes that might be eliminated within the medium display measurement. Any group that’s too totally different to switch, we put collectively in a bigger group that we will then cover or show. If the primary illustration is kells_1, the group specific to the second illustration is kells_2, and the final is kells_3. In order to make the entire SVG equally scalable to the identical container values, the final illustration turns into the identical measurement as the primary.

What we’re left with are two sprites within the sprite sheet, and three SVG teams. The first seems barely complicated:

Grouped SVG Design ready for export
Grouped SVG Design prepared for export.

We now export it to Peter Collingridge’s SVG Editor8 — or any most popular technique of SVG optimization — protecting the teams, which brings the file measurement right down to 18KB! Note: SVGO9 can also be nice for terminal-based mostly optimization, although I choose to make use of the web editor as a result of not solely is there’s a preview of how the SVG will seem if you’re accomplished, there’s additionally now an experimental modifying part to work with.

To use this device, you merely minimize and paste all of the SVG code into the textarea, hit load, and you may be directed to the optimize view. I often attempt the “Extreme” choice choice simply to see if I can get away with it, however have a tendency to finish up utilizing “Conservative”, not eradicating whitespace (due to readability whereas I’m working), and ensuring that I protect the teams. Here is a screenshot of the settings I usually work with. Please observe that this varies from venture to undertaking and everybody has totally different preferences.

svg-editor-preview-opt
Typical settings for a posh SVG export from the SVG Editor.

The optimized SVG is positioned inline within the HTML (somewhat than a supply URL background picture) in order that it’s easier to animate10. By taking the time to label the courses correctly, we will now add the CSS that may alter the small print between giant and medium sizes:

@media display and ( max-width: 700px ) 
  .kells3 
    show: block;
  
  .background 
    fill: #93A600;
    opacity: zero.fifty seven;
  
  .mid-cover  show: none; 
  .bridge  rework: translateX(15px); 

Making It Fluid

At this level the width and peak are faraway from the SVG and we will add in preserveAspectRatio="xMidYMid meet" (although that’s the default, so it’s not strictly essential) to make the SVG fluid. With these alterations, it’s going to modify to the container measurement as an alternative, which we set based mostly on percentages. Flex or some other responsive container would work right here too.

.preliminary  
  width: 50%;
  float: left;
  margin: zero S% zero zero;

The Viewbox Trick

There is one catch and also you may need already guessed it. Even if we assign the underside layer a category and conceal it, there shall be an empty hole the place the viewbox nonetheless accounts for that area. We can change the viewbox within the SVG to point out solely the highest portion:

viewBox="zero zero 490 474" 

and that may do the trick… for the 2 bigger variations. The smallest model is now obscured, because the viewbox is offering one thing of a window into one other portion of the SVG sprite sheet, so we might want to regulate it. To change the viewbox based mostly on a shifting viewport, we’ll use a bit of JavaScript:

var form = doc.getElementById("svg");

// media question occasion handler
if (matchMedia) 
        var mq = window.matchMedia("(min-width: 500px)");
        mq.addListener(WidthChange);
        WidthChange(mq);

// media question change
perform WidthChange(mq) 
        if (mq.matches) 
    form.setAttribute("viewBox", "zero zero 490 474");
    form.setAttribute("allow-background", "zero zero 490 474");
        
        else 
    form.setAttribute("viewBox", "zero 490 500 500");
    form.setAttribute("allow-background", "zero 490 500 500");
        
;

Now, once we scroll the browser window horizontally, the viewport will shift to show solely the a part of the SVG we need to expose. Our code is now primed and able to animate.

Time To Animate

If you’re exporting from Illustrator as I am, it should account for the truth that you’ve many “mountain” courses, “dot” courses, and so forth., and quantity them for you: “mountain”, “mountain_2_” and so forth. The good factor about naming all of those teams correctly is that we will persistently reuse the identical animation throughout an array of sprites. To goal all the “mountain” courses, we will use a CSS attributeStartsWith selector (I’ve modified the default Illustrator IDs to courses):

[class^="mountain"], [class^="grass"] 
  animation: slant 9s ease-in-out infinite each;
  rework: skew(2deg);

You’ll see right here that we start with a rework set on that aspect: this retains the keyframe animation concise. The animation will assume that the zero% keyframe corresponds to the preliminary state of the factor; all that must be outlined to create a really succinct loop are the modifications midway by means of the animation sequence.

@keyframes slant 
  50%  rework: skew(-2deg); 

For the dots and stars that share a standard animation, we declare that when in @keyframes, however then change the timing of the animation for every of the totally different results with as little code as potential:

@keyframes blink 
  50%  opacity: zero; 


[class^="star"] 
  animation: blink 2s ease-in-out infinite each;


[class^="dot"] 
  animation: blink 5s -3s ease-in-out infinite each;

We don’t need each the celebs and dots to animate on the similar time, so the animations are staggered with a delay. However, doing so with a constructive integer will trigger a niche in continuity at first of the animation when the viewer arrives. This is solved right here by specifying a adverse delay.

Of course, we additionally want so as to add the most typical viewport meta tag:

  <meta identify="viewport" content material="width=gadget-width">

To get the absolute best efficiency and to dump work to the GPU (notably in Firefox), we additionally have to hardware-speed up any component that we’re animating. SCSS is nice for this as I can use a mixin:

@mixin speed up 
  rework: translateZ(zero);
  backface-visibility: hidden;
  perspective: one thousand;

and add this to all the parts with animation:

@embrace speed up;

Backwards Compatibility

If SVG or animation shouldn’t be out there, we will present backwards compatibility by including a fallback. In this case I’ve used a easy PNG, however you may as well make one thing extra complicated if you want.

<div class="fallback">
  <img src="fallback.png">
</div>

We add in Modernizr — a slim, customized construct to examine for SVG — and use the category hooks offered to cover and show it relying on the help degree:

.svg .fallback 
  show: none;


.no-svg .fallback  
  width: 50%;
  float: left;
  margin: zero S% zero zero;
  img  width: one hundred%; 

By nesting the picture in a div set to show:none, the fallback asset isn’t accessed until SVG or animation help is disabled. More details about what content material is downloaded in several media queries could be present in Tim Kadlec’s weblog submit “Media Query & Asset Downloading Results11”. For a extra detailed evaluation on the best way to present a number of fallbacks for SVG utilizing the image aspect and a polyfill, Sara Soueidan created a great resource12.

And there you might have it: a posh animation with concise code that shifts based mostly on the viewport.

Techniques #P And #A: Keyframe Animation With Steps() And SVG Sprites

Techniques P and A are shorter and associated to one another. In these examples, we’ll use the SVG sprite to make a step animation. Of all net-based mostly animation methods, step animation most intently resembles previous hand-drawn cel animation. Cel is brief for “celluloid” which is a kind of clear sheet. This materials was utilized by animators like Disney or the unique Looney Tunes to attract on prime of their earlier drawings, thereby defining a sequence and creating the phantasm of motion.

The photographs have been shot on movie, body by body. Each body was composed of a number of totally different layers. There was sometimes a stationary painted background, used statically all through a scene. The character’s physique and corresponding shifting physique elements have been then painted on separate layers of celluloid to scale back repetition.

cel1-bk-preview-opt13
All cel animation pictures used with permission of John Gunn. (Large preview14)
cel2-guide-preview-opt15
Sketch, with guides. (Large preview16)
cel2-preview-opt17
Completed cel. (Large preview18)
cel2-reverse-preview-opt19
Reverse aspect of cel. (Large preview20)

Here, we mimic this analog course of through the use of a single immobile background, then shortly displaying a collection of photographs on prime. This provides the phantasm of motion with none actual interpolation. Instead of a collection of pictures although, we’ll concurrently scale back HTTP requests and simplify our keyframes through the use of a single SVG sprite sheet. This method is best for extra complicated shapes and expressive motion than what easy transforms can supply.

Here is the ultimate animation for Technique #P:

See the Pen Step Keyframe Animation with SVG sprite21 by Sarah Drasner (@sdras27225) on CodePen28236.

The drawing on this animation has 21 elements. That may sound like lots, however it’s important that the ratio of drawing per second keep excessive in order that the animation seems clean. Considering that there are 21 drawings over B.8s seconds, we’re fairly near our aim of the usual 12fps. This quantity isn’t arbitrary – previous movie was shot at 24fps, and animators largely thought-about “capturing on twos” (which means one drawing over two frames, or 12fps) the usual for an phantasm of motion. Anything a lot decrease than this, and the animation seems barely uneven.

In order to appropriately place every drawing in every body we might transfer guides round exactly with rulers, however it’s extra environment friendly to automate that process. I’ll exhibit two totally different choices for getting ready your designs: drawing in Illustrator with a template; and drawing in an SVG editor, or on paper body by body and utilizing Grunt to sprite.

Drawing In Illustrator With A Template

First, we determine how huge the animation is and multiply that quantity by 21 in a single path: that’s our artboard measurement. We drag a field round that space and select Object → Path → Split Into Grid. Then we enter the rows we would like (or columns, for those who want to make a horizontal sprite sheet) and click on OK. Then select View → Guides → Make Guides and our template is all set.


A view of A out 21 SVG drawings that make up our sprite sheet.

If you’re drawing immediately in Illustrator, your greatest guess is to put your first drawing inside the first field, copy it into the subsequent field utilizing the alignment line, or shift and drag to maintain it regular. Then slowly pull and reshape elements of the drawing from body to border. With every drawing, copy the final model, transfer it and redraw it barely.

You can even do a screencast of one thing and place every picture within the Illustrator doc and hint it, both via Illustrator’s native hint performance, or with the pen device for a hand-drawn really feel, and extra concise paths.

Obviously, this strategy can be executed in Sketch or some other SVG editor: use the device of your choice.

Once we now have an extended sprite sheet, we export and compress the SVG, and in addition save a replica as PNG that we’ll use as a fallback, and on this case, the fallback will nonetheless animate.

Drawing In An SVG Editor, Or On Paper Frame By Frame And Using Grunticon To Sprite

If you want a hand-drawn look, you’ll be able to draw all of it by hand on paper and scan it. Old animation studios used lightboxes and celluloid sheets so animators might hint their earlier drawings incrementally. You don’t essentially want these supplies to do this method, although. By putting a lamp beneath a glass desk, you’ll be able to simply make a poor man’s lightbox. This set-up shines sufficient mild to be able to see by means of even common opaque copy paper. To create every new body, place a bit of paper or vellum over your final drawing and alter the drawing barely till you’ve gotten a collection. You can then scan this set of drawings and vectorize them.

Alternatively, you possibly can draw each bit body by body, shifting the picture barely every time, and saving each new model to a folder. Just ensure that what you’re initially saving is certainly an SVG and never an .ai (or another) file sort. You can then use Grunticon24 to compress and sprite them routinely. Here’s a great article 25 explaining how to take action. Notably, Grunticon additionally generates a fallback PNG mechanically.

Personally, I assume in case you draw every body by hand, it makes probably the most sense to only make certain the location on every artboard is constant and use Grunticon; however the Illustrator template method has the good thing about permitting you to see all your work directly.

Keeping It Simple

For this animation, I didn’t make the SVG fluid as a result of I purposely designed it to take up the entire display on cellular. Note that there isn’t a want for lots of difficult math and keyframe percentages. All we have to do is take the picture peak, and specify the background-place with that quantity as a destructive integer on the one hundred% keyframe worth:

@keyframes splashit 
        one hundred%  background-place: zero -3046px; 

Then on the splash div, we animate utilizing steps() for the variety of frames we had within the SVG:

.splash 
  background: url(‘splash-sprite2.svg’);
 ...
  animation: splashit M.8s steps(21) infinite;

Using an SVG quite than a PNG provides us the benefit of a crisp picture on all shows, however in fact we’ll nonetheless present a fallback. We use Modernizr to create a category hook on the <html> aspect and may then present a fallback, and nonetheless animate it with the PNG we created:

/* fallback */
.no-svg .splash 
  background: url(‘splash-sprite2.png’);

Technique #O

If you’re taking the steps() worth out of the final animation, you may see one thing fascinating. Instead of making a seamless shifting drawing, it simply rolls by way of the background. We’re going to make use of that to our benefit within the subsequent Pen.

See the Pen SVG Sprite Animation #226 by Sarah Drasner (@sdras27225) on CodePen28236.

First, we make a stroll cycle utilizing the cel/steps drawing method. For enjoyable, I shifted the colour in every body by barely adjusting the hue incrementally to perform a little straightforward guide colour animation. Again, it’s necessary that the steps() and animation-period ratio nonetheless fall across the 12fps vary.

A few sprites within the walkcycle shifting hue barely from body to border.

Then we’ll scroll by means of the remainder of the pictures by animating the background place of the SVG sprite sheet. In order to maintain all the things constant, we’ve made all the background pictures the identical measurement.

To create the impression of fluid linear infinite motion, the three background photographs should be capable of repeat seamlessly on the x-axis in order that once they scroll by way of there are not any hiccups. This might be achieved by making every finish similar, or, on this case, utilizing a picture that’s sparse sufficient that it may utterly movement via.

There are three parallaxed background photographs that don’t embrace the determine. All three share a number of issues in widespread: all of them have the identical width and peak dimensions for consistency, they usually share a standard keyframe worth.

With SCSS, we will @prolong the same pixel area designation:

/*--prolong--*/
.space 
  width: 600px;
  peak: 348px;


.fore, .mid, .bk, .container  @prolong .space; 
layer-illustration-preview-opt29
(Large preview30)

Each aspect makes use of the identical keyframe values, however we set aside their animations with an incremental lower in seconds the additional again their z-index. This yields a pleasant parallax impact.

.fore 
  background: url(‘fore.svg’);
  animation: bk 7s -5s linear infinite;


.mid 
  background: url(‘mid.svg’);
  animation: bk 15s -5s linear infinite;


.bk 
  background: url(‘bkwalk2.svg’);
  animation: bk 20s -5s linear infinite;


@keyframes bk 
  one hundred%  background-place: 200% zero; 

I’ve seen individuals write a number of intervals for this type of animation, however keep in mind, the keyframes will interpolate values for us. We may even keep away from having to designate exact pixel quantities on the scrolling backgrounds (simply in case that quantity modifications in one of many sprite sheets sooner or later) by setting a proportion.

Again, we’ve added null Z transforms, perspective:one thousand;, and backface-visibility:hidden; on all the selectors with animation to allow a little bit of hardware acceleration the place potential, which helps take away jank and maintain our animations fluid. And once more, using destructive delays ensures that the animation is operating from the beginning. All of the SVGs are optimized and have a PNG fallback.

And there you have got it! A full, parallaxed animation with SVG sprites and little or no code.

(ds, il, og)

Footnotes

  1. 1 http://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/
  2. 2 http://responsiveicons.co.uk
  3. 3 https://medium.com/@michaelvillar/improve-the-payment-experience-with-animations-3d1b0a9b810e
  4. 4 ‘http://codepen.io/sdras/pen/xbyopy/’
  5. 5 ‘http://codepen.io/sdras’
  6. 6 ‘http://codepen.io’
  7. 7 http://en.wikipedia.org/wiki/Initial
  8. 8 http://petercollingridge.appspot.com/svg-editor
  9. 9 https://github.com/svg/svgo
  10. 10 http://slides.com/sarasoueidan/styling-animating-svgs-with-css#/34
  11. 11 http://timkadlec.com/2012/04/media-query-asset-downloading-results/
  12. 12 http://sarasoueidan.com/blog/svg-picture/
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel1-bk-large-preview-opt.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel1-bk-large-preview-opt.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel2-guide-large-preview-opt.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel2-guide-large-preview-opt.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel2-large-preview-opt.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel2-large-preview-opt.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel2-reverse-large-preview-opt.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel2-reverse-large-preview-opt.jpg
  21. 21 ‘http://codepen.io/sdras/pen/LEzdea/’
  22. 22 ‘http://codepen.io/sdras’
  23. 23 ‘http://codepen.io’
  24. 24 http://www.grunticon.com
  25. 25 http://css-tricks.com/inline-svg-grunticon-fallback/
  26. 26 ‘http://codepen.io/sdras/pen/azEBEZ/’
  27. 27 ‘http://codepen.io/sdras’
  28. 28 ‘http://codepen.io’
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2015/03/layer-illustration-large-preview-opt.jpg
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2015/03/layer-illustration-large-preview-opt.jpg

The publish A Few Different Ways To Use SVG Sprites In Animation appeared first on Smashing Magazine.



Source link

RICG Responsive Images For WordPress


I recently teamed up with Mat Marquis of the Responsive Images Community Group to help integrate responsive images into the WordPress platform. We decided to refactor a plugin that I had built several months ago, hoping that it would lead to a more useable and performant solution.

After months of pull requests, conversations on Slack and help from WordPress’ core team, we’re finally ready to share what we’ve been working on. You can download and install RICG Responsive Images1 from WordPress’ plugin directory, while keeping track of our development progress on GitHub2.

What Does The Plugin Do?

WordPress hasn’t changed the way it outputs the img tag in quite some time. And although there are plenty of ways to hook into WordPress’ native functions and alter the img snippet, doing so can be overwhelming for beginners and non-theme developers alike. Compound that with the complexity of Picturefill and of the srcset specification, and WordPress users have had few options for implementing a clean and properly functioning responsive images solution.

To solve this problem, we set out to build a plugin that gives users responsive images as soon as the plugin is installed, with no extra effort needed. No admin setting, media uploading configuration or coding is required. The plugin comes with one dependency3, a polyfill for browsers that don’t yet support native responsive images. Removing this file is completely optional and will not affect the functionality of the plugin, as long as the user has a modern browser.

As soon as an image is uploaded through the media interface, WordPress automatically creates three variations of the image at different sizes. When the plugin is activated, adding “Featured” and content images to a post will return WordPress’ standard image markup, with an added srcset attribute4. We’re using the srcset attribute because it’s the easiest attribute for both developers and users to add. While the picture element provides the user with a richer set of options5, we felt that the srcset attribute makes the most sense as an out-of-the-box solution. It’s also best to use when you’re focusing on resolution-switching more than art direction6 (more on that later in the article).

<a href="http://ricg.dev/wp-content/uploads/2015/01/image.jpg"><img class="alignnone size-full wp-image-6" src="http://ricg.dev/wp-content/uploads/2015/01/image.jpg" srcset="http://ricg.dev/wp-content/uploads/2015/01/image-150x150.jpg 150w, http://ricg.dev/wp-content/uploads/2015/01/image-300x300.jpg 300w, http://ricg.dev/wp-content/uploads/2015/01/image-1024x1024.jpg 1024w, http://ricg.dev/wp-content/uploads/2015/01/image.jpg 1800w" alt="a cool responsive image" width="1800" height="1800"></a>

The plugin is designed to be backwards-compatible, meaning that images added before the plugin was installed will be responsive when added to a post or “Featured Image” section. This is because it uses the image sizes previously defined by WordPress and the active theme’s functions.php file. The image ratio will be maintained throughout the srcset array, meaning that images differing from the aspect ratio of the initial uploaded image will be left out.

Theme developers can use the plugin to place responsive images wherever they’d like by using the tevkori_get_srcset_string() function, which takes an image’s ID and size as parameters.

<img src="myimg.png" <?php echo tevkori_get_srcset_string( 11, 'medium' ); ?> />

There’s also a tevkori_get_srcset_array() function that takes the same parameters and returns an array of srcset values for the specified image.

How Does The Plugin Work?

Most of the functionality happens when an image is dropped into WordPress’ WYSIWYG editor. Because all of the resized images will have been created during the uploading process, the only thing left to do is create an array containing the URLs of the available images in various sizes, as well as their dimensions. This array is then filtered to remove the image sizes with aspect ratios that don’t match the ratio of the full-sized image.

The array is created by calling the wp_get_attachment_image_src() function and storing the results. At the same time, we use wp_get_attachment_metadata() to retrieve the same results but for every possible variation of the image. Next, the ratio is calculated by multiplying each image’s width by the result of the initial image’s height divided by the initial image’s width. If that result matches the initial image’s height, then the image will be pushed into the final array, to be returned by the tevkori_get_srcset_array() function.

The tevkori_get_srcset_string() function calls tevkori_get_srcset_array() and places the result inside of the srcset attribute. A filter is applied to the image_send_to_editor function, where a regular expression is used to place the result of the tevkori_get_srcset_string() function directly after the src attribute in the image. The same process occurs for featured images, with a filter being applied to the post_thumbnail_html function.

If the image size is changed in the post’s editor, then the plugin will detect the change and update the srcset value accordingly. This ensures that the correct image ratio is always maintained. To enable this functionality, we’re using JavaScript to hook into the wp.media object7 and recalculating the srcset attribute by running the same image-ratio calculations defined in tevkori_get_srcset_array(). Before starting on this project, I was unaware of the wp.media object and its useful functionality. Because not much documentation for it exists, explaining in detail how we’re using it might be helpful. As it turns out, you can listen for an image-update event in the post’s editor by adding an event listener to the wp.media object.

wp.media.events.on( 'editor:image-update', function( args ) 
  var image = args.image;
  //more function logic
);

With this function, a theme developer can access every image as soon as it has been updated in the post’s editor. You can also take advantage of Underscore8, which is used as a dependency by the media uploader to edit image data on the fly. In the case of our plugin, we’re using a helpful Underscore utility to get our image-size ratios once the editor:image-update event has been fired.

// Grab all of the sizes that match our target ratio and add them to our srcset array.
_.each(sizes, function(size)
  var softHeight = Math.round( size.width * metadata.height / metadata.width );

  // If the height is within 1 integer of the expected height, let it pass.
  if ( size.height >= softHeight - 1 && size.height <= softHeight + 1  ) 
    srcsetGroup.push(size.url + ' ' + size.width + 'w');
  
);

To learn more about how we hook into the wp.media object, be sure to look at the code in wp-tevko-responsive-images.js9.

The sizes Attribute

Currently, this plugin doesn’t add a sizes attribute10 to complement the srcset attribute. The reason is that we initially recognized that we could never predict what those sizes would need to be, because they depend on how the user’s theme is styled. While we are working on a solution to this issue, we’re encouraging all users to include a sizes attribute on their own, either manually or via another WordPress plugin, such as wp-lazysizes11. One thing to note is that the responsive images specification has recently changed, and use of the w descriptor must now be followed by a sizes attribute. Omitting the sizes attribute will render the markup technically invalid, while still falling back to a default size of 100vh.

What About Features X, Y And Z?

While much more can be done with responsive images, you’ve probably noticed a few use cases that this plugin doesn’t cover. The first thing that we’re usually asked about is a feature for art direction. Art direction refers to loading differently styled images at different breakpoints — whether that means entirely new images or the same image cropped or focused differently. This feature would require use of the picture element, which in turn would mean a lot more markup to generate the final image.

Adding this feature to WordPress would be impossible without the addition of a fairly complicated interface in WordPress’ media uploader, because the user would need to be able to define all breakpoints and then select images to be loaded in when those breakpoints are reached. Our goal for this plugin is to allow for a basic implementation of responsive images, with absolutely no configuration needed by the user. So, we’ve decided to omit this feature. We will, however, do our best to allow art direction to work side by side with our plugin as we expand the API for theme developers.

Lazy-loading and image compression are two other features that we have no plans to implement, simply because they fall beyond the scope of a more or less “default” solution for responsive images. Again, we aim to make the addition of these features possible for theme developers who use our plugin via a feature-rich API.

What’s Next?

While the plugin is available for everyone to download and install, we’re actively working to make it better. So, users can expect frequent updates, resolved issues and an all-around better functioning plugin as time goes on. We’re planning to add more features, such as the sizes attribute and hooks that allow theme developers to further customize the plugin.

Another feature we have yet to consider is ratio descriptors like 2x and 3x for “Retina” use cases. Better documentation and support are coming soon as well. Eventually, we’d like to see this plugin become a part of WordPress’ core, which means that it will stay minimalist, admin-less and easy to use.

(il, al, ml)

Footnotes

  1. 1 https://wordpress.org/plugins/ricg-responsive-images/
  2. 2 https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images
  3. 3 http://scottjehl.github.io/picturefill/
  4. 4 http://www.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/
  5. 5 http://alistapart.com/article/responsive-images-in-practice#section4
  6. 6 http://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
  7. 7 http://codex.wordpress.org/Javascript_Reference/wp.media
  8. 8 http://underscorejs.org/
  9. 9 https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images/blob/master/js/wp-tevko-responsive-images.js
  10. 10 http://ericportis.com/posts/2014/srcset-sizes/#part-2
  11. 11 https://github.com/aFarkas/wp-lazysizes

The post RICG Responsive Images For WordPress appeared first on Smashing Magazine.



Source link

Design Last


How does one design and develop for the responsive web? A lot of methodologies out there try to tackle this problem, but all of them rely on the same classic website development process. It boils down to the following: design and then develop. Let’s go nuts and flip this outdated methodology on its head.

Before we start flipping things around, let’s take a quick stroll down memory lane, just so we know where we’ve come from and where we are now.

History

It’s 1989, and Tim Berners-Lee, the man with the plan, conjures up HTML while working at CERN. It’s a language to link content across documents.

After four years, the Web went public, in 1993. It took a couple of years for someone to create the first columned layout using a table — at which point, something changed. I imagine this as being a turning point in web development. It was the moment when design could be moved to the front of the development process. You could now design a web page, slice it up and present it on the Web.

Luckily, we regained our sanity and ditched tables for layout. We proudly moved to semantic HTML, but we held on to our design-first approach. Let’s take a closer look at semantic HTML.

Semantic HTML

Semantic HTML is about picking the right HTML element to describe a given piece of information, rather than using HTML to define the way the information should look. If you’re a front-end developer, you’ve probably been doing this for the past couple of years. Great, keep it up!

In my opinion, writing semantic HTML is one of the key aspects of being a good front-end developer. It’s something I value greatly.

Because of that, it’s been a topic I’ve discussed a lot with colleagues who have valued it less or simply did not understand. To resolve these debates once and for all, I tried to give them a glimpse of the thought process behind my HTML writing.

I looked up a straightforward website and derived its HTML structure (without looking at the HTML, which would have been cheating). Then, I turned my HTML thought process into a step-by-step visualization. For many of my colleagues, this visualization turned out to be a real eye-opener. These couple of visuals created mutual understanding of what a front-end developer does and why semantic HTML is important. Also, interestingly, it revealed that not all front-end developers view semantic HTML in the same light.

Below is the website I used in the thought process experiment.

01-dunnelon-opt

I’ve laid out the thought process below. On the left side is my view of the website. On the right is the written HTML as rendered in the browser. OK, let’s do this!

  1. In my opinion, this landing page serves as an umbrella for all subpages. So, I’ll wrap the logo in an h1. I’ll add an img tag as well, so that the logo displays when printed.
    02-dunnelon-analysis-1-opt
  2. All right, next up is the menu. I’m putting it at the top because this is a landing page. Also, let’s handle caps with CSS text-transform. I’ll wrap the menu in a nav and add a mandatory h1 called “Navigation” inside. Also, we’ll add an ordinary unordered list, with anchors as links to the other pages.
    03-dunnelon-analysis-2-opt
  3. Is this image showing a train actually content? And should we, therefore, use an img tag? Or is it aesthetic, meaning we should handle it in CSS using background-image? I’m going with aesthetic, which means it won’t end up in the HTML outline.
    04-dunnelon-analysis-3-opt
  4. What type of content is that white text below the image? What should I name it? How about “Introduction” — I’m not 100% sure, though. I’ll add an “Introduction” heading and hide it with CSS later on. This heading might be useful for screenreaders as well.
    05-dunnelon-analysis-4-opt
  5. Wait a minute! That blue “Join us today” button is related to the introductory paragraph (“… if you joined us”). Also, it’s not a button but a link. I’m setting myself up for a CSS positioning nightmare.
    06-dunnelon-analysis-5-opt
  6. At this point, I don’t know what to do with the “Book an event” button. It’s not related to “Join us today,” that’s for sure. It’s a button without context. I’ll just skip it for now.
    07-dunnelon-analysis-6-opt
  7. Finally, some straightforward content: headings, paragraphs and links. To position them, we might need to wrap some of these in a div later on.
    08-dunnelon-analysis-7-opt
  8. On to the events! Let’s go for an ordered list because shuffling the dates would be confusing. We’ll use the time element for dates and times. Let’s wrap a link around the subheading.
    09-dunnelon-analysis-8-opt
  9. Now we know where the “Book an event” button should go. People need to know about upcoming events before they can book one — makes sense. So, we’ll put the button with the events making our CSS positioning nightmare even worse.
    10-dunnelon-analysis-9-opt

Below is the resulting HTML.

<h1>Greater Dunnellon Historical Society</h1>
?<nav>?    
   <h2>Navigation</h2>?
   <ul>?
      <li><a href="/">Home</a></li>?        
      …    
   </ul>
?</nav>

?<main>??
   <h2>Introduction</h2>?
   <p>We’ve come together … if you joined us.</p>?
   <a href="/">Join us today</a>??

   <h2>A commitment to our history</h2>?
   <p>The Greater Dunnellon … in its heyday.</p>??

   <h3>Learn about Dunnelon's history</h3>?
   <p>Dunnellon was platted … South Williams Street.</p>?
   <a href="/">More history</a>??

   <h3>Your next event at the depot</h3>?
   <p>The depot provides … are also available.</p>?
   <a href="/">Make a reservation</a>??

   <article>??
      <h2>Upcoming events</h2>?
      <ol>?
         <li>?
            <h3><a href="/">Museum open Tuesdays</a></h3>?
            <dl>?
               <dt>Date</dt>?
               <dd><time>01/21/2015 from 11:00 am</time> to <time>4:00 pm</time></dd>?
            </dl>?
            <p>Learn, teach and share history with Boomtown Sam!</p>?
         </li>??           
         …??        
      </ol>??
      <a href="/">Book an event</a>??   
   </article>??
</main>

You probably noticed that I’ve made a lot of assumptions in order to come up with the HTML structure above. The introductory paragraph heading, the banner image and the call-to-action buttons — these were all places where I assumed something and added to or altered information on the page.

I’ve also made assumptions about where to position things on the page. In deriving semantic meaning from textual data, I’ve assumed that the visual designer intended to give information on the right side a lower priority than information on the left. Based of these assumptions, “Upcoming events” ended up below “A commitment to our history.” I put the navigation above “Introduction,” although it might have been better the other way around.

Assumptions are dangerous, not only because one could assume incorrectly, but also because somebody else will most likely assume differently. In this case, if you and I had independently written an HTML tree based on the design above, it would have been a miracle if they turned out the same.

HTML is about giving meaning to information. We should not end up with different descriptions of the same information. It seems that design clouds the meaning of the content and creates room for interpretation and assumption.

Content First

A content-first1 approach teaches us that visual design should always be based on actual content. Only with real content can we decide how best to present it to users. We’ll get to what “real” means in a minute.

With a content-first approach, we move from designing without content to designing based on content — a very important distinction. Remember the definition of semantic HTML: giving meaning to content.

11-design-html-content-opt

Semantic HTML has no relation to appearance — that’s what CSS is for. Why put off the HTML until after the design phase if it doesn’t depend on the appearance? Let’s move it to the front and describe our content before designing it.

12-content-design-html-opt

It’s a small change, but it makes a big difference. With this change, all assumption is taken out of the equation. We now know how our content will be structured. And before even drawing a pixel, we’ve got ourselves a website.

Do you hear that? That’s the sound of screenreader users celebrating.

Flipping It

Let’s go back to the slides. This time, we’ll do it the other way around. We’ll use the HTML that we’ve just written and imagine a designer using it for their visual design.

13-dunnelon-after-opt-small2

(View large version3)

It’s difficult to imagine the call-to-action buttons ending up where they were in the original design. In terms of visuals but also content, this new setup makes a lot more sense.

When we were basing the HTML on the initial visual design, we could use the visuals for one viewport only. By turning things around and basing the design on the HTML, we can use the HTML for all possible viewports and contexts.

Reality Calling

If I’ve piqued your interest, you might be wondering how to implement this approach in an actual project. Depending on the project, your team and your client, it might look something like the following.

Because we’re doing things content-first, we need to get our hands on the client’s content. Mark Boulton4 rightly points out that content-first is not about waiting for the final content before doing anything. When we talk about content-first, we mean that we want to know the structure of the content that we’re designing for. Having the final content already in hand would be fantastic, but most of the time it simply is not. In “Structure First. Content Always5,” Boulton says:

You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure.

In my experience, this is true, and making sure everyone knows what “content first” means is important. So, make sure everyone understands that you’re talking about structure and that you don’t mean to pause the project and wait for the client to deliver the final content.

Before we start writing HTML, we need to determine what content to present on the page and how to prioritize it. This is where a priority guide comes in handy. Together with your client, write down all of the content types of your web pages on sticky notes, and then order them chronologically along the y-axis. For example, you could have a “product detail” sticky and a “post a review” sticky, and because someone would need to know about a product before reviewing it, “product detail” should come first. Your client might deem the “post a review” box to be more important, but that importance could be visualized later using color and composition, not by changing the order of content.

I find that clients are pretty good at this exercise, maybe because they are used to writing documents such as quotes and writing papers that must adhere to a certain hierarchy and chronological order to make sense. As I said, this exercise makes them really think about what’s important. Also, if there are multiple stakeholders, it shows how each is motivated and which stakeholders have the most influence.

We’ve set up our content types; let’s talk about content structure. Structuring content is exactly what HTML is good for. Let’s go for it. We’ve got our content types, and we understand semantic HTML, so let’s start adding structure to the various content types. This could be easy or challenging, depending on how high-level your content types are.

A basic “post a review” form could be pretty straightforward:

<form>??
   <fieldset>?
      <legend>Rating</legend>??
      <label><input type="radio"/> 1</label>?
      <label><input type="radio"/> 2</label>?
      <label><input type="radio"/> 3</label>?
      <label><input type="radio"/> 4</label>?
      <label><input type="radio"/> 5</label>??
   </fieldset>??
   <label>Review</label>?
   <textarea></textarea>??
   <button type="submit">Send</button>??
</form>

The “product detail” sticky might be a bit more challenging. In its most minimal form, it could be just a “title,” “image” and “short paragraph.” But your client might also want things in there like “product specifications,” “ordering options,” “related products,” etc. These other content types require further discussion and prioritization. In the end, you might conclude that “post a review” is actually a part of “product detail” because people will be posting a review of the product described in “product detail.”

<article>?
   <h1>MacBook Pro</h1>??
   <img src="macbook-pro.jpg"/>??
   <p>A groundbreaking Retina display. All-flash architecture. Fourth-generation Intel processors. Remarkably thin and light 13?inch and 15?inch designs. Together, these features take the notebook to a place it’s never been. And they’ll do the same for everything you create with it.</p>??
   
   <section>
      <h1>Post a Review</h1>
?       <!-- 'post review' module here -->
?    </section>??
</article>

These content types don’t stand on their own. They should be contained in an overall content hierarchy, as we saw in the series of images related to semantic HTML earlier. Together with this hierarchy, your content types should create a nice and correct HTML5 sectioning outline6. To test this, you can copy your HTML to the HTML5 Outliner7.

Below is an example of an initial web page setup.

14-setup-content-opt
Visual of initial web page setup

Now, we could have also done a bit of content choreography8 to make sure each bit of content receives the right amount of attention from the user. In his excellent book Responsive Design Workflow9, Stephan Hay10 advises us to set up content reference wireframes at this point. In my opinion this would be a bit too early — it’s best to wait a bit longer on the composition, because color, typography and functionality will affect the way attention is distributed across the page.

Let’s continue with our basic HTML web page. Don’t show it to your client yet; mix in their brand identity first. Add their logo, and convert their typography rules and color schemes to CSS. This will make it easier for your client to identify with the content — the content will look less anonymous and more like their own.

15-setup-brand-opt

While your client would be able to relate to the version shown above, they would probably have a hard time getting enthusiastic about it. In my experience, the client will be impressed with the amount of work done but will feel uncomfortable not knowing what the result will look like. I recently renovated my house, and I have to admit, after totally stripping it, taking down walls and removing old plumbing and electricity, I seriously doubted whether it would come together in the end. That’s when I understood how my clients feel.

You need to manage that feeling or else they’ll panic and fall back to the classic web development pattern, demanding design up front.

The version above is the “minimum viable web page.” It contains, if all has gone according to plan, the core content that your client’s users will be coming to the web page for.

If you’ve been using actual content, then even if all hell breaks loose, you could put this online as is. It wouldn’t be perfect, but the brand would be recognizable, and users would be able to access the information.

For now, hell is not breaking loose. So let’s move to the content choreography. Start resizing the browser window and view the page on some different devices. You’ll notice that on a wider viewport the line lengths will become uncomfortable to read. An ideal line contains between 45 and 75 characters11. So, you can regard points where it’s longer or shorter than that as indicators to tweak the layout or font size.

You have two options here: either make the adjustments live in the browser or boot up your favorite design tool. In my experience, designing in the browser is useful for tweaking things such as font size and color, while composition experiments are easier to do in Sketch or Photoshop or using pen and paper.

Tweaking CSS values in the browser might be tempting, but taking a screenshot and making some quick adjustments outside of the browser is usually faster. I find this results in more interesting design choices. When sketching, try to imagine how your solution would scale or break in smaller and bigger viewports and how your design choices relate to the content’s order and importance.

When you’re happy with the sketches, transform the result to CSS.

16-setup-composition-opt

Now that we have set up the base version of the web page, we can start testing and iterating. Do some quick usability tests, which you can easily do by following the Don’t Make Me Think12 methodology. Sometimes creating a small prototype for this is easier than using the production version.

While tweaking the web page for each context, we can look into adding functionality and presentation styles based on contextual measurements13. For instance, in small viewports, we could move the menu out of view. Or when the user is viewing the web page late at night in a dimly lit environment14, we could load a style sheet with inverted colors. If enough real estate is available, we could turn an address into a Google Map.

17-setup-respond-opt

If you look closely, you’ll notice that all of these enhancements are layered on top of the content. They only change the way the content is presented and interacted with; they never change the content (or priority of content) itself. This fits perfectly with a strategy of progressive enhancement: Start with the content, and work from there.

We’ll finish up this section with a short note about web applications. The methodology explained above is for content-driven web pages — pages that are and should be accessible to everyone in all contexts. Not all web applications fit this description. Many use HTML to describe the interface instead of the content. In these cases, this methodology might not be the best fit.

Advantages Over Design-First Approach

I’ve compiled a list of the challenges overcome and the advantages gained by this approach. Not to say that this approach does not introduce new challenges, but those new challenges mostly have to do with managing client expectations and team communication.

To the list!

  • Content — and, therefore, HTML — is the only constant across all devices. How you present your content and how users interact with it will differ between devices, but the content will remain the same. Starting with content means starting with everyone.
  • Describing content with HTML is not only about lists, paragraphs and headings. It’s also about choosing between buttons and links, dropdown and radio buttons, tables and definition lists. It’s about outlining all functionality with HTML first.
  • With the content nailed down, there’s less confusion about what things actually are. Something could look like a button in a visual design but in reality be a hyperlink. This creates miscommunication in a team, which is easily prevented by writing HTML first.
  • Because we’ve layered design on top of HTML, we have created an opportunity for the team to work together. Developers can work on implementing the HTML, while designers can think of compositions for various viewports and contexts. No more deliverable dependencies means no more tiny secret waterfalls.
  • This methodology enables designers to work concurrently with their developer buddies, allowing them to quickly test things in the browser. Some design problems might be easier to tackle in CSS. As Paul Boag explains15: “Developers might suggest ideas that you might have dismissed as impossible.”
  • It’s now clear what content should be generated or be manageable via the CMS. Hidden skip links, headers and labels are no longer hidden — all content is right there in plain sight. Design choices can now make content implicit, but that does not mean the content won’t end up in the HTML, because we’ve already written it. In my experience, none of these implicit content items end up in the CMS because they aren’t visible to everyone. By starting with HTML, this is easily resolved.
  • If you and the client have pinned down what content you want to communicate to users, that will very likely not change during the development process. A change would only happen if user research uncovers some previously unknown facts that warrant a change in course.
  • Content creates focus. By focusing on content and functionality early on in the process, you’re less likely to end up in a “red or blue?” discussion with the client. Too often clients are tempted to focus on details when they should be thinking of the big picture. With this layered setup, the focus starts with the big picture and then moves to the details during the project.
  • Having the HTML early on enables you to build the minimum viable product first. In later stages of the project, you can progressively enhance it to further improve the user experience. If you introduce usability testing in the project (which you should), you can use the results to decide what to enhance first. An asynchronous search filtering system might be cool, but your users might value other functionality more. Harry Roberts reminds us16 that “good enough” today is better than “perfect” tomorrow.
  • As we saw with the call-to-action buttons in the semantic HTML exercise, spotting user experience problems is easier when you’re working with content as the foundation.
  • Once you’ve finished the HTML, you can immediately start testing the content with visually impaired users. Most of the additional layering will be for the sighted.
  • Starting with content enables you to more easily define your HTML5 sectioning outline, to pick micro-formats17 or micro-data18 and to apply WAI-ARIA rules19. This results in better accessibility and makes the pages easier to index by search bots.
  • This approach entails going from a robust stable base to a very detailed flexible end product. By staying away from highly detailed solutions early on, you decrease the risk of putting a lot of hours into unneeded functionality. For example, you could build synchronous search first, and then later on in the project, if your user base turns out to heavily favor search, you could layer asynchronous search and filtering on top of it.
  • A correctly written HTML tree provides natural hooks for JavaScript later on. Content under headings could be made visible in large viewports and then presented in an accordion in smaller ones.
  • No longer are you creating pretty pictures of web pages. The focus has moved to quick sketches and tiny prototypes to solve design challenges, and the results are quickly transformed in CSS and moved to the browser. We’re throwing away fewer deliverables, which means we’re working more efficiently.

Talk To Your Client

As with everything, it’s all about communication.

If your client thinks the Web is a 1024 × 768-pixel box — and continues thinking this while you and your team are working on their shiny new website — then you’re going to run into a lot of trouble.

Many clients expect a visual design up front, because that’s what they’re used to getting. They don’t know any better.

Your job — not an easy one — is to explain to them why this is impossible. Enlighten them about the millions of different viewports, interaction methods and feature sets out there, and help them understand that you cannot capture all of that in a static design.

If your client understands the Web, you’ve won half the battle.

(vf, il, al, ml)

Footnotes

  1. 1 https://adactio.com/journal/4523
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2015/02/13-dunnelon-after-opt.jpg
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2015/02/13-dunnelon-after-opt.jpg
  4. 4 https://twitter.com/markboulton
  5. 5 http://www.markboulton.co.uk/journal/structure-first-content-always
  6. 6 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document
  7. 7 https://gsnedders.html5.org/outliner/
  8. 8 http://trentwalton.com/2011/07/14/content-choreography/
  9. 9 http://responsivedesignworkflow.com
  10. 10 https://twitter.com/stephenhay
  11. 11 http://nerd.vasilis.nl/ideal-measure-web/
  12. 12 http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758
  13. 13 http://conditionerjs.com
  14. 14 https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent
  15. 15 http://www.smashingmagazine.com/2014/11/21/why-you-should-include-your-developer-in-the-design-process/
  16. 16 https://speakerdeck.com/csswizardry/ten-principles-for-effective-front-end-development?slide=21
  17. 17 http://microformats.org
  18. 18 http://html5doctor.com/microdata/
  19. 19 http://www.smashingmagazine.com/2014/07/09/the-wai-forward/

The post Design Last appeared first on Smashing Magazine.



Source link

Skutt Catholic

92 West was contacted by Skutt Catholic High School in November of 2013 and was looking for an update to their existing website with responsive design / development in mind.  We set out to create a fundamentally simple way to incorporate all their existing content (over 300 pages) into an easily learned content management system; ExpressionEngine.

The results speak for themselves.  We combined over 20 different departments into seven template (publishing) groups which allows the administration freedom to post content in a variety of ways while keeping the content editing simple and standard across the platform.  Please check out http://www.skuttcatholic.com and tell us your thoughts on this new, responsive, CMS driven website.

Software:
ExpressionEngine, NavEE, Editor, Channel Images, Channel Video, Forms, SuperSearch, LowSearch, Password Manager and SEO Lite.

92 West | We’re in the Ideas Business

13504 Stevens Street
Suite C
Omaha, Nebraska 68137
t. 402.620.2633
http://www.92west.com

92 West‘s Portfolio & Advertising / Marketing Services:

Logo Design | Graphic Design | Web Design / Web Development | Photography | Search Engine Optimization