Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Responsive Web Design

Avatar for Georgi Gyurov Georgi Gyurov
December 11, 2013
Programming
120
0

Responsive Web Design

Basic presentation on what responsive design is.

Avatar for Georgi Gyurov

Georgi Gyurov

December 11, 2013

Other Decks in Programming

See All in Programming
UPDATE をやめる — EF Core でマスタをバージョン管理する
Avatar for HideyukiKitao panda728
PRO
0
1.2k
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
Avatar for Seiji Takahashi timakin
5
3.6k
AWS CDKのカスタムリソースでContinuum（旧Security Agent）を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
150
ソニーのクラウド共通基盤の変遷と AI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
Avatar for KenjiYoneyama kenjiyoneyama
0
270
現場と育てるRailsモデリング 〜Spreadsheetから始めたモデル設計〜
Avatar for siroemk siroemk
2
590
見えないものを探る要求要件定義に必要な基本的思考 / invisible-requirement-thinking
Avatar for MinoDriven minodriven
15
8.5k
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
Avatar for Nao-RandD nao_randd
0
160
iOS 27でニュースアプリはどう変わる！？ 〜日経電子版の新機能対応と、開発事例から〜
Avatar for Kazuki Nakashima lynnswap
7
13k
contenteditable と日本語入力に向き合う
Avatar for taki colorful12
0
200
當我們開始不讀 Code - AI Agent 時代，Code Review 與 Clean Code 還剩下什麼？
Avatar for James Wang jame2408
1
210
Kotlinの15年とServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
150
APNsからLive Activityを開始する話
Avatar for Ryotaro Onoue yumnumm
0
170

Featured

See All Featured
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
550
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
58k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
31k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.6k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
10
1.2k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.9k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.9k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
360
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
890
Leo the Paperboy
Avatar for Maya Tellez mayatellez
10
2.4k

Transcript

  1. RESPONSIVE W E B D E S I G N

    BY GEORGI GYUROV

  2. THE RISE OF MOBILE WEB

  3. 2010 2013 In 2010 the percentage of page views from

    a mobile device was 2,9% In 2013 17,4%

  4. Over 1.2 billion people access the web from their mobile

    devices

  5. In 2010 Ethan Marcotte coined the term

  6. One website, multiple layouts

  7. None
  8. None
  9. None

  10. HOW RESPONSIVE DESIGN WORKS

  11. Non-responsive Responsive

  12. Ethan Marcotte defines RWD with 3 main criteria

  13. A Flexible, Grid-based Layout This allows your layout to reflow

    to the screen size of any device

  14. Flexible Images and Media (Videos, etc.) This allows your images

    and videos to reflow with the layout

  15. CSS3 Media Queries This allows you to control each layout

    so that content is displayed optimally

  16. PROBLEM #1

  17. Media queries are not supported by some mobile In fact,

    many

  18. SOLUTION?

  19. MOBILE FIRST

  20. s PROBLEM #2

  21. Media queries are not supported by older versions of Internet

    Explorer(6-8)

  22. Luckily, there are

  23. s Modernizr.js A Feature Detection Library for HTML5 & CSS3

  24. CREATING FLUID IMAGES & VIDEOS

  25. s Creating fluid images is easy .img { max-width: 100%;

    }

  26. s We can do the same with fluid videos HTML:

    <video width=“100%”> </video> CSS: video { width: 100% !important; height: 100% !important; }

  27. www.ggyurov.eu @georgigyurov7