RESPONSIVE DESIGN mobil e ma tu e rs ide a A website should look - - PowerPoint PPT Presentation

▶
responsive design
SMART_READER_LITE
LIVE PREVIEW

RESPONSIVE DESIGN mobil e ma tu e rs ide a A website should look - - PowerPoint PPT Presentation

Jul 25, 2023 156 likes •294 views

CS 498RK SPRING 2019 RESPONSIVE DESIGN mobil e ma tu e rs ide a A website should look good on every display, from wide screens to mobile devices. RESPONSIVE DESIGN Eliminates the distinction between mobile and desktop websites.

slide-1
SLIDE 1

SPRING 2019 CS 498RK

RESPONSIVE DESIGN

mobile matuers

slide-2
SLIDE 2

idea

A website should look good on every display, from wide screens to mobile devices.

slide-3
SLIDE 3

RESPONSIVE DESIGN

  • Eliminates the distinction

between mobile and desktop websites.

  • Allows a single codebase that is

displayed differently in various screen sizes

  • Achieved through media queries

https://developers.google.com/web/fundamentals/design-and-ux/responsive/

slide-4
SLIDE 4

4% 47%

49%

Mobile Desktop Tablet

slide-5
SLIDE 5

https://internetingishard.com/html-and-css/responsive-design

slide-6
SLIDE 6

MEDIA QUERIES

@media only screen and (min-width: 961px) { <regular-css-rules> }

slide-7
SLIDE 7

MEDIA QUERIES

@media only screen and (min-width: 961px) { <regular-css-rules> }

at-rule media type media feature

slide-8
SLIDE 8

VIEWPORT ZOOMING

<meta name='viewport' content='width=device-width, initial-scale=1.0'/>

  • By default, mobile devices zoom out to fit

entire desktop layout onto the viewport.

  • This prevents mobile devices from

rendering responsive designs,

  • In order to disable it, we need to specify

a <meta> tag in the <head>

https://internetingishard.com/html-and-css/responsive-design

slide-9
SLIDE 9

DESIGN

https://internetingishard.com/html-and-css/responsive-design

  • Start with the design of how the

website will look at every breakpoint.

  • Various responsive design patterns
  • exist. (Mostly Fluid, Column Drop,

Layout Shifuer, etc.)

  • Implement them using media

queries.

  • We will use Layout Shifuer.
slide-10
SLIDE 10

DESIGN

https://internetingishard.com/html-and-css/responsive-design

  • Fluid Layout: Content stretches/shrinks to fill the entire viewport.
  • Fixed-Width Layout: Content has the same width regardless of the viewport
  • Generally, Mobile/Tablet → Fluid, Desktop → Fixed-Width
slide-11
SLIDE 11

BASIC PRINCIPLES

  • Mobile-First: Start implementing mobile version first

to maximize code reuse.

  • Choosing Breakpoints: Don’t need to be device

specific (i.e. iPhone X vs Galaxy S9). Take advantage

  • f ranges.
  • Relative vs Static Units: Use relative units when you

want your content to adapt (when you don’t have enough screen real-estate), static units when you want the same look (when you have enough space).

http://blog.froont.com/9-basic-principles-of-responsive-web-design/

slide-12
SLIDE 12

demo

https:/ /github.com/uiuc- web-programming/ responsive-demo

slide-13
SLIDE 13

RESOURCES

https://internetingishard.com/html-and-css/responsive-design https://developers.google.com/web/fundamentals/design-and-ux/responsive/ https://alistapart.com/article/responsive-web-design/ http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet