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
110
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
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
プロセス改善による品質向上事例
tomasagi
1
1.6k
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
アジャイル開発とスクラム
araihara
0
160
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
Featured
See All Featured
Faster Mobile Websites
deanohume
306
31k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Scaling GitHub
holman
459
140k
Optimizing for Happiness
mojombo
376
70k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Producing Creativity
orderedlist
PRO
343
39k
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