techcamp aavn-chanh pham

Make responsive design more responsive

Presenter: Chanh Pham

• Responsive web design (RWD)

• Current challenges

• Best practices

Content

Responsive web design (RWD)

Media rule

Media type

Media features

• Choose breakpoints

• Design for each breakpoint

• Create CSS for each viewport

To do

Responsive web design (RWD)

IS IT SIMPLE?

Responsive web design (RWD)

• Images

• Embedded third parties

• Navigation

• Tables

• Responsive layout

Problems in RWD

Using image in RWD

Image compression

Icon fonts

Responsive image markup

Using image in RWD

https://github.com/scottjehl/picturefill

Embedded third parties in RWD

Navigation in RWD

Dropdown menu

Navigation in RWD

Toggle navigation

Navigation in RWD

Off canvas navigation

Navigation in RWD

Table in RWD

Table column

toggle

Table in RWD

Responsive table

Table in RWD

Responsive data

table

Flexible box layout model

Responsive layout

Flex container

Flex item Flex item Flex item

Flexbox example

• Typography (rem unit)

• Mobile first

• Adaptive content

Best pratices

THANK YOU