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
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
240
XP, Testing and ninja testing
m_seki
3
240
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
240
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
GraphRAGの仕組みまるわかり
tosuri13
8
540
Is Xcode slowly dying out in 2025?
uetyo
1
270
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
160
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
17k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Adopting Sorbet at Scale
ufuk
77
9.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Being A Developer After 40
akosma
90
590k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Typedesign – Prime Four
hannesfritz
42
2.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Speed Design
sergeychernyshev
32
1k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Balancing Empowerment & Direction
lara
1
430
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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