SlideShare a Scribd company logo
Responsive images in the
wild
Vlad Zelinschi
Front-end developer @
@vladzelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
var codecamper = ‘you’;
if (codecamper && ‘responsive images’)
{
console.log(‘Happy!’);
}
else
{
console.log(‘Oh no!’);
}
var codecamper = ‘you’;
if (codecamper && ‘responsive images’)
{
console.log(‘Happy!’);
}
else
{
console.log(‘Oh no!’);
}

Recommended for you

2022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.02022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.0

Responsive images automator, to automatically audit, generate and test responsive images, presentated at CSS Day 2022 in Faenza, Italy.

csscss dayresponsive images
Getting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernGetting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James Halpern

Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca OVERVIEW As most Android developers know, dealing with the extreme degree of fragmentation in the Android ecosystem is often challenging. Among the more difficult challenges is managing memory usage, as devices that are in the market today can have as little as 13MB of memory. Now imagine the pains that developers go through when faced with the headache of having massive bitmaps eat up memory in a millisecond. In this presentation, James Halpern will talk about the complexities of image and memory management in Android and walk you through the creation of a successful, powerful and open source image management utility. Come to this presentation to learn about techniques that will help you optimize the performance of your apps. Learn about Android’s memory limitations and the role the garbage collector plays in your app’s performance and complexity. Learn how to communicate android graphics issues to developers, and how good design can create fewer bugs. James will conclude this presentation by briefly walking you through his open sourced image management solution that gracefully handles most of these issues in a simple to use package.

 
by FITC
2013androidtoronto
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck

presportal.ru is the biggest Russian knowledge bank about presentations. We publish best presentations.

presportal.rupresentation
Responsive
images
Responsive
images
‘’Responsive’’ +/- ‘’design’’

• term(s) coined by Ethan Marcotte in 2010 in an
article written for A list apart
• a new mindset
• invaded by a plethora of devices
• break from standard web development process
Responsive design challenges

• it’s a must in these days
• users want the same (if not better) experience

• compatibility & A LOT of devices
• bandwith, slow connectivity, latency, data traffic
plan

Recommended for you

Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.

This document summarizes Vitaly Friedman's talk on responsive design techniques and tricks. The talk covered resolution independence using SVG/icon fonts, content choreography with Flexbox, compressive images that maintain quality at different sizes, conditional loading of assets based on breakpoints, and lazy loading of JavaScript and social buttons. It also discussed maintaining aspect ratios for images and videos across screens, and serving different video files for different devices. The overall message was that responsive design requires a new mindset and pragmatic solutions rather than rigid rules.

web designweb developmentgraphic design
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18

There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.

ethan marcotteresponsive web designhtml
FITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive ImagesFITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive Images

Responsive images are crucial to delivering stunning responsive web sites. Now that the <picture> element and srcset feature have found their way into every browser with to a certain degree following a common standard, there is no excuse for refusing to add art-directed responsive images to your grunt, gulp or webpack build flow or backend CMS/blog. This talk will explore the state of the art in building art-directed responsive images and will showcase several tools and techniques that web designers can use to automate art-directed responsive images.

web designcsshtml5
responsive

Images
Images

• visual impact
• create & define user emotions
• art
• no img = designer will kill you
• a big/ important part of the web
http://httparchive.org/interesting.php - sept, 15, 2013
http://httparchive.org/interesting.php - sept, 15, 2013

Recommended for you

Improving Game Performance in the Browser
Improving Game Performance in the BrowserImproving Game Performance in the Browser
Improving Game Performance in the Browser

Improving Game Performance in the Browser with Mickey MacDonald Presented on September 17 2014 at FITC's Web Unleashed 2014 event in Toronto Poor performance is the easiest way to wreck the experience of any game; with web-based games, performance is even more crucial. In this talk, Mickey will discuss the various ways that we can optimize web-based games. He will look at the how the use of WebWorkers can increase performance, as well as tricks to improve load times and audio performance. So join Mickey and learn how to optimize your game to be lightning fast in every browser. OBJECTIVE Demonstrate techniques for increasing game performance in browsers TARGET AUDIENCE Web-based game developers ASSUMED AUDIENCE KNOWLEDGE Basic web-based game development skills FIVE THINGS AUDIENCE MEMBERS WILL LEARN Using WebWorkers to increase performance How to speed up load times Audio performance techniques Best practices for graphics compression Pooling techniques

 
by FITC
The high resolution web
The high resolution webThe high resolution web
The high resolution web

The document discusses techniques for high resolution images on the web, including adaptive images, srcset attribute, <picture> element, and browser scaling. It provides examples of client-side and server-side solutions for serving adaptive images, such as libraries and services. Guidelines are given for when to use techniques like SVG, icon fonts, and media queries to control images. The document concludes that bandwidth will limit downloading high resolution images over slower networks and to trust cellular optimizations.

web design and developmentretinahigh resolution
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...

Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

Responsive design limitations
+
HQ lovely images
=
...
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Performance is a must also because...

• starting from 2010 Google includes loading time in
Page Rank

• for online businesses every wasted second is lost
money
• your product is a reflection of who you are as a
company/developer/etc.
47% of users expect a web
page to load in two seconds

40% of users will abandon a
web page if it takes more than
three seconds to load

Recommended for you

A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....

This presentation was originally presented at Drupal Camp Toronto, 2012. To view the video cast of this presentation visit http://fosterinteractive.com/blog/responsive-design-case-study -----DESCRIPTION----- responsivedesign.ca was launched in February of 2012, and it was well received. It was our first mobile-first responsive site. We built it quickly and knew it wasn’t perfect, but the game plan was to launch early and incrementally improve the site over time. It’s not even a year later we use whole new workflows, creative design methods, modules, and development tools in our responsive websites. This talk will highlight how we created the original project and what we’ve since learned regarding workflow and development including: Responsive Images Modules Creative Concept Development Device vs. Natural Breakpoints SASS / Compass + Mixins we use Dealing with IE Benchmarking ----- Originally Presented at Drupal Camp Toronto 2012 ----- http://2012.drupalcamptoronto.org/sessions/a-responsive-design-case-study-what-we-did-wrong-building-responsivedesignca-and-how-we-fix

drupalmobile firstworkflow
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and Performance

Talk delivered in New York, Sep 19, 2016 during an O'Reilly meetup before Velocity Conference about Web Performance and Images, including HTTP Client Hints and new Image Formats

mobile webweb performanceimages
Picture Perfect: Images for Coders
Picture Perfect: Images for CodersPicture Perfect: Images for Coders
Picture Perfect: Images for Coders

Let's face it; we're not really artists (except for the artists). But that doesn't mean we can't contribute to the images on the internet. Whether you're a Photoshop guru, or don't even own a Mac, we can still make valuable contributions to ensure our digital assets are crisp and professional. In this talk, we'll look at some basic command-line tools for creating, modifying, and managing images, and look at how we can manage them properly on the web. We'll play with sprites, responsive images for these new retina displays, and techniques for optimizing performance on lower bandwidth connections and mobile web.

The
DON’T DO THIS OR I WILL
PERSONALLY TRACK YOU
AND KILL YOU IN YOUR
SLEEP
example
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Site::after
Site summary
• no distinction between mobile/desktop images

• 285 requests
• 13.6 MB transferred (no cache)

• onLoad event after 11s (on cable connection)
• 181 images requests = 7.2 MB

• it’s OPTIMIZED! (no kidding...)

Recommended for you

Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"

Mobile usage is increasing, so Drupal 8 is designed with a mobile-first approach. It features responsive themes, images, and administration for optimal mobile experiences. Drupal 8 also improves front-end performance, supports HTML5, and includes a RESTful API for building mobile apps and services. Overall, Drupal 8 enhances the mobile experience for users and developers compared to previous versions.

drupal
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design

Real world aspects of implementing flexible, mobile and future-friendly sites through responsive design.

user experienceioshtml5
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox

A talk given at Appspirina workshop on March 29th, 2012 organized by http://mobiledeveloper.pl/. Event page: https://www.facebook.com/events/296799847060237/

webdevuxresponsive web design
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Main problem

Serve the user only what he needs in terms of:
• bytes
• image resolution
Also don’t break the layout and keep the site fluid
and adaptive

Recommended for you

Responsive design and retina displays
Responsive design and retina displaysResponsive design and retina displays
Responsive design and retina displays

These are the slides for the Austin Adobe User Group presentation on Responsive Web Design and Retina Displays on 9/14/12. The code example files are at: https://github.com/elimc/AAUG-RWD-and-Retina_9-14-12

cssresponsive web designretina display
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design

With great power, comes great responsive-ability web design. Responsive web design (RWD) will be demystified. Believe it or not, it's more than just media queries, although those will be discussed. It starts with proper UI design and application architecture, and then the dive into CSS - but not too deep! You don't have to be an expert to do RWD, but it helps to have some idea of what you are doing.

responsive designresponsive web designmedia queries
Cezar chitac the edge of experience
Cezar chitac   the edge of experienceCezar chitac   the edge of experience
Cezar chitac the edge of experience

This document discusses experience and decision making through three case studies. In Case I, decisions were made hastily under time constraints, resulting in fragile code. Case II involved choosing a database, where Cassandra proved better than the initial choice of MySQL. Case III showed benefits of thorough understanding and high test coverage leading to better outcomes. The conclusion advocates questioning assumptions, respecting experience stages, and using diverse teams to gain different perspectives for improved decision making at the "edge of experience."

Solution one (CSS)

div {
background-image: url(img/large.png);

@media screen and (max-width: 600px) {
background-image: url(img/small.png);
}
}
Advantages
• easy to implement

• good user control (because of mq)
• multiple backgrounds

Disadvantages
• no separation of style & content
• losing semantics (add role=‘’img”)
• request each time (ex: browser resize)
Solution two (SVG)

• late recommendation from W3C
• vectors, vectors, vectors...
• use it as image source, background-image, directly
in your markup, data-uri, etc.
Advantages
• scales nicely, no blur, vector based

• lots of possibilities
• one request

Disadvantages
• no IE 8 (that’s a shame...)

• no Android 2.3 or lower
• complex shapes can take up lots of space (bytes)

Recommended for you

Cloud powered search
Cloud powered searchCloud powered search
Cloud powered search

This document discusses cloud powered search using Azure Search. It begins with an introduction to search engines and how they work using indexing and relevance scoring. Lucene is presented as an example open source search library. The document then covers how Azure Search works as a managed search service, including indexing data from sources like SQL databases, performing CRUD operations, querying, filtering, faceting and highlighting results. Scaling and storage capabilities of Azure Search are also discussed. Examples of using Azure Search for online retail/ecommerce and user generated content are provided.

Ccp
CcpCcp
Ccp

This document discusses important leadership concepts for junior developers to understand early in their careers, including: - Leadership is not defined by formal authority but by influence through trust, communication, and belonging. - As a junior, constantly contributing to the team and product, communicating when extra support is needed, and understanding the bigger picture can help you develop leadership skills. - Small actions can have ripple effects, so it's important to consider how your work may impact others.

Business analysis techniques exercise your 6-pack
Business analysis techniques   exercise your 6-packBusiness analysis techniques   exercise your 6-pack
Business analysis techniques exercise your 6-pack

Cristian Leon presents six techniques that business analysts can use to better perform their role: (1) Planning, such as using a requirements management plan and RACI matrix; (2) Listening actively to stakeholders; (3) Mind mapping and brainstorming to map concepts; (4) Analyzing requirements using techniques like MoSCoW prioritization; (5) Creating artifacts like user stories with details like acceptance criteria; and (6) Keeping requirements visible and understood by stakeholders through ongoing communication. The presentation aims to help business analysts and those wanting to be analysts exercise their "6-pack" of analysis skills.

Solution three - picturefill.js

<span data-picture>
<span data-src="medium.jpg"
data-media="(min-width: 400px)">
</span>
<span data-src="large.jpg"
data-media="(min-width: 800px)">
</span>

<noscript>
<img src="external/img/small.jpg">
</noscript>
</span>
Advantages
• lightweight ~0.5kb
• better semantics because of img
• good browser support (even IE8 and non-js browsers
if needed)
• support for retina

Disadvantages
• nasty markup
Future solutions

• picture element and srcset attribute
• proposed, not yet implemented
• can (and should) be used together

• aim to solve the responsive images problem and
keep things coupled in markup only
<picture>
<source media="(min-width: 45em)"
src="large.jpg">
<source media="(min-width: 18em)"
src="med.jpg">
<source src="small.jpg">
<img src="small.jpg">
<p>Accessible text</p>
</picture>

<picture>
<source media="(min-width: 45em)"
srcset="large.jpg 2x">

<source srcset="small.jpg 1x, small.jpg 2x">
</picture>

Recommended for you

Bpm company code camp - configuration or coding with pega
Bpm company   code camp - configuration or coding with pegaBpm company   code camp - configuration or coding with pega
Bpm company code camp - configuration or coding with pega

This document discusses configuration vs coding in Pega and provides an overview of the Pega platform. It introduces the presenters and describes what is needed to run Pega including an operating system, application server, and database. The Pega environment is modeled and executes flows using a business rules engine and rules are assembled into Java at runtime. Situational processes are built in frameworks and specialized in frameworks and implementations. Directly capturing objectives can model processes, close the gap between business and IT, and automatically transform objectives into executable Java to automate work.

Andrei prisacaru takingtheunitteststothedatabase
Andrei prisacaru takingtheunitteststothedatabaseAndrei prisacaru takingtheunitteststothedatabase
Andrei prisacaru takingtheunitteststothedatabase

This document outlines an agenda for a presentation with 5 chapters covering contact information, tools for database development and testing, usage of those tools, providing proof of their effectiveness, and closing with a question and answer session. Chapter 1 discusses issues with database development. Chapter 2 introduces tools to help solve problems. Chapter 3 demonstrates creating database and unit test projects, adding tests, and testing transactional behavior. Chapter 4 discusses proving the value of these tools. Chapter 5 allows for questions.

Agility and life
Agility and lifeAgility and life
Agility and life

The document discusses agility in life and relationships on micro and middle levels. It argues that an agile approach to life involves experimentation, trust, giving freedom and space to others, focusing on solutions rather than blame, and prioritizing value to "customers" like family and friends through continuous effort. Key aspects of agility include diversity, shared goals, responsibility, courage to change, and appreciating different perspectives. Applying agile principles like experimentation, trust and encouragement can help people and teams grow.

Advantages
• it will be a native solution (someday....)
• control everything from markup

Disadvantages
• nasty markup...AGAIN!
• based only on device resolution & DPR
• it will be a native solution (someday...)
Thoughts and things to look after
• think about server too (resize after upload, Matt
Wilcox’s adaptive images)
• always, always, ALWAYS optimize your images (Grunt
tasks, online services, CLI, etc.)
• NetworkInformation.connection (experimental – only in
Android, Gecko 12.0 and above)
var conn = navigator.connection;
console.log(conn.speed);
Conclusion
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi

Recommended for you

2015 dan ardelean develop for windows 10
2015 dan ardelean   develop for windows 10 2015 dan ardelean   develop for windows 10
2015 dan ardelean develop for windows 10

This document provides an overview and agenda for developing Windows 10 apps, covering topics like the new Windows Core, universal app platform, app-to-app communications enhancements, and the Action Center for managing notifications. It demonstrates new controls like the RelativePanel and MonthCalendar, and how to use the SplitView control. It also shows how to check for capabilities, target platform versions, and use platform extensions.

The bigrewrite
The bigrewriteThe bigrewrite
The bigrewrite

The document discusses the challenges of deciding whether to rewrite an existing codebase from scratch or work with the legacy code. It outlines reasons for not working with the existing code, such as missing documentation or tools. It also notes potential issues with rewriting from scratch, such as the impact on other teams and office politics. The document recommends starting by automating infrastructure and tests, learning the essential business concepts, and trying to introduce incremental changes to the legacy code before deciding to fully rewrite it.

The case for continuous delivery
The case for continuous deliveryThe case for continuous delivery
The case for continuous delivery

The document discusses the benefits of adopting continuous delivery (CD) principles for software development. It outlines how CD can (1) create a repeatable, reliable release process that automates tasks, (2) empower teams through shared responsibility and increased collaboration, and (3) provide business value through faster feedback, consistent processes, and lower costs. While initial costs may increase for training and new tools, CD can ultimately shift costs from releases to other activities and deliver software faster. The document provides a sample deployment pipeline and maturity model, and discusses managing expectations for change when adopting CD practices.

There is no
perfect solution!
How to chose your solution
• do I have legacy content I can’t update/modify
• do I care about semantics, validity and accessibility
• do I care about non-JS users
• can I afford extra requests
• is a 3rd party solution acceptable (cloud services,
etc.)
• browser legacy & support
Take away

• have a strategy from the beginning
• analyze & try to predict problems

• chose depending on your context
• DO NOT MAKE ASSUMPTIONS!
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi

Recommended for you

Stefan stolniceanu spritekit, 2 d or not 2d
Stefan stolniceanu   spritekit, 2 d or not 2dStefan stolniceanu   spritekit, 2 d or not 2d
Stefan stolniceanu spritekit, 2 d or not 2d

SpriteKit is a framework for building 2D games and graphics-intensive apps. It provides nodes for sprites, shapes, particles, video and more. SpriteKit handles animation, physics simulation and the game loop. Key features include sprite nodes, emitter nodes, actions for animation, a physics engine, and scenes to display content in the game world.

Sizing epics tales from an agile kingdom
Sizing epics   tales from an agile kingdomSizing epics   tales from an agile kingdom
Sizing epics tales from an agile kingdom

The knights in the Agile Kingdom faced challenges sizing epics due to their variable size, complexity, and uncertainty. They developed two recipes - the Blue Recipe which involved planning poker and multiplication, and the Green Recipe which broke down an epic into user stories first. However, neither scale worked well for very large epics. They adapted by using a recently sized existing epic as a benchmark and rescaling. This allowed them to estimate the sizes of three sample epics as 5, 8, and 20 epic points, providing high-level sizing while addressing the issues of comparing variable epics.

Scale net apps in aws
Scale net apps in awsScale net apps in aws
Scale net apps in aws

This document discusses how to auto scale .NET applications in Amazon Web Services. It covers key concepts like scalability versus auto scaling, using a load balancer and solving session issues for web applications, and monitoring applications to enable auto scaling. The document provides an example of scaling an application from 2 web servers and 3 application servers in 2012 to 3 SQL servers and more elastic resources like SQS and ElastiCache by 2015. It also discusses best practices for auto scaling like using out-of-process sessions, log collection, and setting CloudWatch alarms to trigger auto scaling rules.

Further resources
• http://alistapart.com/article/responsive-web-design
• http://httparchive.org/interesting.php

• http://googlewebmastercentral.blogspot.ro/2010/04/using-site-speed-inweb-search-ranking.html
• https://github.com/scottjehl/picturefill
• http://www.w3.org/TR/html-picture-element/
• http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/

• http://adaptive-images.com/
• http://addyosmani.com/blog/image-optimization-tools/
• http://www.netvlies.nl/blog/design-interactie/retina-revolution
• http://css-tricks.com/which-responsive-images-solution-should-you-use/

• http://mobile.smashingmagazine.com/2013/09/16/responsive-imagesperformance-problem-case-study/
• http://mobile.smashingmagazine.com/2013/07/22/simple-responsiveimages-with-css-backgrounds/
Q&A
Vlad Zelinschi
@vladzelinschi

More Related Content

Similar to Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi

Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Responsive images, an html 5.1 standard
Responsive images, an html 5.1 standardResponsive images, an html 5.1 standard
Responsive images, an html 5.1 standard
Andrea Verlicchi
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Salem Ghoweri
 
2022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.02022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.0
Andrea Verlicchi
 
Getting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernGetting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James Halpern
FITC
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
Vera Kovaleva
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
GaziAhsan
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Frédéric Harper
 
FITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive ImagesFITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive Images
Rami Sayar
 
Improving Game Performance in the Browser
Improving Game Performance in the BrowserImproving Game Performance in the Browser
Improving Game Performance in the Browser
FITC
 
The high resolution web
The high resolution webThe high resolution web
The high resolution web
Patric Lanhed
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Yandex
 
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
Aidan Foster
 
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and Performance
Maximiliano Firtman
 
Picture Perfect: Images for Coders
Picture Perfect: Images for CodersPicture Perfect: Images for Coders
Picture Perfect: Images for Coders
Kevin Gisi
 
Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Ram Singh
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Cantina
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
Wojtek Zając
 
Responsive design and retina displays
Responsive design and retina displaysResponsive design and retina displays
Responsive design and retina displays
Eli McMakin
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
Mike Wilcox
 

Similar to Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi (20)

Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Responsive images, an html 5.1 standard
Responsive images, an html 5.1 standardResponsive images, an html 5.1 standard
Responsive images, an html 5.1 standard
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
 
2022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.02022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.0
 
Getting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernGetting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James Halpern
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
 
FITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive ImagesFITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive Images
 
Improving Game Performance in the Browser
Improving Game Performance in the BrowserImproving Game Performance in the Browser
Improving Game Performance in the Browser
 
The high resolution web
The high resolution webThe high resolution web
The high resolution web
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
 
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and Performance
 
Picture Perfect: Images for Coders
Picture Perfect: Images for CodersPicture Perfect: Images for Coders
Picture Perfect: Images for Coders
 
Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
Responsive design and retina displays
Responsive design and retina displaysResponsive design and retina displays
Responsive design and retina displays
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 

More from Codecamp Romania

Cezar chitac the edge of experience
Cezar chitac   the edge of experienceCezar chitac   the edge of experience
Cezar chitac the edge of experience
Codecamp Romania
 
Cloud powered search
Cloud powered searchCloud powered search
Cloud powered search
Codecamp Romania
 
Ccp
CcpCcp
Business analysis techniques exercise your 6-pack
Business analysis techniques   exercise your 6-packBusiness analysis techniques   exercise your 6-pack
Business analysis techniques exercise your 6-pack
Codecamp Romania
 
Bpm company code camp - configuration or coding with pega
Bpm company   code camp - configuration or coding with pegaBpm company   code camp - configuration or coding with pega
Bpm company code camp - configuration or coding with pega
Codecamp Romania
 
Andrei prisacaru takingtheunitteststothedatabase
Andrei prisacaru takingtheunitteststothedatabaseAndrei prisacaru takingtheunitteststothedatabase
Andrei prisacaru takingtheunitteststothedatabase
Codecamp Romania
 
Agility and life
Agility and lifeAgility and life
Agility and life
Codecamp Romania
 
2015 dan ardelean develop for windows 10
2015 dan ardelean   develop for windows 10 2015 dan ardelean   develop for windows 10
2015 dan ardelean develop for windows 10
Codecamp Romania
 
The bigrewrite
The bigrewriteThe bigrewrite
The bigrewrite
Codecamp Romania
 
The case for continuous delivery
The case for continuous deliveryThe case for continuous delivery
The case for continuous delivery
Codecamp Romania
 
Stefan stolniceanu spritekit, 2 d or not 2d
Stefan stolniceanu   spritekit, 2 d or not 2dStefan stolniceanu   spritekit, 2 d or not 2d
Stefan stolniceanu spritekit, 2 d or not 2d
Codecamp Romania
 
Sizing epics tales from an agile kingdom
Sizing epics   tales from an agile kingdomSizing epics   tales from an agile kingdom
Sizing epics tales from an agile kingdom
Codecamp Romania
 
Scale net apps in aws
Scale net apps in awsScale net apps in aws
Scale net apps in aws
Codecamp Romania
 
Raluca butnaru corina cilibiu the unknown universe of a product and the cer...
Raluca butnaru corina cilibiu   the unknown universe of a product and the cer...Raluca butnaru corina cilibiu   the unknown universe of a product and the cer...
Raluca butnaru corina cilibiu the unknown universe of a product and the cer...
Codecamp Romania
 
Parallel & async processing using tpl dataflow
Parallel & async processing using tpl dataflowParallel & async processing using tpl dataflow
Parallel & async processing using tpl dataflow
Codecamp Romania
 
Material design screen transitions in android
Material design screen transitions in androidMaterial design screen transitions in android
Material design screen transitions in android
Codecamp Romania
 
Kickstart your own freelancing career
Kickstart your own freelancing careerKickstart your own freelancing career
Kickstart your own freelancing career
Codecamp Romania
 
Ionut grecu the soft stuff is the hard stuff. the agile soft skills toolkit
Ionut grecu   the soft stuff is the hard stuff. the agile soft skills toolkitIonut grecu   the soft stuff is the hard stuff. the agile soft skills toolkit
Ionut grecu the soft stuff is the hard stuff. the agile soft skills toolkit
Codecamp Romania
 
Ecma6 in the wild
Ecma6 in the wildEcma6 in the wild
Ecma6 in the wild
Codecamp Romania
 
Diana antohi me against myself or how to fail and move forward
Diana antohi   me against myself  or how to fail  and move forwardDiana antohi   me against myself  or how to fail  and move forward
Diana antohi me against myself or how to fail and move forward
Codecamp Romania
 

More from Codecamp Romania (20)

Cezar chitac the edge of experience
Cezar chitac   the edge of experienceCezar chitac   the edge of experience
Cezar chitac the edge of experience
 
Cloud powered search
Cloud powered searchCloud powered search
Cloud powered search
 
Ccp
CcpCcp
Ccp
 
Business analysis techniques exercise your 6-pack
Business analysis techniques   exercise your 6-packBusiness analysis techniques   exercise your 6-pack
Business analysis techniques exercise your 6-pack
 
Bpm company code camp - configuration or coding with pega
Bpm company   code camp - configuration or coding with pegaBpm company   code camp - configuration or coding with pega
Bpm company code camp - configuration or coding with pega
 
Andrei prisacaru takingtheunitteststothedatabase
Andrei prisacaru takingtheunitteststothedatabaseAndrei prisacaru takingtheunitteststothedatabase
Andrei prisacaru takingtheunitteststothedatabase
 
Agility and life
Agility and lifeAgility and life
Agility and life
 
2015 dan ardelean develop for windows 10
2015 dan ardelean   develop for windows 10 2015 dan ardelean   develop for windows 10
2015 dan ardelean develop for windows 10
 
The bigrewrite
The bigrewriteThe bigrewrite
The bigrewrite
 
The case for continuous delivery
The case for continuous deliveryThe case for continuous delivery
The case for continuous delivery
 
Stefan stolniceanu spritekit, 2 d or not 2d
Stefan stolniceanu   spritekit, 2 d or not 2dStefan stolniceanu   spritekit, 2 d or not 2d
Stefan stolniceanu spritekit, 2 d or not 2d
 
Sizing epics tales from an agile kingdom
Sizing epics   tales from an agile kingdomSizing epics   tales from an agile kingdom
Sizing epics tales from an agile kingdom
 
Scale net apps in aws
Scale net apps in awsScale net apps in aws
Scale net apps in aws
 
Raluca butnaru corina cilibiu the unknown universe of a product and the cer...
Raluca butnaru corina cilibiu   the unknown universe of a product and the cer...Raluca butnaru corina cilibiu   the unknown universe of a product and the cer...
Raluca butnaru corina cilibiu the unknown universe of a product and the cer...
 
Parallel & async processing using tpl dataflow
Parallel & async processing using tpl dataflowParallel & async processing using tpl dataflow
Parallel & async processing using tpl dataflow
 
Material design screen transitions in android
Material design screen transitions in androidMaterial design screen transitions in android
Material design screen transitions in android
 
Kickstart your own freelancing career
Kickstart your own freelancing careerKickstart your own freelancing career
Kickstart your own freelancing career
 
Ionut grecu the soft stuff is the hard stuff. the agile soft skills toolkit
Ionut grecu   the soft stuff is the hard stuff. the agile soft skills toolkitIonut grecu   the soft stuff is the hard stuff. the agile soft skills toolkit
Ionut grecu the soft stuff is the hard stuff. the agile soft skills toolkit
 
Ecma6 in the wild
Ecma6 in the wildEcma6 in the wild
Ecma6 in the wild
 
Diana antohi me against myself or how to fail and move forward
Diana antohi   me against myself  or how to fail  and move forwardDiana antohi   me against myself  or how to fail  and move forward
Diana antohi me against myself or how to fail and move forward
 

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
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
論文紹介: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
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
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
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
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
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
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
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 

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
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
論文紹介: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 ...
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
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
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
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
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
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
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 

Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi

  • 1. Responsive images in the wild Vlad Zelinschi Front-end developer @ @vladzelinschi
  • 3. var codecamper = ‘you’; if (codecamper && ‘responsive images’) { console.log(‘Happy!’); } else { console.log(‘Oh no!’); }
  • 4. var codecamper = ‘you’; if (codecamper && ‘responsive images’) { console.log(‘Happy!’); } else { console.log(‘Oh no!’); }
  • 7. ‘’Responsive’’ +/- ‘’design’’ • term(s) coined by Ethan Marcotte in 2010 in an article written for A list apart • a new mindset • invaded by a plethora of devices • break from standard web development process
  • 8. Responsive design challenges • it’s a must in these days • users want the same (if not better) experience • compatibility & A LOT of devices • bandwith, slow connectivity, latency, data traffic plan
  • 10. Images • visual impact • create & define user emotions • art • no img = designer will kill you • a big/ important part of the web
  • 13. Responsive design limitations + HQ lovely images = ...
  • 15. Performance is a must also because... • starting from 2010 Google includes loading time in Page Rank • for online businesses every wasted second is lost money • your product is a reflection of who you are as a company/developer/etc.
  • 16. 47% of users expect a web page to load in two seconds 40% of users will abandon a web page if it takes more than three seconds to load
  • 17. The DON’T DO THIS OR I WILL PERSONALLY TRACK YOU AND KILL YOU IN YOUR SLEEP example
  • 20. Site summary • no distinction between mobile/desktop images • 285 requests • 13.6 MB transferred (no cache) • onLoad event after 11s (on cable connection) • 181 images requests = 7.2 MB • it’s OPTIMIZED! (no kidding...)
  • 24. Main problem Serve the user only what he needs in terms of: • bytes • image resolution Also don’t break the layout and keep the site fluid and adaptive
  • 25. Solution one (CSS) div { background-image: url(img/large.png); @media screen and (max-width: 600px) { background-image: url(img/small.png); } }
  • 26. Advantages • easy to implement • good user control (because of mq) • multiple backgrounds Disadvantages • no separation of style & content • losing semantics (add role=‘’img”) • request each time (ex: browser resize)
  • 27. Solution two (SVG) • late recommendation from W3C • vectors, vectors, vectors... • use it as image source, background-image, directly in your markup, data-uri, etc.
  • 28. Advantages • scales nicely, no blur, vector based • lots of possibilities • one request Disadvantages • no IE 8 (that’s a shame...) • no Android 2.3 or lower • complex shapes can take up lots of space (bytes)
  • 29. Solution three - picturefill.js <span data-picture> <span data-src="medium.jpg" data-media="(min-width: 400px)"> </span> <span data-src="large.jpg" data-media="(min-width: 800px)"> </span> <!-- Non-JS browsers --> <noscript> <img src="external/img/small.jpg"> </noscript> </span>
  • 30. Advantages • lightweight ~0.5kb • better semantics because of img • good browser support (even IE8 and non-js browsers if needed) • support for retina Disadvantages • nasty markup
  • 31. Future solutions • picture element and srcset attribute • proposed, not yet implemented • can (and should) be used together • aim to solve the responsive images problem and keep things coupled in markup only
  • 32. <picture> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg"> <p>Accessible text</p> </picture> <picture> <source media="(min-width: 45em)" srcset="large.jpg 2x"> <!-- assume media all --> <source srcset="small.jpg 1x, small.jpg 2x"> </picture>
  • 33. Advantages • it will be a native solution (someday....) • control everything from markup Disadvantages • nasty markup...AGAIN! • based only on device resolution & DPR • it will be a native solution (someday...)
  • 34. Thoughts and things to look after • think about server too (resize after upload, Matt Wilcox’s adaptive images) • always, always, ALWAYS optimize your images (Grunt tasks, online services, CLI, etc.) • NetworkInformation.connection (experimental – only in Android, Gecko 12.0 and above) var conn = navigator.connection; console.log(conn.speed);
  • 37. There is no perfect solution!
  • 38. How to chose your solution • do I have legacy content I can’t update/modify • do I care about semantics, validity and accessibility • do I care about non-JS users • can I afford extra requests • is a 3rd party solution acceptable (cloud services, etc.) • browser legacy & support
  • 39. Take away • have a strategy from the beginning • analyze & try to predict problems • chose depending on your context • DO NOT MAKE ASSUMPTIONS!
  • 41. Further resources • http://alistapart.com/article/responsive-web-design • http://httparchive.org/interesting.php • http://googlewebmastercentral.blogspot.ro/2010/04/using-site-speed-inweb-search-ranking.html • https://github.com/scottjehl/picturefill • http://www.w3.org/TR/html-picture-element/ • http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ • http://adaptive-images.com/ • http://addyosmani.com/blog/image-optimization-tools/ • http://www.netvlies.nl/blog/design-interactie/retina-revolution • http://css-tricks.com/which-responsive-images-solution-should-you-use/ • http://mobile.smashingmagazine.com/2013/09/16/responsive-imagesperformance-problem-case-study/ • http://mobile.smashingmagazine.com/2013/07/22/simple-responsiveimages-with-css-backgrounds/