SlideShare a Scribd company logo

Intro to @viewport & other new Responsive Web Design CSS features

From meta viewport to @viewport and from device-pixel-ratio to the resolution media query: various responsive design hooks are undergoing standardization, allowing for future-proof sites that work well in different contexts. In addition, new CSS features like object-fit, relative length units and so on are increasingly supported by browsers as well, and allow for more versatile responsive design solutions. In my talk, I will look at these features and explain how they can be used in websites today.

1 of 98
Download to read offline
Intro to @viewport & other new
Responsive Web Design CSS features
Andreas Bovens | Opera Software | @andreasbovens | #SOTB4
What have we been up to?
Opera for Android
phones & tablets
Opera for
Windows & Mac
Opera Mini for
Java & BlackBerry
Intro to @viewport & other new Responsive Web Design CSS features

Recommended

Idiot's Guide to viewport and pixel
Idiot's Guide to viewport and pixelIdiot's Guide to viewport and pixel
Idiot's Guide to viewport and pixelNathan Campos
 
HTML5 and CSS3 Shizzle
HTML5 and CSS3 ShizzleHTML5 and CSS3 Shizzle
HTML5 and CSS3 ShizzleChris Mills
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreRemy Sharp
 
Get Back in Control of your SQL with jOOQ - GeekOut by ZeroTurnaround
Get Back in Control of your SQL with jOOQ - GeekOut by ZeroTurnaroundGet Back in Control of your SQL with jOOQ - GeekOut by ZeroTurnaround
Get Back in Control of your SQL with jOOQ - GeekOut by ZeroTurnaroundDataGeekery
 
Deliver Business Value Faster with AWS Step Functions
Deliver Business Value Faster with AWS Step FunctionsDeliver Business Value Faster with AWS Step Functions
Deliver Business Value Faster with AWS Step FunctionsDaniel Zivkovic
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptfranksvalli
 

More Related Content

What's hot

A frame beginner lesson
A frame beginner lessonA frame beginner lesson
A frame beginner lessonDaosheng Mu
 
Integrate CI/CD Pipelines with Jira Software Cloud
Integrate CI/CD Pipelines with Jira Software CloudIntegrate CI/CD Pipelines with Jira Software Cloud
Integrate CI/CD Pipelines with Jira Software CloudAtlassian
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptGuy Royse
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"Chris Mills
 
Web versus Native: round 1!
Web versus Native: round 1!Web versus Native: round 1!
Web versus Native: round 1!Chris Mills
 
APIs, now and in the future
APIs, now and in the futureAPIs, now and in the future
APIs, now and in the futureChris Mills
 
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점Jeado Ko
 
Bootstrap과 UI-Bootstrap
Bootstrap과 UI-BootstrapBootstrap과 UI-Bootstrap
Bootstrap과 UI-BootstrapWebFrameworks
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQueryRemy Sharp
 
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebEduardo Shiota Yasuda
 
The DOM is a Mess @ Yahoo
The DOM is a Mess @ YahooThe DOM is a Mess @ Yahoo
The DOM is a Mess @ Yahoojeresig
 
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...Sencha
 
Symfony tips and tricks
Symfony tips and tricksSymfony tips and tricks
Symfony tips and tricksJavier Eguiluz
 
Introduction to WebGL and WebVR
Introduction to WebGL and WebVRIntroduction to WebGL and WebVR
Introduction to WebGL and WebVRDaosheng Mu
 
How to ship customer value faster with step functions
How to ship customer value faster with step functionsHow to ship customer value faster with step functions
How to ship customer value faster with step functionsYan Cui
 
Web Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaosWeb Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaosMatteo Papadopoulos
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionPaul Irish
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginningAnis Ahmad
 
An in-depth look at jQuery
An in-depth look at jQueryAn in-depth look at jQuery
An in-depth look at jQueryPaul Bakaus
 
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Codemotion
 

What's hot (20)

A frame beginner lesson
A frame beginner lessonA frame beginner lesson
A frame beginner lesson
 
Integrate CI/CD Pipelines with Jira Software Cloud
Integrate CI/CD Pipelines with Jira Software CloudIntegrate CI/CD Pipelines with Jira Software Cloud
Integrate CI/CD Pipelines with Jira Software Cloud
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"
 
Web versus Native: round 1!
Web versus Native: round 1!Web versus Native: round 1!
Web versus Native: round 1!
 
APIs, now and in the future
APIs, now and in the futureAPIs, now and in the future
APIs, now and in the future
 
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
 
Bootstrap과 UI-Bootstrap
Bootstrap과 UI-BootstrapBootstrap과 UI-Bootstrap
Bootstrap과 UI-Bootstrap
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
 
The DOM is a Mess @ Yahoo
The DOM is a Mess @ YahooThe DOM is a Mess @ Yahoo
The DOM is a Mess @ Yahoo
 
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
 
Symfony tips and tricks
Symfony tips and tricksSymfony tips and tricks
Symfony tips and tricks
 
Introduction to WebGL and WebVR
Introduction to WebGL and WebVRIntroduction to WebGL and WebVR
Introduction to WebGL and WebVR
 
How to ship customer value faster with step functions
How to ship customer value faster with step functionsHow to ship customer value faster with step functions
How to ship customer value faster with step functions
 
Web Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaosWeb Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaos
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & Compression
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
An in-depth look at jQuery
An in-depth look at jQueryAn in-depth look at jQuery
An in-depth look at jQuery
 
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
 

Similar to Intro to @viewport & other new Responsive Web Design CSS features

The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopbetabeers
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queriesStephen Hay
 
Responsive web design
Responsive web designResponsive web design
Responsive web designBen MacNeill
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens
 
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Patrick Lauke
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Webmikeleeme
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.GaziAhsan
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인Daum DNA
 
Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobileDee Sadler
 
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...Esri Nederland
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJason Harwig
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Christian Rokitta
 
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Tom Hermans
 

Similar to Intro to @viewport & other new Responsive Web Design CSS features (20)

The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queries
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
 
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인
 
Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobile
 
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
 

More from Andreas Bovens

Progressive Web Apps: Opera's perspective
Progressive Web Apps: Opera's perspectiveProgressive Web Apps: Opera's perspective
Progressive Web Apps: Opera's perspectiveAndreas Bovens
 
Fast & Furious: Speed in the Opera browser
Fast & Furious: Speed in the Opera browserFast & Furious: Speed in the Opera browser
Fast & Furious: Speed in the Opera browserAndreas Bovens
 
SVG in Opera’s desktop, mobile & TV browsers — edition 2011
SVG in Opera’s desktop, mobile & TV browsers  — edition 2011SVG in Opera’s desktop, mobile & TV browsers  — edition 2011
SVG in Opera’s desktop, mobile & TV browsers — edition 2011Andreas Bovens
 
Building rich apps with HTML5 and friends
Building rich apps with HTML5 and friendsBuilding rich apps with HTML5 and friends
Building rich apps with HTML5 and friendsAndreas Bovens
 
SVG in the Opera browser
SVG in the Opera browserSVG in the Opera browser
SVG in the Opera browserAndreas Bovens
 
Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Andreas Bovens
 
Opera and the Open Web platform
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platformAndreas Bovens
 
Opera Widgets for Desktop and Opera Dragonfly
Opera Widgets for Desktop and Opera DragonflyOpera Widgets for Desktop and Opera Dragonfly
Opera Widgets for Desktop and Opera DragonflyAndreas Bovens
 

More from Andreas Bovens (8)

Progressive Web Apps: Opera's perspective
Progressive Web Apps: Opera's perspectiveProgressive Web Apps: Opera's perspective
Progressive Web Apps: Opera's perspective
 
Fast & Furious: Speed in the Opera browser
Fast & Furious: Speed in the Opera browserFast & Furious: Speed in the Opera browser
Fast & Furious: Speed in the Opera browser
 
SVG in Opera’s desktop, mobile & TV browsers — edition 2011
SVG in Opera’s desktop, mobile & TV browsers  — edition 2011SVG in Opera’s desktop, mobile & TV browsers  — edition 2011
SVG in Opera’s desktop, mobile & TV browsers — edition 2011
 
Building rich apps with HTML5 and friends
Building rich apps with HTML5 and friendsBuilding rich apps with HTML5 and friends
Building rich apps with HTML5 and friends
 
SVG in the Opera browser
SVG in the Opera browserSVG in the Opera browser
SVG in the Opera browser
 
Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)
 
Opera and the Open Web platform
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platform
 
Opera Widgets for Desktop and Opera Dragonfly
Opera Widgets for Desktop and Opera DragonflyOpera Widgets for Desktop and Opera Dragonfly
Opera Widgets for Desktop and Opera Dragonfly
 

Intro to @viewport & other new Responsive Web Design CSS features