Responsive Design Ombu Labs, April 2015

Develop a website design that helps the lay out to get changed according to the screen resolution.

It is centered around fluidity, flexibility and adaptability.

Screen ResolutionResolutions can be defined in an assortment of

breakpoints, but there are several major sizes that you need to focus on more than any others.

1024px / 768px / 480px / 320px

Mobile First• It is a methodology: build the small screen first and then progressively modify the layout as more screen space becomes available. • Only the minimum required files are loaded • It is Ideal for mobile devices that don’t support media

queries.

Content Focus• Design with the content that will be used for the

final site • Understand how the content will be layed out in

your small screen • Let the content define the breakpoints

Media QueriesThe @media rule is used to define different style rules

for different media types/devices (CSS3) !

Media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside

Source: caniuse.com

@media widthProportional Media Queries,

based on relative units, no fixed width Relative to the ‘font-size’ value

!@media all and (min-width: 41em)

@media valuesThere are some other values that can be used

!@media all and (min-width: 41em) and (orientation:landscape) and (min-height:60em){! color: #000000;!}

@media logicWe can use not, and & only to be more specific

!@media (min-width: 41em) and (orientation:landscape){! color: #000000;!}!

@media orderStart we narrower viewports if it is mobile first

@media (min-width: 48em) {background: blue;}!@media (min-width: 80em) {background: red;}!

!If not, you have to use max-width

@media (max-width: 80em) {background: blue;}!@media (max-width: 48em) {background: red;}!

SASS!

Breakpoints can be set as variables $breakpoint-1 : 24em;

$breakpoint-2 : 46.8em; $breakpoint-3 : 50em; $breakpoint-4 : 73em;

@media (max-width: $breakpoint-4) !{background: blue;}!

More!• www.w3schools.com/cssref/css3_pr_mediaquery.asp • developer.mozilla.org/es/docs/CSS/Media_queries • caniuse.com • responsivedesign.is • breakpoint-sass.com

THANK YOU! !

questions?