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 Revolution
Search
serge lerner
November 13, 2013
Technology
2
120
Responsive Revolution
Points to keep in-mind while (and before) developing a responsive web project.
serge lerner
November 13, 2013
Tweet
Share
Other Decks in Technology
See All in Technology
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
450
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability through SRE
kohbis
1
120
怖くない!はじめてのClaude Code
shinya337
0
400
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
AI専用のリンターを作る #yumemi_patch
bengo4com
6
4.3k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
230
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
290
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
3.9k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
4 Signs Your Business is Dying
shpigford
184
22k
A Tale of Four Properties
chriscoyier
160
23k
Designing for humans not robots
tammielis
253
25k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Writing Fast Ruby
sferik
628
62k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Transcript
Responsive Revolution
Sergey Lerner Industrial designer Front End Developer
STOP for a moment!
Think like Gary
STYLE
None
STYLE • Usually consistent, But sometimes Not. • Probably will
change in the future. • Should be defined in one place. • Reduce Dependence on Images with CSS. • If its Vector use vector. • Use Relative Units. • Please work with style guides.
LAYOUT
None
LAYOUT • Destine to change. • Always develop a Fluid
Architecture. • Consider different building approaches.
Dude where’s my flying car ?! LOGIC
Dude where’s my flying car ?!
LOGIC • Don’t overkill (Avoid Including Bulky JS Libraries If
You Can Help It). • Use Feature-detection. • Know when to initialize / destroy. • Maybe better of with CSS ?!
PERFORMANCE
None
PERFORMANCE • Consider mobile latency. • Consider CPU. • Load
only what you need. • Avoid Bloats of code. • Look into Rendering. • Large Images are dangerous. • Use Data URIs to Save HTTP Requests.
DEVICE CAPABILITIES
None
DEVICE CAPABILITIES • Touch gestures. • SMS, Call. • Hover.
• URIs: open application. • Use Semantic html to open native Inputs.
CHALLENGES
None
If you're not failing every now and again, it's a
sign you're not doing anything very innovative. Woody Allen
header footer body social gallery navigation feature
None
None
STYLE LAYOUT LOGIC PERFORMANCE DEVICE CAPABILITIES CHALANGES
None
None
None
None
TOOLS to make it just a little bit easier:
Thank You