SlideShare a Scribd company logo
CHRISTOPHER SCHMITT          @teleject




ADAPTIVE IMAGES
IN RESPONSIVE WEB DESIGN

             #HEWEBAR 2012
RESPONSIVE CODE
it’s all about the divisor

1

2

3
RESPONSIVE CODE
it’s all about the divisor

1      Fluid grid, layout

2

3
.container {
 width: 988px;
}
.column {
 width: 144px;
}


     http://www.alistapart.com/articles/fluidgrids/

Recommended for you

[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
[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
[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

This document discusses techniques for responsive images on the web. It begins by explaining how to use browser width, screen resolution, and bandwidth detection to serve appropriately sized images. It then discusses .htaccess and JavaScript solutions like Filament Group's responsive images and HiSRC. It argues that CSS media queries are best for layout, while these techniques focus on images. Background-size, SVG, and Modernizr checks are presented as workarounds. Overall, the document provides an overview of different responsive image implementation strategies.

html5cssresponsive web design
.container {
 width: 988px; /* 988px / 16px = 61.75em */
}
.column {
 width: 144px;
}


     http://www.alistapart.com/articles/fluidgrids/
.container {
 width: 61.75em; /* 988px / 16px = 61.75em */
}
.column {
 width: 144px;
}


     http://www.alistapart.com/articles/fluidgrids/
.container {
 width: 61.75em; /* 988px / 16px = 61.75em */
}
.column {
 width: 144px; /* 144px / 988px = 14.57% */
}


     http://www.alistapart.com/articles/fluidgrids/
.container {
 width: 61.75em; /* 988px / 16px = 61.75em */
}
.column {
 width: 14.57%; /* 144px / 988px = 14.57% */
}


     http://www.alistapart.com/articles/fluidgrids/

Recommended for you

High Performance Images
High Performance ImagesHigh Performance Images
High Performance Images

The document discusses various image formats (GIF, PNG, JPEG), optimization tools, responsive image techniques (srcset, picture), lazy loading, icon fonts versus SVG sprites, and video optimization. It provides information on each topic and examples of how to implement the different techniques for optimizing images and other assets for faster page loads.

webperformanceimages
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

This presentation is about implementing the performance as first approach in web development and a bit of real case study. Then implement the Lighthouse-CI in the development workflow to keep the site performance high.

lighthouseperfromanceweb
Responsive Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerResponsive Videos, mehr oder weniger
Responsive Videos, mehr oder weniger

1) The document discusses responsive video formats and delivery methods for different devices. 2) It covers video codecs like H.264 and VP8, as well as formats like MP4, WebM and OGG. 3) Adaptive streaming technologies like Apple's HLS and MPEG-DASH are presented as ways to deliver the most appropriate video quality based on a user's bandwidth and device capabilities.

videohtml5
http://ratiostrong.com/
RESPONSIVE CODE
it’s all about the divisor

1      Fluid grid, layout

2      Media queries

3
<link rel="stylesheet" type="text/css"
href="core.css" media="screen" />

<link rel="stylesheet" type="text/css"
href="print.css" media="print" />




http://www.alistapart.com/articles/responsive-web-design/
<link rel="stylesheet" type="text/css"
href="core.css" media="screen" />

<link rel="stylesheet" type="text/css"
media="screen and (max-device-width:
480px)" href="sm-bowl-porridge.css" />

<link rel="stylesheet" type="text/css"
href="print.css" media="print" />

http://www.alistapart.com/articles/responsive-web-design/

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
[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
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...

As a Front End Web Developer, experimenting with new tools to add to your workflow (and going down the rabbit hole with them!) is all part and parcel of refining your craft. Chris Eccles, Technical Manager at Building Blocks has been doing just this and has some invaluable insight into CSS Visual Regression using Backstop.JS. CSS Visual Regression testing is the process of running automated visual test comparisons on pages or elements in your projects. Using Backstop.JS, Chris has discovered that this tool is intuitive, allowing quick configuration to allow you to get up and rolling quickly. Backstop.JS serves your tests via a webpage which gives you the visual feedback needed for targeting bugs caused from CSS related issues. These comparisons can uncover bugs you’d otherwise not learn about until it’s too late. A very useful tool to have in your Front End arsenal, wouldn’t you agree? Chris has been sharing his insights with the BB team and wanted to share with our blog readers also. So, sit back and enjoy the ride through the wonderful world of Backstop.JS.

web developmentbackstop.jsvisual regression testing
<link rel="stylesheet" type="text/css"
href="sm-bowl-porridge.css"
media="screen and (max-device-width: 480px)"/>
<link rel="stylesheet" type="text/css"
href="med-bowl-porridge.css"
media="screen and (max-device-width: 600px)"/>
<link rel="stylesheet" type="text/css"
href="large-bowl-porridge.css"
media="screen and (max-device-width: 768px)"/>
<link rel="stylesheet" type="text/css"
href="xl-bowl-porridge.css"
media="screen and (max-device-width: 910px)"/>


http://www.alistapart.com/articles/responsive-web-design/
// 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) { ... }

http://www.alistapart.com/articles/responsive-web-design/
FIND YOUR OWN
BREAKPOINTS FOR
YOUR SITE!
RESPONSIVE CODE
it’s all about the divisor

1      Fluid grid, layout

2      Media queries

3      Adaptive images

Recommended for you

Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5

20100807 OSC Nagoya での講演資料 # スライドのみで見やすいよう若干整理 P5〜 Agenda P17〜 "HTML5" って何? P56〜 HTML5 の範囲は? P67〜 ブラウザのサポートは? P94〜 IE6 はどうするの? P118〜 使用上の注意 P147〜 便利なツールは? P152〜 One Point Q&A P186〜 追加資料

whatwghtml5webgl
Chrome enchanted 2015
Chrome enchanted 2015Chrome enchanted 2015
Chrome enchanted 2015

This document contains slides from a presentation on Polymer and modern web APIs. The slides discuss how Polymer uses web components to build reusable custom elements, and how this allows for component-based development. They provide examples of popular elements like <paper-tabs> and <core-toolbar> that are used as building blocks. The slides also showcase several production uses of Polymer at Google scale, including the Google Santa Tracker application. They emphasize how Polymer leverages modern web platform APIs to build fast, modular, and powerful applications.

googlechromeserviceworker
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)

The document summarizes techniques for improving JavaScript performance in web applications. It discusses how JavaScript execution blocks the browser UI thread, leading to unresponsive user experiences if scripts run for too long. It then provides recommendations to limit JavaScript execution times to under 50ms and describes load time techniques like placing scripts at the bottom of the page, combining files, and loading scripts dynamically or deferring their execution to improve page load performance.

amazonjavascriptperformance
img {
 max-width: 100%;
 height: auto;
}


   http://www.alistapart.com/articles/fluid-images/
video, object, video, img {
 max-width: 100%;
 height: auto;
}


    http://www.alistapart.com/articles/fluid-images/
video, object, video, img {
 max-width: 100%;
 height: auto;
}

* Unless you’re IE6, use conditional comments:
video, object, video, img {
 width: 100%;
 height: auto;
}

     http://www.alistapart.com/articles/fluid-images/
video, object, video, img, iframe {
 max-width: 100%;
 height: auto;
}

* Unless you are wanting embedded
videos like your YouTubes or your
Vimeos to scale.

Recommended for you

Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile

The document discusses developing for mobile web. It covers several topics including physical properties of mobile devices, their network usage and power constraints. It also discusses different versions of Gmail optimized for different devices. The document recommends inlining content, deferring non-essential work, and being creative with JavaScript libraries and debugging to improve performance for mobile. It highlights the ability of web technologies to build cross-device applications quickly without native restrictions. The conclusion is that native languages may be better if writing many device plugins, but web technologies can be effective otherwise.

html5mobilejavascript
Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Player

From the 'HTML5 player showcase/How to Build an HTML5 player' given at the Open Video Conference in October 2010.

javascripthtml5 video
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)

High Performance JavaScript provides techniques for optimizing JavaScript performance. It discusses how JavaScript execution blocks the browser UI thread, preventing responsive user experiences. It recommends limiting individual JavaScript jobs to under 50ms to avoid unresponsiveness. The document then provides techniques to improve load time performance such as dynamically loading scripts, and runtime techniques like timers and web workers to avoid blocking the UI thread during long-running processes.

javascriptperformancenzakas
http://fitvidsjs.com
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
 $(document).ready(function(){
  // Target your .container, .wrapper, .post, etc.
  $("#thing-with-videos").fitVids();
 });
</script>



                    http://fitvidsjs.com
THE RETINA DISPLAY
PROBLEM-O

      #rwdimg
WHY DON’T WE ASK
THE BROWSER?

             (cc) flic.kr/p/vUBHv

Recommended for you

Responsive Design: Mehr als CSS
Responsive Design: Mehr als CSSResponsive Design: Mehr als CSS
Responsive Design: Mehr als CSS

The document discusses techniques for optimizing responsive web design for mobile devices, including downloading and hiding/resizing unnecessary elements based on screen width, using lightweight JavaScript libraries conditionally, responsive images with srcset, and serving different content for mobile using server-side device detection. It provides examples and links to resources for implementing these techniques.

responsive designcsshtml5
Making the HTML5 Video element interactive
Making the HTML5 Video element interactiveMaking the HTML5 Video element interactive
Making the HTML5 Video element interactive

From Streaming Media West Conference Huntington Beach, CA November 2013 C202: HOW TO: Making the HTML5 Video Element Interactive The HTML5 Video element has now become widely used by browsers and supported in a broad set of websites for streaming video content. With some JavaScript and CSS, we can leverage the HTML video element to create highly interactive experiences for the viewer in both traditional and mobile browsing environments. This hands-on session explores the integration of events with the video timeline, creating positioned hotspots with links and dynamic content, and capturing user input. In addition, the session examines supporting mobile platform browsers along with future opportunities with the HTML5 video tag. Get sample code, ideas, and best practices for making the HTML5 video element an engaging interactive experience for your viewers. Speaker: Chuck Hudson, Co-Author, HTML5 Developer's Cookbook

html5videojavascript
AlphaTech Brochure
AlphaTech BrochureAlphaTech Brochure
AlphaTech Brochure

The document summarizes an entry-level technology training program called Alpha-Tech. The program is designed for teachers with little computer experience. It provides basic instruction on computer operations, the internet, email, word processing, spreadsheets, presentations, and more. The flexible training can be completed through contact sessions or self-study, and is assessed through a test or assignments. The goal is for learners to develop practical digital skills and confidence to use technology in their routine work.

Mozilla/1.0 (Win3.1)

http://www.useragentstring.com/




                                  (cc) flic.kr/p/vUBHv
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

Recommended for you

Guided reading implementation guide
Guided reading implementation guideGuided reading implementation guide
Guided reading implementation guide

This document outlines goals and benchmarks for implementing guided reading based on a scale from "Tasks Not Started" to "Gold Standard". It includes goals for classroom management, student grouping, lesson management, text selection, teaching strategies, and accommodating student needs. The benchmarks progress from just starting to understand concepts to achieving excellence in areas like engaging all students, differentiating instruction, selecting appropriate texts, observing reading behaviors, and implementing all components of guided reading lessons with skill and fidelity.

[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
Web Communications Brochure
Web Communications BrochureWeb Communications Brochure
Web Communications Brochure

This 10-15 hour training program teaches intermediate communication skills and is at Level-2 of the ICT Training Framework. The program covers skills for sending and receiving emails, including attachments, signatures, organization, and backups. It also teaches chatting, voice chatting, video conferencing, and using communication tools like email clients. The objectives are to become proficient at communication technology and learn basic and intermediate skills for a variety of web-based communication tools.

“   Based on feedback from users,
    testers and engineers you will
    contact large as well as smaller
    Web sites and advise them on
    how to improve their code for
    maximum compatibility and
    device independence.”

    http://my.opera.com/chooseopera/blog/2010/06/09/
    work-for-opera-as-a-web-opener

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

1

2

3
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

Recommended for you

2020vision Case Praxis
2020vision Case Praxis2020vision Case Praxis
2020vision Case Praxis
erpelektronischsepa
Hr Summit 03 26 09
Hr Summit 03 26 09Hr Summit 03 26 09
Hr Summit 03 26 09

The document discusses several key policy issues that may be addressed by the new Congress and Obama administration, including the economy, wars, health care reform, and labor issues. It outlines President Obama's priorities of passing an economic stimulus package and addressing the wars in Iraq and Afghanistan. It also summarizes proposed legislation on equal pay, labor relations, workplace flexibility, immigration, and health care reform.

Open Office Impress : Lesson 08
Open Office Impress : Lesson 08Open Office Impress : Lesson 08
Open Office Impress : Lesson 08

This document provides instructions for creating an educational slide presentation using OpenOffice Impress. It outlines how to: 1. Create slides and insert text within text boxes. 2. Format slides by adding numbered lists and changing background colors. 3. Insert graphics and clipart. 4. Save, view, and print the Impress presentation. The document then provides step-by-step directions for opening an example Impress file, adding two new slides, entering and formatting slide titles, and applying text effects like shadows.

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) { ... }
(cc) flic.kr/p/8Lo5Gk
BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS

Recommended for you

Blooms Planning Sheet
Blooms Planning SheetBlooms Planning Sheet
Blooms Planning Sheet

This document outlines Bloom's Revised Taxonomy, which categorizes levels of thinking skills from lower-order to higher-order. It lists actions and products for each of the six major cognitive process categories - Remembering, Understanding, Applying, Analyzing, Evaluating, and Creating. These categories move from simpler recall tasks to more complex skills such as synthesis, evaluation and creation. Learning activities are provided as examples for each level.

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

This document discusses adaptive images in responsive web design. It begins by explaining why the browser should be asked about screen resolution and bandwidth instead of sniffing the browser. It then demonstrates using feature testing to determine browser width and screen resolution. Next, it covers issues with higher resolution retina displays like larger file sizes. The document proposes solutions like using .htaccess files, srcset, and JavaScript libraries to serve the appropriate image based on screen details without browser sniffing. It emphasizes that CSS media queries are still important for responsive design.

cssresponsive web designcss3
[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
FEATURE TESTING
vs. BROWSER SNIFFING

1    Browser width

2    Screen resolution

3
72            PPI
HAS SERVED US WELL
                (cc) flic.kr/p/6tjjRP
72 points-per-inch =
72 pixels-per-inch
96            PPI
IF A WINDOWS USER

Recommended for you

Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12

The document discusses responsive UX, which is designing websites and applications that adapt to different screen sizes and devices using fluid grids, media queries, and responsive images; it provides examples of how to implement responsive design principles through fluid grids, image scaling, and media queries to build sites that automatically adjust for smartphones, tablets, and other devices.

responsive designfluiduxmedia queries
[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
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.

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
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

Recommended for you

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.

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
72 PPI
240
RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES
FEATURE TESTING
vs. BROWSER SNIFFING

1    Browser width

2    Screen resolution

3    Bandwidth

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.

safariipadiphone
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
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript

This document discusses building testable, client-side MVC apps in JavaScript using Spine, Jasmine, and Node.js. It advocates pushing as much work to the client as possible for responsiveness, and outlines a thin-server architecture with common front-end technologies and libraries to structure code, add interactivity, and optimize resources.

javascript nodejs
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
Speed test image




https://github.com/adamdbradley/foresight.js

Recommended for you

Opera and the Open Web platform
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platform

The document discusses the history and evolution of web browsers and standards. It notes that early browsers in the 1990s included Mosaic and Netscape Navigator. In the late 1990s, Internet Explorer and Netscape competed using both open and closed standards. HTML5 was developed in the 2000s to better support web applications and add new elements like video. The document also discusses approaches to making websites mobile-friendly, including responsive design using viewport meta tags and media queries.

html5standardscss3
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile

This document discusses HTML5 on mobile devices. It begins by explaining why mobile web is growing and why HTML5 is well-suited for mobile. It then provides an overview of what HTML5 is and examples of features like forms, multimedia, geolocation that can be used on mobile. It also discusses considerations for mobile web development like responsive design and frameworks. The document recommends tools for mobile debugging and testing performance.

html5mobile
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more

This document discusses various topics related to developing web apps, including HTML5, responsive design, touch events, offline capabilities, and debugging tools. It provides links to resources on HTML5 features like media queries, SVG, web workers, and the page visibility API. It also covers techniques for adapting content like responsive web design, progressive enhancement, and server-side adaptation. Mobile browser stats and popular devices on Douban are mentioned. Frameworks like Bootstrap and tools like Weinre for debugging mobile apps are referenced.

readermobile application developmentweb applications
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
IMG
GIMME THAT OLD SCHOOL

1    .htaccess

2

3

Recommended for you

Web app and more
Web app and moreWeb app and more
Web app and more

This document discusses various techniques for making web applications work offline and with unreliable network connections, including: - The application cache manifest which allows specifying cached resources to work offline - Issues with the current manifest specification and potential enhancements - The window.applicationCache API for caching resources and monitoring cache status - Detecting online/offline status using the navigator.onLine property In 3 sentences or less, it summarizes approaches for offline web applications using the application cache manifest, applicationCache API, and navigator.onLine property.

web application
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
Building Faster Websites
Building Faster WebsitesBuilding Faster Websites
Building Faster Websites

The document discusses how websites are getting slower and larger in size, negatively impacting the user experience. It notes that by 2015, mobile internet usage will surpass desktop usage. Users expect fast loading mobile sites. The document provides several techniques to optimize website performance, such as image and code minification, compression, caching, reducing connections and HTTP requests, image sprites, and optimizing for mobile hardware constraints.

drupal
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/
http://adaptive-images.com/

Recommended for you

Vaadin & Web Components
Vaadin & Web ComponentsVaadin & Web Components
Vaadin & Web Components

My presentation at DevNexus 2015 on how Vaadin will be leveraging Web Components, Polymer and Angular JS 2 in the future.

gwtweb componentsvaadin
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.

Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011

This document discusses making websites responsive for different devices. It covers using CSS media queries to apply different styling based on screen width, height, and other device features. It also covers using viewport meta tags to control zooming and scaling on mobile browsers. The goal is to build sites that can adapt their layouts across various devices like phones, tablets, and desktops.

htmlmediaquerieshtml5
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/
<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/

Recommended for you

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
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design

The document discusses adaptive images and responsive web design. It covers using srcset and sizes attributes, the <picture> element, and feature testing versus browser sniffing to determine the best image to display based on factors like screen width, resolution, and bandwidth. It also discusses workarounds like background-size, SVG, and font-based solutions for responsive images.

rwdhtml5rwdimg
[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
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
@srcset standard?




http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html
http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html
IMG
GIMME THAT OLD SCHOOL

1    .htaccess

2    <picture>

3    HiSRC

Recommended for you

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
[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
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

[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
[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
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

[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
[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
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
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

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
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers

The integration of programming into civil engineering is transforming the industry. We can design complex infrastructure projects and analyse large datasets. Imagine revolutionizing the way we build our cities and infrastructure, all by the power of coding. Programming skills are no longer just a bonus—they’re a game changer in this era. Technology is revolutionizing civil engineering by integrating advanced tools and techniques. Programming allows for the automation of repetitive tasks, enhancing the accuracy of designs, simulations, and analyses. With the advent of artificial intelligence and machine learning, engineers can now predict structural behaviors under various conditions, optimize material usage, and improve project planning.

programmingcodingcivil engineering
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges

accommodate the strengths, weaknesses, threats and opportunities of autonomous vehicles

automotive self-driving car technology
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

Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides

If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights. During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to: - Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value - Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems - Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors - Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported - Look Ahead: Gain insights into where FME is headed with coordinate systems in the future Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!

論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...

Jindong Gu, Zhen Han, Shuo Chen, Ahmad Beirami, Bailan He, Gengyuan Zhang, Ruotong Liao, Yao Qin, Volker Tresp, Philip Torr "A Systematic Survey of Prompt Engineering on Vision-Language Foundation Models" arXiv2023 https://arxiv.org/abs/2307.12980

Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops

This presentation, delivered at the Postgres Bangalore (PGBLR) Meetup-2 on June 29th, 2024, dives deep into connection pooling for PostgreSQL databases. Aakash M, a PostgreSQL Tech Lead at Mydbops, explores the challenges of managing numerous connections and explains how connection pooling optimizes performance and resource utilization. Key Takeaways: * Understand why connection pooling is essential for high-traffic applications * Explore various connection poolers available for PostgreSQL, including pgbouncer * Learn the configuration options and functionalities of pgbouncer * Discover best practices for monitoring and troubleshooting connection pooling setups * Gain insights into real-world use cases and considerations for production environments This presentation is ideal for: * Database administrators (DBAs) * Developers working with PostgreSQL * DevOps engineers * Anyone interested in optimizing PostgreSQL performance Contact info@mydbops.com for PostgreSQL Managed, Consulting and Remote DBA Services

postgresqlpgsqldatabase
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

Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter

Widya Salim and Victor Ma will outline the causal impact analysis, framework, and key learnings used to quantify the impact of reducing Twitter's network latency.

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...

Today’s digitally connected world presents a wide range of security challenges for enterprises. Insider security threats are particularly noteworthy because they have the potential to cause significant harm. Unlike external threats, insider risks originate from within the company, making them more subtle and challenging to identify. This blog aims to provide a comprehensive understanding of insider security threats, including their types, examples, effects, and mitigation techniques.

insider securitycybersecurity threatsenterprise security
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024

Everything that I found interesting last month about the irresponsible use of machine intelligence

quantumfaxmachine
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
http://css-tricks.com/which-
responsive-images-solution-should-
             you-use/

Recommended for you

Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf

Sustainability requires ingenuity and stewardship. Did you know Pigging Solutions pigging systems help you achieve your sustainable manufacturing goals AND provide rapid return on investment. How? Our systems recover over 99% of product in transfer piping. Recovering trapped product from transfer lines that would otherwise become flush-waste, means you can increase batch yields and eliminate flush waste. From raw materials to finished product, if you can pump it, we can pig it.

pigging solutionsprocess piggingproduct transfers
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy

Not so much to say

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
WORKAROUNDS &
TRICKS

1

2

3


          (cc) flic.kr/p/64fGf6
WORKAROUNDS &
TRICKS

1   background-size: auto

2

3


                    (cc) flic.kr/p/64fGf6
http://fittextjs.com/
[HEWEBAR 2012] Adaptive Images in Responsive Web Design

Recommended for you

Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces

An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)

augmented realitycross realityvirtual reality
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
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant

Password Rotation in 2024 is still Relevant

passwordmanagementrotation
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+
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+

Recommended for you

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

This is a slide deck that showcases the updates in Microsoft Copilot for May 2024

microsoftmicrosoft copilot
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf

Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.

neo4jneo4j webinarsgraph database
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf

These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.

air force fighter planebiggest submarinezambia port
HTML5 Boilerplate
<!doctype html>



 <html class="no-js" lang="en"> 
<head>
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

Recommended for you

DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition

The DealBook is our annual overview of the Ukrainian tech investment industry. This edition comprehensively covers the full year 2023 and the first deals of 2024.

“   ...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.”
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>

Recommended for you

https://github.com/blog/1106-say-hello-to-octicons
https://github.com/blog/1106-say-hello-to-octicons
       https://github.com/styleguide/css/7.0
http://symbolset.com/
[HEWEBAR 2012] Adaptive Images in Responsive Web Design

Recommended for you

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
IMG
GIMME THAT NEW SCHOOL

1    simple design for users

2   browser, server handshake

3   same, several formats

           #rwdimg

Recommended for you

#rwdimg
THANK YOU!
CHRISTOPHER SCHMITT                                     @teleject


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

Online, live RWD Summit on Aug. 28th - http://RWDSummit.com/
Online, live UX Web Summit on Sept. 26th - http://UXWebSummit.com/
& use “HEWEBAR” code 20% off for both events.

More Related Content

What's hot

[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
 
[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
 
[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
 
[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
 
[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
 
[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
 
High Performance Images
High Performance ImagesHigh Performance Images
High Performance Images
Walter Ebert
 
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 Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerResponsive Videos, mehr oder weniger
Responsive Videos, mehr oder weniger
Walter Ebert
 
Web Apps
Web AppsWeb Apps
Web Apps
Tim Wray
 
[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
 
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Building Blocks
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
dynamis
 
Chrome enchanted 2015
Chrome enchanted 2015Chrome enchanted 2015
Chrome enchanted 2015
Chang W. Doh
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile
Remy Sharp
 
Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Player
steveheffernan
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas
 
Responsive Design: Mehr als CSS
Responsive Design: Mehr als CSSResponsive Design: Mehr als CSS
Responsive Design: Mehr als CSS
Walter Ebert
 
Making the HTML5 Video element interactive
Making the HTML5 Video element interactiveMaking the HTML5 Video element interactive
Making the HTML5 Video element interactive
Charles Hudson
 

What's hot (20)

[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
 
[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
 
[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
 
[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
 
[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
 
[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
 
High Performance Images
High Performance ImagesHigh Performance Images
High Performance Images
 
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 Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerResponsive Videos, mehr oder weniger
Responsive Videos, mehr oder weniger
 
Web Apps
Web AppsWeb Apps
Web Apps
 
[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
 
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
 
Chrome enchanted 2015
Chrome enchanted 2015Chrome enchanted 2015
Chrome enchanted 2015
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile
 
Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Player
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 
Responsive Design: Mehr als CSS
Responsive Design: Mehr als CSSResponsive Design: Mehr als CSS
Responsive Design: Mehr als CSS
 
Making the HTML5 Video element interactive
Making the HTML5 Video element interactiveMaking the HTML5 Video element interactive
Making the HTML5 Video element interactive
 

Viewers also liked

AlphaTech Brochure
AlphaTech BrochureAlphaTech Brochure
AlphaTech Brochure
thinkict
 
Guided reading implementation guide
Guided reading implementation guideGuided reading implementation guide
Guided reading implementation guide
Jennifer Evans
 
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover
Christopher Schmitt
 
Web Communications Brochure
Web Communications BrochureWeb Communications Brochure
Web Communications Brochure
thinkict
 
2020vision Case Praxis
2020vision Case Praxis2020vision Case Praxis
2020vision Case Praxis
Friso de Jong
 
Hr Summit 03 26 09
Hr Summit 03 26 09Hr Summit 03 26 09
Hr Summit 03 26 09
ericop
 
Open Office Impress : Lesson 08
Open Office Impress : Lesson 08Open Office Impress : Lesson 08
Open Office Impress : Lesson 08
thinkict
 
Blooms Planning Sheet
Blooms Planning SheetBlooms Planning Sheet
Blooms Planning Sheet
007aud
 

Viewers also liked (8)

AlphaTech Brochure
AlphaTech BrochureAlphaTech Brochure
AlphaTech Brochure
 
Guided reading implementation guide
Guided reading implementation guideGuided reading implementation guide
Guided reading implementation guide
 
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover
 
Web Communications Brochure
Web Communications BrochureWeb Communications Brochure
Web Communications Brochure
 
2020vision Case Praxis
2020vision Case Praxis2020vision Case Praxis
2020vision Case Praxis
 
Hr Summit 03 26 09
Hr Summit 03 26 09Hr Summit 03 26 09
Hr Summit 03 26 09
 
Open Office Impress : Lesson 08
Open Office Impress : Lesson 08Open Office Impress : Lesson 08
Open Office Impress : Lesson 08
 
Blooms Planning Sheet
Blooms Planning SheetBlooms Planning Sheet
Blooms Planning Sheet
 

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

[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
Christopher Schmitt
 
[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
 
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12
touchtitans
 
[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
 
Responsive design
Responsive designResponsive design
Responsive design
John Doxaras
 
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
 
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
 
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
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
Timothy Oxley
 
Opera and the Open Web platform
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platform
Andreas Bovens
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
Adam Lu
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
Yan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and more
faming su
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Sadaaki HIRAI
 
Building Faster Websites
Building Faster WebsitesBuilding Faster Websites
Building Faster Websites
Matthew Farina
 
Vaadin & Web Components
Vaadin & Web ComponentsVaadin & Web Components
Vaadin & Web Components
Joonas Lehtinen
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
Kirk Yamamoto
 
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011
Patrick Lauke
 

Similar to [HEWEBAR 2012] Adaptive Images in Responsive Web Design (20)

[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
 
[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
 
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12
 
[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
 
Responsive design
Responsive designResponsive design
Responsive design
 
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
 
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
 
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
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
 
Opera and the Open Web platform
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platform
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Building Faster Websites
Building Faster WebsitesBuilding Faster Websites
Building Faster Websites
 
Vaadin & Web Components
Vaadin & Web ComponentsVaadin & Web Components
Vaadin & Web Components
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
 
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011
 

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
 
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
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
 
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
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
Christopher Schmitt
 

More from Christopher Schmitt (11)

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your Product
 
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web 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
 
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
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
 

Recently uploaded

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
 
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
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
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
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
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
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
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
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
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
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 

Recently uploaded (20)

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
 
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
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
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...
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
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
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
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
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
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
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 

[HEWEBAR 2012] Adaptive Images in Responsive Web Design