‘Responsive Design’ Videos

  • Hans Paul: Small talk: Dicas para projetar um site Responsivo de qualidade com Hans Paul

    WordCamp Rio de Janeiro 2015Speaker: Hans Paul

    June 24, 2016 — Small talk com tópicos importantes no Design Responsivo a estrutura e o uso condicional de imagens. Quanto a estrutura o foco foi o uso de uma grid para facilitar a divisão de regiões.

    Sobre as imagens, um pouco sobre a recursos do HTML 5 que permitem carregar imagens de acordo com o dispositivo do usuário e alguns bons exemplos de sites responsivos.

    Presentation Slides »

  • Bernhard Kau: Better Themes with Scalable Vector Graphics (SVG)

    WordCamp Nuremberg 2016Speaker: Bernhard Kau

    April 21, 2016 — A responsive design has become a standard of modern WordPress theme. But not only the content of a website has to be optimized for the mobile screen. The theme should also provide high resolution images and icons. Using SVG images here is usually the best way to accomplish this goal. This session will give a brief overview on how you can utilize Scalable Vector Graphics.

    Presentation Slides »

  • Piero Bellomo: Responsive Images – Beyond max-width: 100%

    WordCamp Torino 2016Speaker: Piero Bellomo

    April 5, 2016 — Through a series of increasingly complex requests from an imaginary, albeit very demanding client, we will review the most effective methods of rendering truly responsive images, and learn how to embed them — right from the start — in your WordPress workflow. You will walk away safe in the knowledge you own all the right tools to achieve bulletproof responsive art-directed seo-friendly lazy-loading images. (phew!)

    Presentation Slides »

  • Toru Miki: レスポンシブ・イメージのWordPressへの実装と4.4

    WordCamp Tokyo 2015Speaker: Toru Miki

    January 20, 2016 — Ethan Marcotte 氏がレスポンシブ・ウェブデザインを提唱して5年以上経ちますが、未だ完全な解決策が無い問題として「レスポンシブ・ウェブデザインにおける画像(レスポンシブ・イメージ)の問題」があります。


    しかし、ようやく、最近になって解決への道しるべが作られてきています。picture 要素や srcset 属性などのレスポンシブ・イメージを実現する仕様が含まれるHTML 5.1が草案(Working Draft)となり、多くのブラウザでも対応が進んでいます。

    このセッションでは、RICG Responsive Images プラグインと、このプラグインの 4.4 へのマージについてお話し、srcset 属性と sizes 属性の WordPress へのネイティブ実装をどのように実現するかご紹介します。

    注:時間の都合上、レスポンシブ・イメージの詳細な仕様は紹介しません。srcset 属性と sizes 属性についておさらいしておくことをオススメします。

    Presentation Slides »

  • Anthony Laurence: The Next Step in Responsive Design – RESS

    WordCamp Scranton 2015Speaker: Anthony Laurence

    August 5, 2015 — We all know about Responsive Design. But most mainstream techniques rely on the browser to call the shots and determine what and how the content gets displayed, typically using media queries. This reliance can be taxing to poor, overworked devices. Doesn’t it make more sense to let the server, with it’s beefier processors, compile the page and send the content to the device so that the page is lighting fast regardless of the device? This is where RESS(Server Side Responsive) steps in. Learn how this is different from what you thought of as responsive design as well as techniques that you can use right away to significantly reduce your render time.

    Presentation Slides »

  • Mat Marquis: Smaller, Faster Websites

    WordCamp Boston 2015Speaker: Mat Marquis

    July 28, 2015 — Mat Marquis shares the tools and techniques that ensure that your content will reach your most demanding (and least powerfully equipped) users, without detracting from the experience of users on the latest and greatest devices—without limiting the creativity of your team, and without a massively inflated deadline. We discuss strategies for smarter asset delivery, techniques for avoiding potential points of failure, and start to cultivate development habits that help us deal with a vast landscape of unknowns from the very start of a project.

  • Tammie Lister: Mighty Morphing Design

    WordCamp Europe 2015Speaker: Tammie Lister

    July 10, 2015 — Beyond the land of responsive design lies the world of adaptive experiences. Where not only does your site work well on different screen sizes, it adapts to them. Mighty morphing design works on any device, in any place. Yet it goes beyond that, these are designs that optimise, reduce and change depending on the device you are using. It’s beyond just popping a sidebar below the content and calling it responsive. Mighty morphing design is the way we should and need to be designing. In this talk I’ll show you what it is and show you how you can become a mighty morphing designer.

  • Morten Rand-Hendriksen: Designing for Informational User Experiences – A Responsive Web Design Workflow

    WordCamp Miami 2015Speaker: Morten Rand-Hendriksen

    June 25, 2015 — This talk introduces the audience to the Informational User Experience design process. Through examples from the web, practical demonstrations, and tips and tricks gleaned from 15 years in the industry, Morten gives the audience a foundation of knowledge that will help them see beyond frameworks, grids, and media queries to what really matters: Communicating ideas through the web.

    Presentation Slides »

  • Bruce Lawson: (Picture) and Friends – HTML Responsive Images

    WordCamp London 2015Speaker: Bruce Lawson

    May 30, 2015 — Amaze your friends, confound your enemies! Oh, and save bandwidth and speed up your site by sending the correctly-sized images for the device with HTML’s new responsive images capabilities.

    Presentation Slides »

  • Jenny Munn: SEO for 2015 – What’s In, What’s Out and How to Be In It to Win It (For Good)

    WordCamp Atlanta 2015Speaker: Jenny Munn

    April 17, 2015 — Sure you can piecemeal SEO tactics together, but do you really know what it takes to win the SEO game in 2015 and beyond? In this workshop we’ll discuss the latest and greatest with organic search engine optimization, as well as how to roll up your sleeves and understand the strategy that goes beyond just “have a fast website,” “be mobile responsive” and “work your keywords into the copy.”

    Presentation Slides »