SlideShare a Scribd company logo
CHRISTOPHER SCHMITT             @teleject




ADAPTIVE IMAGES
IN RESPONSIVE WEB DESIGN

            CSS DEV CONF 2012
[cssdevconf] Adaptive Images in RWD
WHY DON’T WE ASK
THE BROWSER?

             (cc) flic.kr/p/vUBHv
Mozilla/1.0 (Win3.1)

http://www.useragentstring.com/




                                  (cc) flic.kr/p/vUBHv

Recommended for you

Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast

This document discusses strategies for improving website performance. It begins by showing examples of slow loading pages and notes that responsive web design (RWD) does not inherently improve performance—proper implementation is important. Several tips for optimizing performance are provided, such as concatenating files, minifying code, compressing images, using responsive images, optimizing font and image sizes, and inlining critical CSS. The document also covers topics like bandwidth versus latency, measuring performance, and how HTTP/2 may impact current best practices. The overarching message is that performance should be a priority considered throughout the design and development process.

wporwdperformance
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement

Responsive Webdesign is much more than squishing containers and setting breakpoints. Performance is often a big problem. How to achieve performance with progressive enhancement, conditional loading and RESS. Original Slideshow: http://maddesigns.de/responsive-enhancement/

rwdresponsive web designress
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design

Slides from my talk at HTML5tx 2013. Thanks to all the staff and volunteers at HTML5tx for putting on the event!

mobilemobile webrwdimg
Mozilla/1.0 (Win3.1)
Mozilla/1.22 (compatible;
MSIE 2.0; Windows 95)
http://www.useragentstring.com/




                                  (cc) flic.kr/p/vUBHv
Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
http://www.useragentstring.com/




                                  (cc) flic.kr/p/vUBHv
Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
http://webaim.org/blog/user-agent-string-history/




                                     (cc) flic.kr/p/vUBHv
FEATURE TESTING
vs. BROWSER SNIFFING

1

2

3

Recommended for you

Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings

HTML5 is all the rage with the cool kids, and although there’s a lot of focus on the new language, there’s plenty for web app developers with new JavaScript APIs both in the HTML5 spec and separated out as their own W3C specifications. This session will take you through demos and code and show off some of the outright crazy bleeding edge demos that are being produced today using the new JavaScript APIs. But it’s not all pie in the sky – plenty is useful today, some even in Internet Explorer!

html5 javascript api
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0

This document summarizes a webinar about WebRTC standards hosted by Jan-Ivar Bruaroey of Mozilla. The webinar discussed the getDisplayMedia specification for screen sharing, constraints for downscaling shared screens, and security considerations for sharing full screens and browser tabs. It also covered the history of screen sharing in browsers, implementation status across browsers, and questions about supporting audio with screen sharing and handling requests from iframes.

privacywebrtcwebrtc standards
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile webFINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web

This document summarizes Max Firtman's presentation on breaking limits with HTML5 on mobile. The presentation covered hacks for improving the user interface, such as making the screen full screen, supporting high resolution canvases, and handling different screen densities. It also discussed hacks for enhancing device interaction like accessing the device's camera and notifications. Finally, it provided ways to enhance apps through tricks like customizing the home screen title and live tiles. The overall presentation focused on pushing the boundaries of HTML5's capabilities on mobile through creative coding techniques.

FEATURE TESTING
vs. BROWSER SNIFFING

1    Browser width

2

3
A scripting approach
        var myWidth = 0, myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
          //Non-IE
          myWidth = window.innerWidth;
          myHeight = window.innerHeight;
        } else if( document.documentElement &&
          ( document.documentElement.clientWidth ||
          document.documentElement.clientHeight ) ) {
          //IE 6+ in 'standards compliant mode'
          myWidth = document.documentElement.clientWidth;
          myHeight = document.documentElement.clientHeight;
        }


http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
The jQuery approach
       // returns width of browser viewport
       $(window).width();
       // returns height of browser viewport
       $(window).height();

       // returns width of HTML document
       $(document).width();
       // returns height of HTML document
       $(document).height();


http://api.jquery.com/width/ & http://api.jquery.com/height/
CSS media queries
// default, mobile-1st CSS rules devices go here

@media screen and (min-width: 480px) { ... }

@media screen and (min-width: 600px) { ... }

@media screen and (min-width: 768px) { ... }

@media screen and (min-width: 910px) { ... }

Recommended for you

Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta

Internet Explorer 9 provides major improvements in performance, standards support, and developer tools. It features a new JavaScript engine called Chakra that compiles JavaScript in the background for faster execution. IE9 supports HTML5 features like <canvas>, <video>, and <audio> with hardware acceleration for smooth playback. It also has full support for Scalable Vector Graphics (SVG) and WOFF web fonts. CSS3 features like rounded corners, shadows, gradients, and new color functions are implemented. The developer tools have been enhanced with tools for network inspection, debugging JavaScript, and viewing SVG. IE9 aims to be faster, cleaner, standards-compliant through same markup across browsers, and utilize the full power of users' hardware.

HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...

This document discusses new multimedia capabilities in HTML5, including browser-native <video>, <audio>, and <canvas> elements. It provides examples of how to use these elements to embed video and audio with controls and different formats, access camera feeds, and manipulate image data in the <canvas>. It also addresses concerns about browser support and recommends feature detection rather than browser sniffing for progressive enhancement.

audioweb standardswebrtc
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5

In this, my talk for Webinale in Berlin, June 1st 2011, I give an overview of HTML5 history and main features, relating it all back to how possible it is use develop with these new features today. Thanks to Patrick Lauke for allowing me to steal a lot of his slides ;-)

audiohistorysemantics
(cc) flic.kr/p/8Lo5Gk
BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS
FEATURE TESTING
vs. BROWSER SNIFFING

1    Browser width

2    Screen resolution

3
72            PPI
HAS SERVED US WELL
                (cc) flic.kr/p/6tjjRP

Recommended for you

Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery

The document discusses a screencast on using jQuery for designers, noting that the screencast will cover getting started with jQuery, DOM navigation and manipulation, events, Ajax, and tips. It provides Remy's contact information and encourages asking questions during the screencast. The document also lists various jQuery resources like documentation, blogs, tutorials, and forums for getting help with jQuery.

workshoposcon2011jquery
The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14

Although responsive designs are already state-of-the-art in web development the whole trend still is in its infancy. When it comes to images, a lot of responsive websites just load the same big image on every viewport. Because of this, people judge responsive design as being detrimental to performance. New markup elements like &lt;picture> are in development right now but what are the alternatives, what is the best to use right now, and how do they work? I will lead you through the different techniques and polyfills and show you their pros and cons. After this talk you should be able to choose the best fitting responsive image solution for your project.

responsive designresponsive imagespicturefill
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?

A look at how HTML5 aims to plug the holes that Flash has been filling in browsers for the last decade, looking at both HTML5 and non-HTML5 JavaScript APIs. For Flash Brighton in Feb 2010.

flashbrighton html5 javascript
72 points-per-inch =
72 pixels-per-inch
96            PPI
IF A WINDOWS USER
72 points-per-inch
x [1+(1/3)]
= 96 PPI
“RETINA” DISPLAYS
          300ppi at 12 inches from the eyes
                                              78μm




                                              78μm
goo.gl/zpkFy

Recommended for you

Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraMehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra

Vortrag zum WP Meetup Frankfurt am 14.04.2105 http://wpmeetup-frankfurt.de/2015/wordpress-performance/

wordpressperformancemeetup
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaPuppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania

Puppeteer is a node library which provides a high-level API to control Chrome over the DevTools Protocol. When combined with the power of the web technologies, it can be used for automating image processing and batch file generation, creating automated visual testing with device emulation, tracking page loading performance, enforcing performance and code coverage budgets on CI, crawling a SPA, capturing a timeline trace of your site to help diagnose performance issues and more! We'll explore those capabilities of Puppeteer API with combination of DevTools protocol and cloud functions (FaaS) with a showcase of real life use cases demonstrated by live-examples. Finally, we’ll go through the existing puppeteer based SaaS solutions such as Checkly and Browserless.

chromepuppeteercdp
HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011

The document discusses HTML5 APIs for video, canvas, and other areas. It provides details on using the <video> tag to embed video, including setting sources and displaying controls. It also covers common video methods and properties. For canvas, it demonstrates how to access the rendering context and use its methods to draw shapes, images, and apply styles.

html5apis
240

    144

72 PPI
“   [In 2013, Intel sees their
    product line] offer a higher
    resolution experience than a
    top-of-the-line 1080p HDTV.”




    http://liliputing.com/2012/04/intel-retina-laptop-
    desktop-displays-coming-in-2013.html
72 PPI
240

Recommended for you

Libros de Autoayuda Gratis: Arte y Estilo de Marketing Motivacional
Libros de Autoayuda Gratis: Arte y Estilo de Marketing MotivacionalLibros de Autoayuda Gratis: Arte y Estilo de Marketing Motivacional
Libros de Autoayuda Gratis: Arte y Estilo de Marketing Motivacional

El documento habla sobre la necesidad de retornar a la felicidad auténtica. Argumenta que la felicidad no debe ser una meta u objetivo a alcanzar, sino más bien una causa y un acompañante en el camino de la vida. Critica cómo la sociedad actual vende la idea de que la felicidad se obtiene al adquirir productos o servicios, en vez de reconocer que la felicidad viene de adentro y no es una mercancía. Insta a las personas a reconectarse con su felicidad interna, como lo hacen natural

Cuadrantes juegos deportivos san roque 2013
Cuadrantes juegos deportivos san roque 2013Cuadrantes juegos deportivos san roque 2013
Cuadrantes juegos deportivos san roque 2013

El documento describe los cuadros de competición para varios deportes en los Juegos Deportivos de San Roque 2013 en Gibraleón, incluyendo tenis, pádel, fútbol sala y voley playa. Proporciona los horarios y parejas/equipos para cada deporte, con trofeos para los tres primeros clasificados de cada cuadro.

RKJ Partners - U.S. Middle Market Financing Update
RKJ Partners - U.S. Middle Market Financing UpdateRKJ Partners - U.S. Middle Market Financing Update
RKJ Partners - U.S. Middle Market Financing Update

Middle market M&A volumes declined in Q1 2011 after deals were pulled forward in 2010 due to tax uncertainty. Despite lower volumes, multiples remained high at 7.5x. Middle market lending activity increased in Q1 2011 but was fueled by debt refinancings rather than new LBO deals. The US economic recovery remains uncertain as GDP growth slowed in Q1 2011. Liquidity in the middle market financing space has increased significantly from various sources including banks restarting leveraged lending teams, new business development companies, and existing players increasing balance sheets to be more active in lending. Competition for quality deals remains fierce, supporting high valuations above 8x EBITDA for attractive businesses.

240 PPI
240 PPI
72 PPI
RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES

Recommended for you

Tech Age of Acceleration
Tech Age of AccelerationTech Age of Acceleration
Tech Age of Acceleration

During last 12 month or so I have been posting tech topics that I have seen in different tech sources that are reshaping our digital world. I call it “Tech Age of Acceleration” and the exponential forces that are reshaping industries and would like to share it with you.

Diana laura hernández cortéz
Diana laura hernández cortéz Diana laura hernández cortéz
Diana laura hernández cortéz

La persona describe que uno de sus hobbies favoritos es asistir a conciertos y festivales musicales con amigos. También enumera algunas cosas que no le agradan, como ciertas clases, su perra, tener hambre o sueño, y música de ciertos artistas.

hobbiemusicadiana
Boysstate 2013 v2
Boysstate 2013 v2Boysstate 2013 v2
Boysstate 2013 v2

The document summarizes the 78th annual Premier Boys State event held at Eastern Illinois University from June 8-14, 2013. Over 500 boys participated in mock governmental proceedings, forming two political parties and electing officials from the city and county level up to state level positions like Governor, Lt. Governor, and Supreme Court Justices. The boys received instruction in various governmental processes through morning classes and participated in afternoon recreational activities and evening assemblies.

FEATURE TESTING
vs. BROWSER SNIFFING

1    Browser width

2    Screen resolution

3    Bandwidth
SPEED TESTS
HINDER SPEED,
USER EXPERIENCE
             (cc) flic.kr/p/4DziUN
“   Testing for speed of an
    internet connection is like
    stepping in front of a car to see
    how fast it is.”




                               (cc) flic.kr/p/4DziUN
“   Testing for speed of an
    internet connection is like
    stepping in front of a car to see
    how fast it is.”




“   But, Christopher, you only
    have to test it once.”

                               (cc) flic.kr/p/4DziUN

Recommended for you

Computacion 1
Computacion 1Computacion 1
Computacion 1

El W3C es un consorcio internacional que produce recomendaciones para la World Wide Web. Fue creado en 1994 y está dirigido por Tim Berners-Lee, el creador original de URL, HTTP y HTML. El W3C está integrado por miembros, un equipo de 65 expertos de todo el mundo y oficinas regionales en varios países.

Optimización de potencia contratada
Optimización de potencia contratadaOptimización de potencia contratada
Optimización de potencia contratada

El documento describe dos métodos para optimizar la potencia contratada en tarifas eléctricas basados en datos históricos de consumo. El primer método usa iteraciones recurrentes para calcular la optimización en contratos de 3 períodos, mientras que el segundo utiliza multiplicadores de Lagrange para contratos de 6 períodos. Explica cómo crear una hoja de cálculo en Excel para introducir datos mensuales de facturas eléctricas y variar las potencias contratadas para encontrar la combinación óptima que maximice los ahorros.

IBM Flash Systems, un paso adelante
IBM Flash Systems, un paso adelanteIBM Flash Systems, un paso adelante
IBM Flash Systems, un paso adelante

SOURCE URL: http://www.ibm.com/systems/data/flash/es/resources/TSM03002-USEN-00_Flash_eBook_Spanish_Final.pdf

storageibmflash
Speed test image




https://github.com/adamdbradley/foresight.js
Speed test image



              +50k

https://github.com/adamdbradley/foresight.js
Native speed test
   // @Modernizr's network-connection.js
   connection = navigator.connection || {
               type: 0 }, // polyfill

   isSlowConnection = connection.type == 3
              || connection.type == 4
              | /^[23]g$/.test(connection.type);


http://davidbcalhoun.com/2010/using-navigator-connection-android
IMG
GIMME THAT OLD SCHOOL

1

2

3

Recommended for you

Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...

Este documento describe un proyecto para construir resiliencia en los humedales de la provincia de Datem del Marañón en Perú. El proyecto tiene cuatro componentes: 1) fortalecer la capacidad institucional del gobierno, 2) fortalecer las capacidades de las comunidades indígenas, 3) promover bionegocios sostenibles, y 4) mejorar la ciencia, tecnología y monitoreo. El objetivo es mejorar la resiliencia de las comunidades indígenas que viven en los humedales ricos en carbon

cambio climáticofinanciamiento climático
Isis Open House Conference May2010
Isis Open House Conference May2010Isis Open House Conference May2010
Isis Open House Conference May2010

The document announces an ISIS Open House and User Conference from May 2-4, 2010 in Vienna, Austria to showcase the latest features of the Papyrus Platform and focus on empowering business users, and includes the agenda, sessions, workshops and labs to be covered around topics like customer experience, document design, case management, interactive letter writing and more.

eei platformceninvoice
Williams lombrozo2010
Williams lombrozo2010Williams lombrozo2010
Williams lombrozo2010

This study examines how explaining influences category learning and generalization. Participants learn categories of alien robots that can be distinguished by either a 75% rule about body shape or a 100% rule about foot shape. Those who explain category membership are expected to discover the more unified 100% rule. Across 3 experiments, participants either explain membership or perform a control task like describing items. The experiments compare how explanation influences discovery of category rules and generalization compared to controls that vary attention or articulation. Findings could provide insight into how explanation promotes discovery of unifying patterns and transfer to new contexts.

online teaching and learningelectronic learningexplanation
IMG
GIMME THAT OLD SCHOOL

1    .htaccess

2

3
Filament .htaccess
# Responsive Images
# Mobile-First images that scale responsively and responsibly
# Copyright 2010, Scott Jehl, Filament Group, Inc
# Dual licensed under the MIT or GPL Version 2 licenses.
# //Start Responsive Images
RewriteEngine On
# direct image requests to temp
RewriteCond %{QUERY_STRING} full=(.*)&?
RewriteRule (.*)rwd-router/.*.(jpe?g|png|gif|webp) $1%1 [L]
# ignore trap for non-image requests, rewrite URL without trap segment
RewriteRule (.*)rwd-router/(.*)$ $1$2
# //End Responsive Images

   https://github.com/filamentgroup/Responsive-Images
Filament .htaccess
<script src="responsiveimgs.js"></script>

<img src="sample-content/running-sml.jpg?
full=sample-content/running-lrg.jpg" />




              4+                        8+
“   ...the server has no way to
    know what resolution the
    client’s device is, so it can’t
    send the appropriately sized
    embeded images.”



    http://mattwilcox.net/archive/entry/id/1053/

Recommended for you

Hoja de vida jersson suarez
Hoja de vida jersson suarezHoja de vida jersson suarez
Hoja de vida jersson suarez

El documento presenta la hoja de vida de Jersson Jair Suarez Sanabria, un joven de 24 años nacido en Chiquinquirá. Actualmente cursa el primer semestre de la carrera de Tecnología en Programación de Sistemas Informáticos en la Universidad Pedagógica y Tecnológica de Colombia en Tunja. Previamente realizó estudios técnicos comerciales y cursos de sistemas en el SENA. Ha trabajado revisando y arreglando equipos de computo y actualizando software en las tiendas ING

Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse
 Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse
Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse

Being an entrepreneur makes you a better person. There are numerous reasons for this. From being your own boss and making the rules, to having a more flexibility, enhancing the quality of life around and the ability to work anywhere you want. Here are few reasons shared by Carl Kruse, that why entrepreneurship makes you amazing.

consultantbusinessmotivation
El plan de la banca de inversión en la internacionalización
El plan de la banca de inversión en la internacionalizaciónEl plan de la banca de inversión en la internacionalización
El plan de la banca de inversión en la internacionalización

El documento describe el Grupo BBVA, uno de los bancos más grandes del mundo. BBVA opera en 32 países de 4 continentes y México es su mercado más grande, representando el 32% de sus beneficios netos en 2011. Además de banca minorista y corporativa, BBVA ofrece soluciones de banca de inversión. El documento analiza los estados financieros de BBVA para 2009-2011 y destaca su sólida posición de capital, siendo el banco europeo con la mayor ratio de capital Tier 1 en pruebas de estrés en 2012.

http://adaptive-images.com/
ADD .HTACCESS, JS,
PHP 5, GD lib*, &
THEN <IMG>
IMG
GIMME THAT OLD SCHOOL

1    .htaccess

2    <picture> and/or srcset

3
media queries in HTML
<video controls>
  <source type="video/mp4" src="video/windowsill_small.mp4"
media="all and (max-width: 480px), all and (max-device-width:
480px)">
  <source type="video/webm" src="video/windowsill_small.webm"
media="all and (max-width: 480px), all and (max-device-width:
480px)">
  <source type="video/mp4" src="video/windowsill.mp4">
  <source type="video/webm" src="video/windowsill.webm">
    
</video>

http://www.w3.org/community/respimg/2012/03/15/polyfilling-
                picture-without-the-overhead/

Recommended for you

Present amoreno 032016
Present amoreno 032016Present amoreno 032016
Present amoreno 032016

Este documento resume la nueva ley de contrataciones del Estado en Perú. La ley busca (1) mejorar la planificación de las compras públicas, (2) simplificar los procedimientos de contratación para agilizar el proceso, y (3) fortalecer los mecanismos de solución de controversias para resolver disputas de manera más rápida. La ley introduce cambios como la obligación de planificar las compras con un año de anticipación, nuevos procedimientos más simples, y la opción de usar juntas de resolución de disputas

Intro to Model United Nations
Intro to Model United NationsIntro to Model United Nations
Intro to Model United Nations

Model United Nations (MUN) is an academic simulation where students learn about diplomacy and global issues. Students are assigned countries and research international topics to debate solutions from different national perspectives within committees that mirror the UN. Conferences involve presenting positions, drafting resolutions, and voting to develop solutions through compromise, as diplomacy works in the real UN.

 
by YEF
modelhow tomotions
Sabana, pradera y desierto tropical
Sabana, pradera y desierto tropicalSabana, pradera y desierto tropical
Sabana, pradera y desierto tropical

Este documento describe tres ecosistemas: la sabana, la pradera y el desierto tropical. Para cada ecosistema, se detallan su ubicación geográfica, factores abióticos como la temperatura y precipitación, especies de plantas y animales típicas, adaptaciones de los seres vivos y efectos de la actividad humana. El documento proporciona información sobre estos ecosistemas a través de mapas, tablas y explicaciones.

desiertosabanapradera
<picture> patch
  <picture alt="A giant stone face at The Bayon temple in Angkor Thom,
 Cambodia">
      
      <source src="small.jpg">
      
      <source src="medium.jpg" media="(min-width: 400px)">
      
      <source src="large.jpg" media="(min-width: 800px)">
      
      <noscript><img src="small.jpg" alt="A giant stone face at The Bayon
 temple in Angkor Thom, Cambodia"></noscript>
 </picture>
http://www.w3.org/community/respimg/2012/03/15/polyfilling-
                picture-without-the-overhead/
ADD IF-ELSE HTML, JS,
BORROW <VIDEO>, &
THEN <IMG>
@srcset standard?

  <h1><img alt="The Breakfast Combo"
      src="banner.jpeg"
      srcset="banner-HD.jpeg 2x,
            banner-phone.jpeg 100w,
            banner-phone-HD.jpeg 100w 2x">
  </h1>


http://www.whatwg.org/specs/web-apps/current-work/multipage/
           embedded-content-1.html#attr-img-srcset
IMG
GIMME THAT OLD SCHOOL

1    .htaccess

2    <picture>

3    HiSRC

Recommended for you

Berlin_TMT-Sector_Market OVERVIEW
Berlin_TMT-Sector_Market OVERVIEWBerlin_TMT-Sector_Market OVERVIEW
Berlin_TMT-Sector_Market OVERVIEW

The document provides an overview of the technology, media, and telecommunications (TMT) sector market in Berlin, Germany. It finds that Berlin has become a major startup capital and global tech hub, attracting thousands of tech professionals annually with its universities, research centers, and affordable cost of living. The TMT sector has significantly outpaced other industries in Germany and concentrated in certain Berlin neighborhoods and office clusters. The largest TMT companies, like Zalando, Rocket Internet, and Amazon, have driven up demand and rents in the Berlin office market, particularly for new developments in non-central business district areas. Experts predict Berlin will continue growing as a global tech hub as more companies mature and speculative development increases to meet strong

El menu
El menuEl menu
El menu

El documento presenta varios proyectos de branding y diseño de menús para restaurantes. Incluye análisis conceptuales, propuestas de identidad visual y acciones de diseño como logotipos, menús, elementos decorativos e identidades digitales y de impresión para diferentes establecimientos gastronómicos. Los proyectos abarcan desde restaurantes de mariscos hasta bares temáticos inspirados en Tokio, con énfasis en crear experiencias únicas para los clientes a través de la decoración y la oferta culinaria.

[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design

This document discusses responsive image techniques for adaptive web design. It covers using fluid grids with percentages instead of pixels, media queries to load different CSS stylesheets for different screen widths, and setting image max-widths to 100% so they scale responsively. It also discusses feature testing browser width with JavaScript instead of browser sniffing, handling high pixel density "Retina" displays, and techniques like .htaccess rewriting, <picture> element, and JavaScript libraries to serve the most appropriate image assets. The focus is on delivering the right image for each device or screen size to optimize for bandwidth, performance, and user experience.

cssresponsive web designcss3
Set, forget it HiSRC
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/1.7.2/jquery.min.js"></script>
<script src="hisrc.js"></script>
<script>
  $(document).ready(function(){
      $(".hisrc img").hisrc();
  });
</script>
Set, forget it HiSRC
<div class="hisrc">
 <img src="halloween-mobile-1st.png"
   data-1x="halloween-x1.png"
   data-2x="halloween-x2.jpg"
   alt="Celebrating Halloween in style" />
</div>
Set, forget it HiSRC
<div class="hisrc">
 <img src="halloween-mobile-1st.png"
   data-1x="halloween-x1.png"
   data-2x="halloween-x2.jpg"
   alt="Celebrating Halloween in style" />
</div>
SERIES OF CHECKS TO
FIND OUT RESPONSIVE
PATH FOR IMAGES...

Recommended for you

[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design

1. The document discusses various techniques for implementing adaptive images in responsive web design, including using the browser's user agent string, feature testing dimensions with JavaScript, and CSS media queries. 2. It describes approaches like modifying .htaccess files and using the <picture> element to serve different image sizes, as well as libraries that simplify the process like HiSRC. 3. Workarounds discussed include using background images, SVG images, font-based solutions, and compressed JPEG files to improve performance on different devices.

html5cssresponsive web design
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design

This document summarizes Christopher Schmitt's presentation on adaptive images in responsive web design. The presentation covered: 1. Using the browser width, screen resolution, and bandwidth to determine the appropriate image to serve through feature testing rather than browser sniffing. 2. Techniques for serving responsive images including using .htaccess files, the <picture> element, and JavaScript libraries like HiSRC that select images based on various tests. 3. Workarounds for older browsers including using background-size: 100%, SVG images, and font-based solutions.

htmlcsshtml5
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design

Christopher Schmitt presented on adaptive images in responsive web design. He discussed using browser features like width, resolution and bandwidth to determine the best image to serve rather than browser sniffing. Feature testing methods included JavaScript, jQuery and CSS media queries. Workarounds for older browsers included background images, SVGs and font-based solutions. Compressed JPEG images were also suggested to reduce file sizes.

htmlhtml5css
DO NATIVE SPEED
          TEST FOR MOBILE
          DEVICES FIRST...
http://davidbcalhoun.com/2010/using-navigator-connection-android
Check pixel density...
$.hisrc.devicePixelRatio = 1;
 if(window.devicePixelRatio !==
 undefined) {
   $.hisrc.devicePixelRatio =
   window.devicePixelRatio
 };

          https://gist.github.com/2428356
Force speed test



              +50k

https://github.com/adamdbradley/foresight.js
LESS THAN 4G MEANS
MOBILE IMAGES LEFT
IN PLACE

Recommended for you

[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design

The document discusses adaptive images in responsive web design. It covers techniques like using the browser width and screen resolution to determine the appropriate image size via JavaScript or media queries. It also discusses checking bandwidth and using techniques like picture, srcset, .htaccess rewriting, and single pixel GIFs to serve the right image. The document recommends using CSS media queries for design and covers workaround techniques like background-size, SVG, and font-based solutions.

htmlhtml5responsive web design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design

This document discusses adaptive images in responsive web design. It begins by introducing the speaker, Christopher Schmitt, and his credentials. It then explores using the browser's user agent string and feature detection to determine screen resolution and bandwidth rather than browser sniffing. The document discusses using CSS media queries, jQuery, and the picture element to serve adaptive images. It also proposes some workaround techniques like background sizing and SVG to improve responsive images.

html5responsive web designwcatx
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design

The document discusses adaptive images in responsive web design. It covers using the browser's user agent string and feature testing to determine screen resolution and bandwidth instead of browser sniffing. Methods presented include using viewport width with JavaScript, jQuery, and CSS media queries; checking screen resolution directly and considering retina displays; and avoiding bandwidth speed tests. Workarounds discussed are using background-size: 100% with images, SVG, and a "Clown Car" SVG technique loading different image files via CSS media queries.

drupalimghtml5
BETWEEN 4G &
300 Kbps MEANS
REGULAR DESKTOP
IMAGES SWAPPED IN
FAST SPEED & HIGH
DENSITY, RETINA
IMAGES SWAPPED IN
https://github.com/crdeutsch/hisrc/tree/v2
2 TRICK PONY
CSS IS CORE.
WE USE CSS MEDIA
QUERIES FOR DESIGN

Recommended for you

Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"

The open web doesn't stop at our desktop. Smart phones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy, they have better displays. Presented at WebVisions Barcelona 2013.

christopher schmittadaptive imageswvbcn
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web

This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.

pinkoicoscupmobile web
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop

This document discusses methodologies and techniques for optimizing websites for mobile devices, including using responsive design with CSS media queries. It presents three main approaches: building a separate mobile site, making no changes, or optimizing the main site for mobile. The bulk of the document then focuses on how to use CSS media queries to optimize websites, covering features like width, height, and orientation. It also discusses related techniques like viewport meta tags and approaches being considered for future standards.

http://mediaqueri.es/
CSS media queries
// default, mobile-1st CSS rules devices go here

@media screen and (min-width: 480px) { ... }

@media screen and (min-width: 600px) { ... }

@media screen and (min-width: 768px) { ... }

@media screen and (min-width: 910px) { ... }
Single pixel GIF
Single pixel GIF

Recommended for you

Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations

The document discusses optimization of the presentation tier of web applications. It notes that the presentation tier is often overlooked despite being responsible for over 30% of client/server performance. Some key optimizations discussed include reducing HTTP requests, optimizing response objects by reducing size and load pattern, JavaScript minification and placement, image sprites, caching, and ensuring valid HTML markup.

htmlcssjavascript
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5

Familiar HTML5 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5 HTML5 Conference Miyazaki 2013 2013/02/10 ひらい さだあき @sada_h

html5html5-miyazakihtml5j
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop

The Evolution of CGM (Computer Graphics Metafile) Viewing. The objective of the workshop is to provide you with all the information required to implement our evolutionary technology.

safariipadiphone
Single pixel GIF
Single pixel GIF
Single pixel GIF


 $.hisrc.defaults = {
     useTransparentGif: true,




http://www.w3.org/community/respimg/2012/04/06/responsive-
   content-images-using-a-spacer-png-and-background-image/
Single pixel GIF
$.hisrc.defaults = {
    useTransparentGif: true,
    transparentGifSrc: 'data:image/
gif;base64,R0lGODlhAQABAIAAAMz/
AAAAACH5BAEAAAAALAAAAAABAAE
AAAICRAEAOw==',

   17+      9+   11.6+   5+   8+

Recommended for you

VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop

The Evolution of CGM (Computer Graphics Metafile) Viewing. The objective of the workshop is to provide you with all the information required to implement our evolutionary technology.

html5s1000dcgm
Responsive design
Responsive designResponsive design
Responsive design

This document discusses responsive web design techniques including: - Using viewports and media queries to adapt layouts for different screen sizes. - Sizing images fluidly using max-width: 100% so they are responsive. - Design patterns for responsive tables, hiding/showing content, and converting menus to dropdowns. - Tools like Modernizr, Respond.js, and frameworks like LESS to support responsive design goals. - Tips like using relative units (ems/percentages) over fixed pixels and transitions for visual changes.

The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013

Talking about advanced performance optimization strategies at SMX Sydney 2013 covering request reduction & optimization, caching, mark-up tuning, database & webserver performance and much, much more!

site performancesite speedseo
Single pixel GIF

$.hisrc.defaults = {
    useTransparentGif: true,
    transparentGifSrc: 'http://
example.com/spg.gif',



   17+      9+    11.6+    5+     6+
2 APPROACHES,
1 SIMPLE SOLUTION.

    https://github.com/teleject/hisrc
2 APPROACHES,
1 SIMPLE SOLUTION.
HEART WEB DESIGN
    https://github.com/teleject/hisrc
WORKAROUNDS &
TRICKS

1

2

3


          (cc) flic.kr/p/64fGf6

Recommended for you

HTML5와 모바일
HTML5와 모바일HTML5와 모바일
HTML5와 모바일

HTML5 provides new semantic elements that help improve accessibility and SEO. These include <header>, <nav>, <article>, <aside>, <footer>, <time>, <video>, <audio>, and more. HTML5 also introduces new features like local storage, offline caching, and geolocation that enhance the mobile web experience.

html5androidmobile
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites

Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6 Includes a sample project built from scratch in Node.js using LESS available on Github

web designresponsive web designmobile
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...

Over the years developers were used to thing that web is not user-friendly, performance efficient and powerful as native apps. But things have been changed so far; now you can build offline applications with notifications, Bluetooth and camera access and so on. Web development is great again. - Quick startup - I will show how to prioritize content loading in the application to show users meaningful pixels as soon as possible - Progressive enhancement - I will encourage you to use maximum of the platform but still support earlier browsers - Offline application - here I will explain how you can easily make your web application working offline - Push Notifications - one of the best way to increase conversion of your application and now it's possible on the web. I am going to show how to do it right with few steps. - Experimental APIs - I will show how to sign in once on all your devices with Credential API, use native share menu and make payments in few clicks

mobicodemobilepwa
WORKAROUNDS &
TRICKS

1   background-size: auto

2

3


                    (cc) flic.kr/p/64fGf6
http://fittextjs.com/
[cssdevconf] Adaptive Images in RWD
background-size: 100%
<a href="example.com/link">Download on Github</a>

.download a {
   padding: .095em .8em;
  background: url(../img/arrow.png) no-repeat;
  background-size: 100%;
  margin-left: .4em;
  -webkit-transition: margin 0.15s ease-out;
  -moz-transition: margin 0.15s ease-out;
  text-decoration: none;
}



        17+           9+          11.6+          5+   9+

Recommended for you

Web Apps
Web AppsWeb Apps
Web Apps

In this lecture, I provide an overview of what it takes to create amazing Web Apps : rich media, the Canvas API, local storage and offline persistence are covered.

html5web applications
Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your Product

This document discusses best practices for using color in web design to ensure accessibility and avoid accessibility issues related to color contrast. It provides an overview of color theory terms, different color schemes, and examples of how top companies use color on their websites. It also reviews guidelines for sufficient color contrast from the WCAG and tools for checking color contrast. The key recommendations are to use color thoughtfully following principles of contrast and accessibility, apply sufficient contrast ratios to all elements, and proactively test color accessibility.

coloraccessibilityproduct design
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code

This document provides an overview of GitHub and version control using Git. It discusses how GitHub allows for cloud-based code repositories that enable social coding and collaboration. Key Git commands are explained such as add, commit, status, log, branch, merge. Remote repositories are covered, including cloning repositories and pushing code to GitHub. Conflict resolution during merges is demonstrated. Examples of open source projects and tools hosted on GitHub are provided.

github
WORKAROUNDS &
TRICKS

1   background-size: auto

2   SVG

3


                    (cc) flic.kr/p/64fGf6
Native SVG




http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
PNG 16kb
           SVG 7kb

17+   9+    11.6+   5+   9+
HTML5 Boilerplate
<!doctype html>



 <html class="no-js" lang="en"> 
<head>

Recommended for you

[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design

This document summarizes Christopher Schmitt's presentation on adaptive images in responsive web design. It discusses using feature testing versus browser sniffing to determine the appropriate image to serve, including testing browser width, screen resolution, and bandwidth. It then covers various techniques for serving adaptive images, such as using .htaccess files, the <picture> element, srcset attributes, and JavaScript libraries. It emphasizes using a mobile-first approach and progressive enhancement to provide the best experience for all devices.

html5cssresponsive web design
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't Code

The document discusses how GitHub can be used by non-technical people. It provides an overview of version control and Git basics such as forking a repository, making commits, and merging changes. It also covers how to set up Git on your local machine and connect to GitHub to share code. GitHub features like issues, milestones, apps and Pages are mentioned. An example is given of its use on President Obama's 2012 reelection campaign with 240 code repositories.

htmlweb designgithub
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs

The document appears to be a presentation about designing web and mobile graphics. It discusses using different sized image assets and the <picture> element to serve the optimal image based on screen size. It shows examples of image sizes for different screen densities and dimensions. It also discusses compressing images to reduce file size while maintaining quality.

sxsw2013htmlweb design
jQuery check
var checkBrowser =
 $('html').hasClass('lt-ie9');



<div class="svgswap">
  <img src="example.svg"
  data-svgswap="example.png">
</div>

       https://github.com/teleject/svg-swap
http://raphaeljs.com/
WORKAROUNDS &
TRICKS

1   background-size: auto

2   SVG

3   font-based solutions


                     (cc) flic.kr/p/64fGf6
“   ...if you use <meta
    charset="utf-8"> (you should
    be for HTML5), you’re adding
    common Unicode characters
    like and ✆, and you don’t
    need a specific font’s version...
    just copy and paste them into
    your HTML.”

Recommended for you

[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3

This document discusses HTML5 and CSS3 and whether they are ready for mainstream use. It provides an overview of the new HTML5 elements like <header>, <nav>, <section>, <article>, <aside>, and <footer>. It also covers HTML5 video and audio capabilities and supporting different video codecs. The document recommends tools for encoding video files into supported formats and discusses using text tracks for basic captioning support.

htmlhtml5css
[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web Design[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web Design

The document discusses adaptive images in responsive web design. It covers using the browser width, screen resolution, and bandwidth to determine the appropriate image size to serve. Feature testing methods like media queries and JavaScript are outlined as alternatives to browser sniffing. Higher resolution displays are also discussed, and how they require larger image files. Serving different images based on these criteria can optimize the experience for users.

csshtml5responsive web design
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)

Chrome 4+ IE9+ Opera 10.5+ Safari 3.1+ (H.264 video requires QuickTime) Mobile Safari 3.2+ Android 2.2+ BlackBerry 7+ Opera Mobile 10.1+ Firefox Mobile 4+ Chrome for Android 18+ Internet Explorer Mobile 10+ 61 HTML5 VIDEO 62 <!DOCTYPE html> <html> <head> <title>HTML5 Video Demo</title> </head> <body> <video width="320" height="240" controls> <source src="movie.

html5mobilerwd
Font-based RWD




http://ilovetypography.com/2012/04/11/designing-type-systems/
http://css-tricks.com/examples/IconFont/
Font-based icons
<style>
 [data-icon]:before {
   font-family: 'icon-font';
   content: attr(data-icon);
 }
</style>

<a href="http://example.com/cloud/save/">
  <span data-icon="C" aria-hidden="true"></span>
 Save to Cloud
</a>
WORKAROUNDS &
TRICKS

1   background-size: auto

2   SVG

3   font-based solutions

4   compressed JPEGs
                     (cc) flic.kr/p/64fGf6

Recommended for you

[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design

The document discusses new elements and syntax in HTML5 for building web pages. It covers using the <!DOCTYPE html> declaration, specifying character encodings and languages, including <script> and <style> elements, and bringing back semantic HTML tags like <b>, <i>, and <abbr>. It also discusses new structural elements like <header>, <nav>, <section>, <article>, <aside>, and <footer>. Finally, it covers other new features in HTML5 like figures, details, drag and drop, and microformats.

htmlhtml5
[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover

This document provides an agenda and overview for a presentation on CSS3 features including new selectors, properties, and techniques for cross-browser compatibility. It explores CSS3 modules like color, opacity, text effects, fonts, shadows, borders, and images. The presentation examines properties such as RGBA, text-overflow, text-selection, columns, @font-face, text-shadow, box-shadow, border-image, and techniques for implementing these features across browsers. Lessons are provided on browser support and workarounds for older browsers.

csscss3heweb11
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover

This document provides an agenda and overview for an HTML5 and CSS3 workshop. The agenda includes explaining differences between HTML5 and XHTML, building with HTML5 elements like <header>, <nav>, <article>, <aside>, and <footer>, bringing back semantic HTML tags, figures and captions, editable elements, drag and drop, HTML5 metadata like microformats, and page structure. It discusses syntax changes in HTML5 and introducing new elements and attributes to improve semantics and accessibility.

htmlhtml5heweb11
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD

Recommended for you

[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop

This document provides an agenda for an HTML5 workshop. The agenda includes discussions of differences between HTML5 and XHTML, building with HTML5 syntax like DOCTYPEs and character sets, and features like audio/video, geolocation, forms, and accessibility. It also outlines exercises for validating HTML5 markup and exploring new HTML5 elements.

htmlhtml5eduiconf
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM

Quantum Communications Q&A with Gemini LLM. These are based on Shannon's Noisy channel Theorem and offers how the classical theory applies to the quantum world.

quantum communicationsshannon's channel theoremclassical theory
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024

This is a powerpoint that features Microsoft Teams Devices and everything that is new including updates to its software and devices for May 2024

microsoft teamsmicrosoft
[cssdevconf] Adaptive Images in RWD
IMG
GIMME THAT NEW SCHOOL

1

2

3
IMG
GIMME THAT NEW SCHOOL

1    simple design for users

2

3

           #rwdimg
IMG
GIMME THAT NEW SCHOOL

1    simple design for users

2   browser, server handshake

3

           #rwdimg

Recommended for you

Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and slides: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

a11yaccessibilityalt text
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx

How do we build an IoT product, and make it profitable? Talk from the IoT meetup in March 2024. https://www.meetup.com/iot-sweden/events/299487375/

iot
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

Profile portofolio

IMG
GIMME THAT NEW SCHOOL

1    simple design for users

2   browser, server handshake

3   same, several formats

           #rwdimg
#rwdimg
#rwdimg
#rwdimg

Recommended for you

RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx

Your comprehensive guide to RPA in healthcare for 2024. Explore the benefits, use cases, and emerging trends of robotic process automation. Understand the challenges and prepare for the future of healthcare automation

rpa in healthcarerpa in healthcare usarpa in healthcare industry
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time

Is your patent a vanity piece of paper for your office wall? Or is it a reliable, defendable, assertable, property right? The difference is often quality. Is your patent simply a transactional cost and a large pile of legal bills for your startup? Or is it a leverageable asset worthy of attracting precious investment dollars, worth its cost in multiples of valuation? The difference is often quality. Is your patent application only good enough to get through the examination process? Or has it been crafted to stand the tests of time and varied audiences if you later need to assert that document against an infringer, find yourself litigating with it in an Article 3 Court at the hands of a judge and jury, God forbid, end up having to defend its validity at the PTAB, or even needing to use it to block pirated imports at the International Trade Commission? The difference is often quality. Quality will be our focus for a good chunk of the remainder of this season. What goes into a quality patent, and where possible, how do you get it without breaking the bank? ** Episode Overview ** In this first episode of our quality series, Kristen Hansen and the panel discuss: ⦿ What do we mean when we say patent quality? ⦿ Why is patent quality important? ⦿ How to balance quality and budget ⦿ The importance of searching, continuations, and draftsperson domain expertise ⦿ Very practical tips, tricks, examples, and Kristen’s Musts for drafting quality applications https://www.aurorapatents.com/patently-strategic-podcast.html

patentspatent applicationpatent prosecution
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf

Solar Storms (Geo Magnetic Storms) are the motion of accelerated charged particles in the solar environment with high velocities due to the coronal mass ejection (CME).

solar storms
#rwdimg
#rwdimg
#rwdimg
#rwdimg

Recommended for you

WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck

YOUR RELIABLE WEB DESIGN & DEVELOPMENT TEAM — FOR LASTING SUCCESS WPRiders is a web development company specialized in WordPress and WooCommerce websites and plugins for customers around the world. The company is headquartered in Bucharest, Romania, but our team members are located all over the world. Our customers are primarily from the US and Western Europe, but we have clients from Australia, Canada and other areas as well. Some facts about WPRiders and why we are one of the best firms around: More than 700 five-star reviews! You can check them here. 1500 WordPress projects delivered. We respond 80% faster than other firms! Data provided by Freshdesk. We’ve been in business since 2015. We are located in 7 countries and have 22 team members. With so many projects delivered, our team knows what works and what doesn’t when it comes to WordPress and WooCommerce. Our team members are: - highly experienced developers (employees & contractors with 5 -10+ years of experience), - great designers with an eye for UX/UI with 10+ years of experience - project managers with development background who speak both tech and non-tech - QA specialists - Conversion Rate Optimisation - CRO experts They are all working together to provide you with the best possible service. We are passionate about WordPress, and we love creating custom solutions that help our clients achieve their goals. At WPRiders, we are committed to building long-term relationships with our clients. We believe in accountability, in doing the right thing, as well as in transparency and open communication. You can read more about WPRiders on the About us page.

web development agencywpriderswordpress development
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence

Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently. Visit- https://onliveserver.com/linux-web-hosting/

cheap linux hosting
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure

Recent advancements in the NIST-JARVIS infrastructure: JARVIS-Overview, JARVIS-DFT, AtomGPT, ALIGNN, JARVIS-Leaderboard

jarvisjarvis-dftalignn
<link rel="shortcut icon" href="/assets/favicon.ico" />




                        #rwdimg
<link rel="apple-touch-icon-precomposed" sizes="144x144"
   href="apple-touch-icon-144x144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
   href="apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
   href="apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed"
   href="apple-touch-icon-precomposed.png" />
<link rel="shortcut icon" href="/assets/favicon.ico" />



                          #rwdimg
#rwdimg
THANK YOU!
CHRISTOPHER SCHMITT                                    @teleject


                http://goo.gl/gSYmS
The Non Breaking Space Podcast - http://nonbreakingspace.tv/

Recommended for you

Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world

The presentation showcases the diverse real-world applications of Fused Deposition Modeling (FDM) across multiple industries: 1. **Manufacturing**: FDM is utilized in manufacturing for rapid prototyping, creating custom tools and fixtures, and producing functional end-use parts. Companies leverage its cost-effectiveness and flexibility to streamline production processes. 2. **Medical**: In the medical field, FDM is used to create patient-specific anatomical models, surgical guides, and prosthetics. Its ability to produce precise and biocompatible parts supports advancements in personalized healthcare solutions. 3. **Education**: FDM plays a crucial role in education by enabling students to learn about design and engineering through hands-on 3D printing projects. It promotes innovation and practical skill development in STEM disciplines. 4. **Science**: Researchers use FDM to prototype equipment for scientific experiments, build custom laboratory tools, and create models for visualization and testing purposes. It facilitates rapid iteration and customization in scientific endeavors. 5. **Automotive**: Automotive manufacturers employ FDM for prototyping vehicle components, tooling for assembly lines, and customized parts. It speeds up the design validation process and enhances efficiency in automotive engineering. 6. **Consumer Electronics**: FDM is utilized in consumer electronics for designing and prototyping product enclosures, casings, and internal components. It enables rapid iteration and customization to meet evolving consumer demands. 7. **Robotics**: Robotics engineers leverage FDM to prototype robot parts, create lightweight and durable components, and customize robot designs for specific applications. It supports innovation and optimization in robotic systems. 8. **Aerospace**: In aerospace, FDM is used to manufacture lightweight parts, complex geometries, and prototypes of aircraft components. It contributes to cost reduction, faster production cycles, and weight savings in aerospace engineering. 9. **Architecture**: Architects utilize FDM for creating detailed architectural models, prototypes of building components, and intricate designs. It aids in visualizing concepts, testing structural integrity, and communicating design ideas effectively. Each industry example demonstrates how FDM enhances innovation, accelerates product development, and addresses specific challenges through advanced manufacturing capabilities.

fdmffffused deposition modeling
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation

Manual Method of Product Research | Helium10 | MBS RETRIEVER

product researchhelium10 | mbs retriever
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry

Are you interested in dipping your toes in the cloud native observability waters, but as an engineer you are not sure where to get started with tracing problems through your microservices and application landscapes on Kubernetes? Then this is the session for you, where we take you on your first steps in an active open-source project that offers a buffet of languages, challenges, and opportunities for getting started with telemetry data. The project is called openTelemetry, but before diving into the specifics, we’ll start with de-mystifying key concepts and terms such as observability, telemetry, instrumentation, cardinality, percentile to lay a foundation. After understanding the nuts and bolts of observability and distributed traces, we’ll explore the openTelemetry community; its Special Interest Groups (SIGs), repositories, and how to become not only an end-user, but possibly a contributor.We will wrap up with an overview of the components in this project, such as the Collector, the OpenTelemetry protocol (OTLP), its APIs, and its SDKs. Attendees will leave with an understanding of key observability concepts, become grounded in distributed tracing terminology, be aware of the components of openTelemetry, and know how to take their first steps to an open-source contribution! Key Takeaways: Open source, vendor neutral instrumentation is an exciting new reality as the industry standardizes on openTelemetry for observability. OpenTelemetry is on a mission to enable effective observability by making high-quality, portable telemetry ubiquitous. The world of observability and monitoring today has a steep learning curve and in order to achieve ubiquity, the project would benefit from growing our contributor community.

cloudcloud native observabilitycloud native

More Related Content

What's hot

[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
WordPress
 
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
Sven Wolfermann
 
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
Sven Wolfermann
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
Remy Sharp
 
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
Amir Zmora
 
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile webFINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
Maximiliano Firtman
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
Kirk Yamamoto
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
Patrick Lauke
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
Chris Mills
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
Remy Sharp
 
The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14
Matthias Lau
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
Remy Sharp
 
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraMehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
Walter Ebert
 
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaPuppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania
Önder Ceylan
 
HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011
Robert Nyman
 

What's hot (18)

[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
 
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
 
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile webFINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraMehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
 
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaPuppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania
 
HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011
 

Viewers also liked

Libros de Autoayuda Gratis: Arte y Estilo de Marketing Motivacional
Libros de Autoayuda Gratis: Arte y Estilo de Marketing MotivacionalLibros de Autoayuda Gratis: Arte y Estilo de Marketing Motivacional
Libros de Autoayuda Gratis: Arte y Estilo de Marketing Motivacional
Motivadores Peruanos Los Mejores Motivadores del Perú
 
Cuadrantes juegos deportivos san roque 2013
Cuadrantes juegos deportivos san roque 2013Cuadrantes juegos deportivos san roque 2013
Cuadrantes juegos deportivos san roque 2013
Carlos Pardeza
 
RKJ Partners - U.S. Middle Market Financing Update
RKJ Partners - U.S. Middle Market Financing UpdateRKJ Partners - U.S. Middle Market Financing Update
RKJ Partners - U.S. Middle Market Financing Update
RKJ Partners, LLC
 
Tech Age of Acceleration
Tech Age of AccelerationTech Age of Acceleration
Tech Age of Acceleration
Reza Malekzadgan
 
Diana laura hernández cortéz
Diana laura hernández cortéz Diana laura hernández cortéz
Diana laura hernández cortéz
Diana Cortéz
 
Boysstate 2013 v2
Boysstate 2013 v2Boysstate 2013 v2
Boysstate 2013 v2
gabrieljgrant
 
Computacion 1
Computacion 1Computacion 1
Computacion 1
jose salazar
 
Optimización de potencia contratada
Optimización de potencia contratadaOptimización de potencia contratada
Optimización de potencia contratada
Vega Phil
 
IBM Flash Systems, un paso adelante
IBM Flash Systems, un paso adelanteIBM Flash Systems, un paso adelante
IBM Flash Systems, un paso adelante
Angel Villar Garea
 
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...
AIDA_Americas
 
Isis Open House Conference May2010
Isis Open House Conference May2010Isis Open House Conference May2010
Isis Open House Conference May2010
Friso de Jong
 
Williams lombrozo2010
Williams lombrozo2010Williams lombrozo2010
Williams lombrozo2010
Joseph Jay Williams
 
Hoja de vida jersson suarez
Hoja de vida jersson suarezHoja de vida jersson suarez
Hoja de vida jersson suarez
jersson jair suarez
 
Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse
 Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse
Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse
Carl Kruse
 
El plan de la banca de inversión en la internacionalización
El plan de la banca de inversión en la internacionalizaciónEl plan de la banca de inversión en la internacionalización
El plan de la banca de inversión en la internacionalización
Instituto de Promoción Exterior de Castilla La Mancha
 
Present amoreno 032016
Present amoreno 032016Present amoreno 032016
Present amoreno 032016
Overallhealth En Salud
 
Intro to Model United Nations
Intro to Model United NationsIntro to Model United Nations
Intro to Model United Nations
YEF
 
Sabana, pradera y desierto tropical
Sabana, pradera y desierto tropicalSabana, pradera y desierto tropical
Sabana, pradera y desierto tropical
acanamero
 
Berlin_TMT-Sector_Market OVERVIEW
Berlin_TMT-Sector_Market OVERVIEWBerlin_TMT-Sector_Market OVERVIEW
Berlin_TMT-Sector_Market OVERVIEW
Nico Mercker-Sague
 
El menu
El menuEl menu

Viewers also liked (20)

Libros de Autoayuda Gratis: Arte y Estilo de Marketing Motivacional
Libros de Autoayuda Gratis: Arte y Estilo de Marketing MotivacionalLibros de Autoayuda Gratis: Arte y Estilo de Marketing Motivacional
Libros de Autoayuda Gratis: Arte y Estilo de Marketing Motivacional
 
Cuadrantes juegos deportivos san roque 2013
Cuadrantes juegos deportivos san roque 2013Cuadrantes juegos deportivos san roque 2013
Cuadrantes juegos deportivos san roque 2013
 
RKJ Partners - U.S. Middle Market Financing Update
RKJ Partners - U.S. Middle Market Financing UpdateRKJ Partners - U.S. Middle Market Financing Update
RKJ Partners - U.S. Middle Market Financing Update
 
Tech Age of Acceleration
Tech Age of AccelerationTech Age of Acceleration
Tech Age of Acceleration
 
Diana laura hernández cortéz
Diana laura hernández cortéz Diana laura hernández cortéz
Diana laura hernández cortéz
 
Boysstate 2013 v2
Boysstate 2013 v2Boysstate 2013 v2
Boysstate 2013 v2
 
Computacion 1
Computacion 1Computacion 1
Computacion 1
 
Optimización de potencia contratada
Optimización de potencia contratadaOptimización de potencia contratada
Optimización de potencia contratada
 
IBM Flash Systems, un paso adelante
IBM Flash Systems, un paso adelanteIBM Flash Systems, un paso adelante
IBM Flash Systems, un paso adelante
 
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...
 
Isis Open House Conference May2010
Isis Open House Conference May2010Isis Open House Conference May2010
Isis Open House Conference May2010
 
Williams lombrozo2010
Williams lombrozo2010Williams lombrozo2010
Williams lombrozo2010
 
Hoja de vida jersson suarez
Hoja de vida jersson suarezHoja de vida jersson suarez
Hoja de vida jersson suarez
 
Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse
 Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse
Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse
 
El plan de la banca de inversión en la internacionalización
El plan de la banca de inversión en la internacionalizaciónEl plan de la banca de inversión en la internacionalización
El plan de la banca de inversión en la internacionalización
 
Present amoreno 032016
Present amoreno 032016Present amoreno 032016
Present amoreno 032016
 
Intro to Model United Nations
Intro to Model United NationsIntro to Model United Nations
Intro to Model United Nations
 
Sabana, pradera y desierto tropical
Sabana, pradera y desierto tropicalSabana, pradera y desierto tropical
Sabana, pradera y desierto tropical
 
Berlin_TMT-Sector_Market OVERVIEW
Berlin_TMT-Sector_Market OVERVIEWBerlin_TMT-Sector_Market OVERVIEW
Berlin_TMT-Sector_Market OVERVIEW
 
El menu
El menuEl menu
El menu
 

Similar to [cssdevconf] Adaptive Images in RWD

[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"
WebVisions
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
mikeleeme
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
betabeers
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
Anup Hariharan Nair
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Sadaaki HIRAI
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
David Manock
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
Larson Software Technology
 
Responsive design
Responsive designResponsive design
Responsive design
John Doxaras
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
Bastian Grimm
 
HTML5와 모바일
HTML5와 모바일HTML5와 모바일
HTML5와 모바일
ACCESS
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
Joe Seifi
 
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
IT Event
 
Web Apps
Web AppsWeb Apps
Web Apps
Tim Wray
 

Similar to [cssdevconf] Adaptive Images in RWD (20)

[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design
 
Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
Responsive design
Responsive designResponsive design
Responsive design
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
 
HTML5와 모바일
HTML5와 모바일HTML5와 모바일
HTML5와 모바일
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
 
Web Apps
Web AppsWeb Apps
Web Apps
 

More from Christopher Schmitt

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your Product
Christopher Schmitt
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
Christopher Schmitt
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
Christopher Schmitt
 
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't Code
Christopher Schmitt
 
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
Christopher Schmitt
 
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3
Christopher Schmitt
 
[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web Design[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
Christopher Schmitt
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
Christopher Schmitt
 
[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover
Christopher Schmitt
 
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover
Christopher Schmitt
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
Christopher Schmitt
 

More from Christopher Schmitt (12)

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your Product
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
 
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't Code
 
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
 
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3
 
[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web Design[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web Design
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
 
[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover
 
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
 

Recently uploaded

Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 

Recently uploaded (20)

Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 

[cssdevconf] Adaptive Images in RWD

  • 1. CHRISTOPHER SCHMITT @teleject ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN CSS DEV CONF 2012
  • 3. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
  • 5. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  • 6. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  • 7. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 http://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHv
  • 9. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 3
  • 10. A scripting approach var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
  • 11. The jQuery approach // returns width of browser viewport $(window).width(); // returns height of browser viewport $(window).height(); // returns width of HTML document $(document).width(); // returns height of HTML document $(document).height(); http://api.jquery.com/width/ & http://api.jquery.com/height/
  • 12. CSS media queries // default, mobile-1st CSS rules devices go here @media screen and (min-width: 480px) { ... } @media screen and (min-width: 600px) { ... } @media screen and (min-width: 768px) { ... } @media screen and (min-width: 910px) { ... }
  • 14. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
  • 15. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
  • 16. 72 PPI HAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  • 17. 72 points-per-inch = 72 pixels-per-inch
  • 18. 96 PPI IF A WINDOWS USER
  • 20. “RETINA” DISPLAYS 300ppi at 12 inches from the eyes 78μm 78μm goo.gl/zpkFy
  • 21. 240 144 72 PPI
  • 22. [In 2013, Intel sees their product line] offer a higher resolution experience than a top-of-the-line 1080p HDTV.” http://liliputing.com/2012/04/intel-retina-laptop- desktop-displays-coming-in-2013.html
  • 24. 240
  • 28. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
  • 29. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  • 30. SPEED TESTS HINDER SPEED, USER EXPERIENCE (cc) flic.kr/p/4DziUN
  • 31. Testing for speed of an internet connection is like stepping in front of a car to see how fast it is.” (cc) flic.kr/p/4DziUN
  • 32. Testing for speed of an internet connection is like stepping in front of a car to see how fast it is.” “ But, Christopher, you only have to test it once.” (cc) flic.kr/p/4DziUN
  • 34. Speed test image +50k https://github.com/adamdbradley/foresight.js
  • 35. Native speed test // @Modernizr's network-connection.js connection = navigator.connection || { type: 0 }, // polyfill isSlowConnection = connection.type == 3 || connection.type == 4 | /^[23]g$/.test(connection.type); http://davidbcalhoun.com/2010/using-navigator-connection-android
  • 36. IMG GIMME THAT OLD SCHOOL 1 2 3
  • 37. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 3
  • 38. Filament .htaccess # Responsive Images # Mobile-First images that scale responsively and responsibly # Copyright 2010, Scott Jehl, Filament Group, Inc # Dual licensed under the MIT or GPL Version 2 licenses. # //Start Responsive Images RewriteEngine On # direct image requests to temp RewriteCond %{QUERY_STRING} full=(.*)&? RewriteRule (.*)rwd-router/.*.(jpe?g|png|gif|webp) $1%1 [L] # ignore trap for non-image requests, rewrite URL without trap segment RewriteRule (.*)rwd-router/(.*)$ $1$2 # //End Responsive Images https://github.com/filamentgroup/Responsive-Images
  • 39. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 4+ 8+
  • 40. ...the server has no way to know what resolution the client’s device is, so it can’t send the appropriately sized embeded images.” http://mattwilcox.net/archive/entry/id/1053/
  • 42. ADD .HTACCESS, JS, PHP 5, GD lib*, & THEN <IMG>
  • 43. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> and/or srcset 3
  • 44. media queries in HTML <video controls> <source type="video/mp4" src="video/windowsill_small.mp4" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/webm" src="video/windowsill_small.webm" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/mp4" src="video/windowsill.mp4"> <source type="video/webm" src="video/windowsill.webm"> <!-- proper fallback content goes here --> </video> http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/
  • 45. <picture> patch <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <!-- <source src="small.jpg"> --> <source src="small.jpg"> <!-- <source src="medium.jpg" media="(min-width: 400px)"> --> <source src="medium.jpg" media="(min-width: 400px)"> <!-- <source src="large.jpg" media="(min-width: 800px)"> --> <source src="large.jpg" media="(min-width: 800px)"> <!-- Fallback content for non-JS browsers. Same src as the initial source element. --> <noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript> </picture> http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/
  • 46. ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG>
  • 47. @srcset standard? <h1><img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> </h1> http://www.whatwg.org/specs/web-apps/current-work/multipage/ embedded-content-1.html#attr-img-srcset
  • 48. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> 3 HiSRC
  • 49. Set, forget it HiSRC <script src="https://ajax.googleapis.com/ajax/ libs/jquery/1.7.2/jquery.min.js"></script> <script src="hisrc.js"></script> <script> $(document).ready(function(){ $(".hisrc img").hisrc(); }); </script>
  • 50. Set, forget it HiSRC <div class="hisrc"> <img src="halloween-mobile-1st.png" data-1x="halloween-x1.png" data-2x="halloween-x2.jpg" alt="Celebrating Halloween in style" /> </div>
  • 51. Set, forget it HiSRC <div class="hisrc"> <img src="halloween-mobile-1st.png" data-1x="halloween-x1.png" data-2x="halloween-x2.jpg" alt="Celebrating Halloween in style" /> </div>
  • 52. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
  • 53. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
  • 54. Check pixel density... $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356
  • 55. Force speed test +50k https://github.com/adamdbradley/foresight.js
  • 56. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
  • 57. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
  • 58. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
  • 60. CSS IS CORE. WE USE CSS MEDIA QUERIES FOR DESIGN
  • 62. CSS media queries // default, mobile-1st CSS rules devices go here @media screen and (min-width: 480px) { ... } @media screen and (min-width: 600px) { ... } @media screen and (min-width: 768px) { ... } @media screen and (min-width: 910px) { ... }
  • 67. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, http://www.w3.org/community/respimg/2012/04/06/responsive- content-images-using-a-spacer-png-and-background-image/
  • 68. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'data:image/ gif;base64,R0lGODlhAQABAIAAAMz/ AAAAACH5BAEAAAAALAAAAAABAAE AAAICRAEAOw==', 17+ 9+ 11.6+ 5+ 8+
  • 69. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'http:// example.com/spg.gif', 17+ 9+ 11.6+ 5+ 6+
  • 70. 2 APPROACHES, 1 SIMPLE SOLUTION. https://github.com/teleject/hisrc
  • 71. 2 APPROACHES, 1 SIMPLE SOLUTION. HEART WEB DESIGN https://github.com/teleject/hisrc
  • 72. WORKAROUNDS & TRICKS 1 2 3 (cc) flic.kr/p/64fGf6
  • 73. WORKAROUNDS & TRICKS 1 background-size: auto 2 3 (cc) flic.kr/p/64fGf6
  • 76. background-size: 100% <a href="example.com/link">Download on Github</a> .download a { padding: .095em .8em; background: url(../img/arrow.png) no-repeat; background-size: 100%; margin-left: .4em; -webkit-transition: margin 0.15s ease-out; -moz-transition: margin 0.15s ease-out; text-decoration: none; } 17+ 9+ 11.6+ 5+ 9+
  • 77. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 (cc) flic.kr/p/64fGf6
  • 79. PNG 16kb SVG 7kb 17+ 9+ 11.6+ 5+ 9+
  • 80. HTML5 Boilerplate <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <! [endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<! [endif]--> <head>
  • 81. jQuery check var checkBrowser = $('html').hasClass('lt-ie9'); <div class="svgswap"> <img src="example.svg" data-svgswap="example.png"> </div> https://github.com/teleject/svg-swap
  • 83. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 font-based solutions (cc) flic.kr/p/64fGf6
  • 84. ...if you use <meta charset="utf-8"> (you should be for HTML5), you’re adding common Unicode characters like and ✆, and you don’t need a specific font’s version... just copy and paste them into your HTML.”
  • 87. Font-based icons <style> [data-icon]:before { font-family: 'icon-font'; content: attr(data-icon); } </style> <a href="http://example.com/cloud/save/"> <span data-icon="C" aria-hidden="true"></span> Save to Cloud </a>
  • 88. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 font-based solutions 4 compressed JPEGs (cc) flic.kr/p/64fGf6
  • 94. IMG GIMME THAT NEW SCHOOL 1 2 3
  • 95. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 3 #rwdimg
  • 96. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 #rwdimg
  • 97. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 same, several formats #rwdimg
  • 105. <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg
  • 106. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" /> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" /> <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg
  • 108. THANK YOU! CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmS The Non Breaking Space Podcast - http://nonbreakingspace.tv/