Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Responsive Web
Search
Sébastien Dussaut
June 06, 2013
Programming
1
170
Responsive Web
My talk about Responsive Design at Fred Meetup, Geneva June 6th
Sébastien Dussaut
June 06, 2013
Tweet
Share
Other Decks in Programming
See All in Programming
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
700
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
4.5k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
What's in a price? How to price your products and services
michaelherold
246
12k
How to Ace a Technical Interview
jacobian
277
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Faster Mobile Websites
deanohume
307
31k
For a Future-Friendly Web
brad_frost
179
9.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Agile that works and the tools we love
rasmusluckow
329
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Docker and Python
trallard
44
3.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
Responsive Web Meetup Genève 6 juin 2013 - Nomades Advanced
Technologies samedi 8 juin 13
l’agence front-end Développement front-end Responsive design switch-company.com samedi 8 juin
13
http://www.flickr.com/photos/mroach/3922903520 Responsive design donne la capacité à un contenu de
s’adapter au medium sur lequel il est consulté. http://www.flickr.com/photos/mroach/3922903520/ samedi 8 juin 13
http://www.flickr.com/photos/ frankieclarke/3184140616/ Responsive design regroupe un ensemble d’outils et techniques
: • CSS Media Queries • gestion des images • chargement différé des scripts • amélioration progressive samedi 8 juin 13
http://www.flickr.com/photos/mroach/3922903520 Démarche active • éditorial • UI et UX •
contextes • adaptations http://www.flickr.com/photos/ marcocrupivisualartist/5427768743/ samedi 8 juin 13
http://www.flickr.com/photos/mroach/3922903520 http://www.flickr.com/photos/marcocrupi visualartist/5427768743 En moyenne, jusqu’à 30 à 40% plus
cher qu’un site non-responsive http://www.flickr.com/photos/captainredstorm/5894912614/ samedi 8 juin 13
http://www.flickr.com/photos/ mrjones4u/8648147077/ Plus petit dénominateur commun ? samedi 8 juin
13
http://www.flickr.com/photos/ mrjones4u/8648147077/ Adaptabilité du contenu Media Queries samedi 8 juin
13
http://www.flickr.com/photos/ mrjones4u/8648147077/ Plus petit dénominateur commun : • Media Queries
• Gestion des images samedi 8 juin 13
• habitudes de travail qui évoluent • impact positif sur
les développements http://www.flickr.com/photos/meladegypsie/789054974/ samedi 8 juin 13
http://www.flickr.com/photos/ neilgundel/1700936372/ Chaque projet est unique… samedi 8 juin 13
http://www.flickr.com/photos/ xden/3598769929/ … et a ses propres besoins, contraintes et
possibilités samedi 8 juin 13
Gradation • site • terminaux • budget • temps http://www.flickr.com/photos/
johnidis/8641860140/ samedi 8 juin 13
Gestion des images - switch-company.com • 4 approches différentes samedi
8 juin 13
Gestion des images - switch-company.com • servir des images HD
// loading HD medias @media (min-resolution: 144dpi) { @import "2x.css"; } samedi 8 juin 13
Gestion des images - switch-company.com • images de décoration en
sprite + via Javascript samedi 8 juin 13
Gestion des images - switch-company.com • pictogrammes via une police
de caractères li:before { color: #53565a; content: "m"; // map picto font-family: "SwitchIcons"; font-size: 18px; } samedi 8 juin 13
Gestion des images - switch-company.com • forte compression JPG +
redimensionnement • dimensions x 1,5 - 2 • compression 30% - 40% samedi 8 juin 13
Gestion des scripts - francine.fr • 2 approches distinctes samedi
8 juin 13
Gestion des scripts - francine.fr • forte modularisation • séparation
scripts mobiles / desktop • 2 builds de la bibliothèque principale enderjs samedi 8 juin 13
Gestion des scripts - francine.fr • mise en cache dans
le localStorage • lazy loading • chargement au besoin Francine.files = [ lib, // main library '/medias/js/francine.js', // common scripts '/medias/js/forms.js', // forms script '/medias/js/autocomplete.js', // autocomplete script // main scripts ]; samedi 8 juin 13
Merci pour votre attention ! • Twitter : @sdussaut @switch_company
• switch-company.com samedi 8 juin 13