SlideShare a Scribd company logo
Responsive Web Design
in APEX - Theme 25
Christian Rokitta
APEX World 2014
APEX World 2014
APEX World 2014
VOORAF
~ 50 APEX sessions in 4 days +
Symposium day with Oracle Dev Team
kscope14.com
Samenwerkingsverband van
zelfstandige APEX professionals
smart4apex.nl
apex.nl
Agenda
•Responsive Web Design
•APEX/Theme 25
•Beyond
Responsive Web Design
Responsive web design (RWD) covers various
techniques, both client and server side, that
aim to make a website respond to the device it
is viewed on.
It means, writing one codebase that will adapt
your website on every screen size, device and
device orientation, in order to provide the best
possible experience to the user.
Key Techniques of RWD
• CSS @Media queries
• Grid Layouts
• Device/browser detection to
enhance performance of your site
and reduce bloat
@media Queries
aren’t limited to the device width condition: there are
many different properties you can test against using
@media queries, including the device
orientation, height, aspect ratio and resolution
@media screen and (max-device-width: 640px) and (orientation:portrait) {
/* Rules inside the @media condition only apply if the condition is met */
#mydiv {
display: inline-block;
}
}
@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
@media Query Usage - Inline
Put media queries directly in the style sheet.
This is the most common approach.
@media screen and (max-device-width: 640px) and (orientation:portrait) {
/* Rules inside the @media condition only apply if the condition is met */
#mydiv {
display: inline-block;
}
}
@media Query Usage – Import/Link
Use the @import rule to import style rules from
other style sheets.
@import url(style600min.css) screen and (min-width: 600px);
Include a query in a linked style sheet’s media
attribute.
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 800px)"
href="style800.css" />
@media query alternative
Use JavaScript to detect the viewport size and
then set a className to the body element
@media query & CSS Units
• Absolute
• Pixels (px)
• Point (pt) = 1/72 of an inch
• Relative units
• are based on the initial value
• em is relative to the initial value of ‘font-size’ (M)
• Percentages (%)
• Resolution
• dpi/dpcm: dots per ‘inch’/‘centimeter’
Adapt Layout with @media query
Three Column Desktop Layout
Example HTML
<div class="col1">
<p>…</p>
</div>
<div class="col2">
<p>…</p>
</div>
<div class="col3">
<p>…</p>
</div>
Example CSS - desktop
@media (min-device-width: 641px) {
/* target devices with desktop sized resolution */
.col1, .col2, .col3 {
/* Float the columns to create a three-column layout */
padding: 2em;
width: 30%;
margin-right: 1em;
float: left;
}
}
Example CSS - smartphone
@media (max-device-width: 640px) {
/* target devices with smal sized resolution */
.col1, .col2, .col3 {
position: relative;
padding: 2em;
width: 90%;
float: none;
display: block;
margin-right: 0;
}
}
Single Column Smartphone Layout
Floating
Grid – What is it?
• Fixed Grid
• Not necessarily responsive
• Used to layout elements in a regular rhythm
• Fluid/Flexible Grid
• CSS3 Grid Layout
Grid Basics
• Container
• Rows
• Columns:
• width
• gutter (afstand)
Responsive Grid
CSS3 Grid Layout
http://dev.w3.org/csswg/css-grid/
Fixed Website Layouts
A fixed website layout has a
wrapper that is a fixed width, and
the components inside it have
either percentage widths or fixed
widths no matter what screen
resolution.
Fluid Website Layouts
In a fluid website layout the
majority of the components
inside have percentage widths,
and thus adjust to the user’s
screen resolution.
Theme 25: Multiple Fixed Grids
@media screen and min-width 320px and max-width 479px
@media only screen and min-width 480px and max-width 767px
@media only screen and max-width 767px
@media only screen and min-width 768px and max-width 959px
@media only screen and min-width 960px and max-width 1024px
@media screen and min-width 1260px and max-width 1419px
@media screen and min-width 1420px and max-width 1659px
@media screen and min-width 1660px and max-width 1899px
@media screen and min-width 1900px
@media screen and min-width 2540px
APEX Responsive Features
• Declarative way to lay out regions and
items on a page without manual css
overrides (region attributes)
• Allows implementation of other grid
frameworks such as
twitterbootstrap, 960 gs, etc. (template)
Theme 25
Region Grid Layout Attributes
Theme 25 Grid
Page Template Grid Attributes
Page Template Grid Definition
#USED_COLUMNS_NUMBER#
#USED_COLUMNS_ALPHA#
#USED_COLUMNS_ALPHA_MINUS#
#USED_COLUMNS_WORD#
#USED_COLUMNS_PLURAL#
#ROWS#
#COLUMNS#
#COLUMN_NUMBER#
#COLUMN_ALPHA#
#COLUMN_WORD#
#COLUMN_PLURAL#
#COLUMN_SPAN_NUMBER#
#COLUMN_SPAN_ALPHA#
#COLUMN_SPAN_WORD#
#COLUMN_SPAN_PLURAL#
#ATTRIBUTES#
#FIRST_LAST_COLUMN_ATTRIBUTES#
#CONTENT#
CSS Utility Classes
Hide/show content depending on @media query
Responsive Interactive Reports
http://apex.shak.us/post/35664732629/responsive-interactive-reports-in-theme-25
RWD Considerations
• Developing a responsive application can be time
consuming and may require a deep
understanding of grid layout, HTML and CSS.
• Page size remains the same. You are loading the
full HTML, CSS, and JS resources, even on
mobile devices with limited broadband.
• Responsive Web Design is just the tip of the
iceberg.
Theme 25 != Theme 42
Beyond Theme 25
• Navigation
• Data Tables
• Leverage APEX condition feature
with client property detection to
optimize layout generation.
The Grid, the Tab and the Ugly
Responsive Tabs in Theme 42
Responsive Tabs in Theme 42
http://rokitta.blogspot.nl/2013/10/theme-25-responsive-tabs-enhancement.html
Conditionally Show/Hide Content
desktop
mobile
Show/Hide Column: Custom CSS
@media (orientation:portrait) and (max-width: 640px) {
[headers="CUST_STREET_ADDRESS1"], #CUST_STREET_ADDRESS1 {
display: none;
}
}
TH: table headerTD: table data/cell
Responsive Reflow Tables
http://rokitta.blogspot.nl/2014/03/declarative-reflow-table-reports-in.html
Categorizr
http://rokitta.blogspot.nl/2013/05/how-are-you-categorizr-for-apex-part-2.html
Client device property detection
categorizr.isdesktop
categorizr.istablet
categorizr.ismobile
categorizr.isportrait
categorizr.islandscape
Demo
Questions, Answers & Discussion
http://rokitta.blogspot.com
@crokitta
christian@rokitta.nl
http://www.themes4apex.com
http://plus.google.com/u/0/102034735771815472470
http://nl.linkedin.com/in/rokit/

More Related Content

What's hot

Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
Chris Love
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
Russ Weakley
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Nathan Smith
 
How to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public ReleaseHow to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public Release
David Yeiser
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
 
AEM responsive
AEM responsiveAEM responsive
AEM responsive
Damien Antipa
 
Running java apps inside azure | DevTalks 2018 Cluj Napoca Radu Vunvulea
Running java apps inside azure | DevTalks 2018 Cluj Napoca Radu VunvuleaRunning java apps inside azure | DevTalks 2018 Cluj Napoca Radu Vunvulea
Running java apps inside azure | DevTalks 2018 Cluj Napoca Radu Vunvulea
Radu Vunvulea
 
The WordPress Way
The WordPress WayThe WordPress Way
The WordPress Way
Kan Ouivirach, Ph.D.
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
Russ Weakley
 
Efficient theming in Drupal
Efficient theming in DrupalEfficient theming in Drupal
Efficient theming in Drupal
Cedric Spillebeen
 
Experience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - HighlightsExperience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - Highlights
Cédric Hüsler
 
WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structure
keithdevon
 
Clean separation
Clean separationClean separation
Clean separation
atorreno
 
html5_css3
html5_css3html5_css3
The web context
The web contextThe web context
The web context
Dan Phiffer
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
Alberto Apellidos
 
Sq li
Sq liSq li
CSS For Coders
CSS For CodersCSS For Coders
CSS For Coders
ggfergu
 
Wordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for ThemeforestWordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for Themeforest
Enayet Rajib
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
Ron Reiter
 

What's hot (20)

Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
How to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public ReleaseHow to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public Release
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 
AEM responsive
AEM responsiveAEM responsive
AEM responsive
 
Running java apps inside azure | DevTalks 2018 Cluj Napoca Radu Vunvulea
Running java apps inside azure | DevTalks 2018 Cluj Napoca Radu VunvuleaRunning java apps inside azure | DevTalks 2018 Cluj Napoca Radu Vunvulea
Running java apps inside azure | DevTalks 2018 Cluj Napoca Radu Vunvulea
 
The WordPress Way
The WordPress WayThe WordPress Way
The WordPress Way
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
Efficient theming in Drupal
Efficient theming in DrupalEfficient theming in Drupal
Efficient theming in Drupal
 
Experience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - HighlightsExperience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - Highlights
 
WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structure
 
Clean separation
Clean separationClean separation
Clean separation
 
html5_css3
html5_css3html5_css3
html5_css3
 
The web context
The web contextThe web context
The web context
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
Sq li
Sq liSq li
Sq li
 
CSS For Coders
CSS For CodersCSS For Coders
CSS For Coders
 
Wordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for ThemeforestWordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for Themeforest
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 

Viewers also liked

Let's cross the bridge
Let's cross the bridgeLet's cross the bridge
Let's cross the bridgeganidoud
 
The GolfLet
The GolfLetThe GolfLet
The GolfLet
Abe Kim
 
γ 2 1_πραξεις-εξοδος-εισοδος
γ 2 1_πραξεις-εξοδος-εισοδοςγ 2 1_πραξεις-εξοδος-εισοδος
γ 2 1_πραξεις-εξοδος-εισοδοςganidoud
 
G 1 algorithms_programming
G 1 algorithms_programmingG 1 algorithms_programming
G 1 algorithms_programmingganidoud
 
G 5 eisodos_exodos_ekhorisi
G 5 eisodos_exodos_ekhorisiG 5 eisodos_exodos_ekhorisi
G 5 eisodos_exodos_ekhorisiganidoud
 
α 11 internet
α 11 internetα 11 internet
α 11 internetganidoud
 
το λυκόφως του βυζαντίου
το λυκόφως του βυζαντίουτο λυκόφως του βυζαντίου
το λυκόφως του βυζαντίουganidoud
 
Plugins unplugged
Plugins unpluggedPlugins unplugged
Plugins unplugged
Christian Rokitta
 
Introducing the Royal Scottish Geographical Society
Introducing the Royal Scottish Geographical SocietyIntroducing the Royal Scottish Geographical Society
Introducing the Royal Scottish Geographical Society
RSGS
 
Browser Developer Tools
Browser Developer ToolsBrowser Developer Tools
Browser Developer Tools
Christian Rokitta
 
APEX & Cookie Monster
APEX & Cookie MonsterAPEX & Cookie Monster
APEX & Cookie Monster
Christian Rokitta
 
Apex & jQuery Mobile
Apex & jQuery MobileApex & jQuery Mobile
Apex & jQuery Mobile
Christian Rokitta
 
παρουσίαση 9γυμνάσιοκαλαμαριάς 1
παρουσίαση 9γυμνάσιοκαλαμαριάς 1παρουσίαση 9γυμνάσιοκαλαμαριάς 1
παρουσίαση 9γυμνάσιοκαλαμαριάς 1ganidoud
 
Face off apex template and themes - 3.0 - k-scope11
Face off   apex template and themes - 3.0 - k-scope11Face off   apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11
Christian Rokitta
 
"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
Christian Rokitta
 
Oracle APEX & PhoneGap
Oracle APEX & PhoneGapOracle APEX & PhoneGap
Oracle APEX & PhoneGap
Christian Rokitta
 
Oracle APEX URLs Untangled & SEOptimized
Oracle APEX URLs Untangled & SEOptimizedOracle APEX URLs Untangled & SEOptimized
Oracle APEX URLs Untangled & SEOptimized
Christian Rokitta
 

Viewers also liked (17)

Let's cross the bridge
Let's cross the bridgeLet's cross the bridge
Let's cross the bridge
 
The GolfLet
The GolfLetThe GolfLet
The GolfLet
 
γ 2 1_πραξεις-εξοδος-εισοδος
γ 2 1_πραξεις-εξοδος-εισοδοςγ 2 1_πραξεις-εξοδος-εισοδος
γ 2 1_πραξεις-εξοδος-εισοδος
 
G 1 algorithms_programming
G 1 algorithms_programmingG 1 algorithms_programming
G 1 algorithms_programming
 
G 5 eisodos_exodos_ekhorisi
G 5 eisodos_exodos_ekhorisiG 5 eisodos_exodos_ekhorisi
G 5 eisodos_exodos_ekhorisi
 
α 11 internet
α 11 internetα 11 internet
α 11 internet
 
το λυκόφως του βυζαντίου
το λυκόφως του βυζαντίουτο λυκόφως του βυζαντίου
το λυκόφως του βυζαντίου
 
Plugins unplugged
Plugins unpluggedPlugins unplugged
Plugins unplugged
 
Introducing the Royal Scottish Geographical Society
Introducing the Royal Scottish Geographical SocietyIntroducing the Royal Scottish Geographical Society
Introducing the Royal Scottish Geographical Society
 
Browser Developer Tools
Browser Developer ToolsBrowser Developer Tools
Browser Developer Tools
 
APEX & Cookie Monster
APEX & Cookie MonsterAPEX & Cookie Monster
APEX & Cookie Monster
 
Apex & jQuery Mobile
Apex & jQuery MobileApex & jQuery Mobile
Apex & jQuery Mobile
 
παρουσίαση 9γυμνάσιοκαλαμαριάς 1
παρουσίαση 9γυμνάσιοκαλαμαριάς 1παρουσίαση 9γυμνάσιοκαλαμαριάς 1
παρουσίαση 9γυμνάσιοκαλαμαριάς 1
 
Face off apex template and themes - 3.0 - k-scope11
Face off   apex template and themes - 3.0 - k-scope11Face off   apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11
 
"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
 
Oracle APEX & PhoneGap
Oracle APEX & PhoneGapOracle APEX & PhoneGap
Oracle APEX & PhoneGap
 
Oracle APEX URLs Untangled & SEOptimized
Oracle APEX URLs Untangled & SEOptimizedOracle APEX URLs Untangled & SEOptimized
Oracle APEX URLs Untangled & SEOptimized
 

Similar to Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)

Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
Mike Wilcox
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
Shawn Calvert
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Ben MacNeill
 
Lect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptxLect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptx
zainm7032
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic Welterlin
Razorfish
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web Design
Advancio
 
Approaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & DevelopmentApproaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & Development
Keyideas Infotech Private Limited
 
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
 
CSS
CSSCSS
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
Denise Jacobs
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Frédéric Harper
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Andreas Bovens
 
Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13
Frédéric Harper
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Doris Chen
 
Digibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerDigibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David Walker
Lizzie Hodgson
 
Going Responsive with WordPress
Going Responsive with WordPressGoing Responsive with WordPress
Going Responsive with WordPress
James Cryer
 
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignChapter 17: Responsive Web Design
Chapter 17: Responsive Web Design
Steve Guinan
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
admecindia1
 
Responsive Web Designing Fundamentals
Responsive Web Designing FundamentalsResponsive Web Designing Fundamentals
Responsive Web Designing Fundamentals
ADMEC Multimedia Institute
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
SEGIC
 

Similar to Responsive Web Design & APEX Theme 25 (OGh APEX World 2014) (20)

Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Lect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptxLect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptx
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic Welterlin
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web Design
 
Approaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & DevelopmentApproaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & Development
 
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...
 
CSS
CSSCSS
CSS
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
 
Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Digibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerDigibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David Walker
 
Going Responsive with WordPress
Going Responsive with WordPressGoing Responsive with WordPress
Going Responsive with WordPress
 
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignChapter 17: Responsive Web Design
Chapter 17: Responsive Web Design
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
Responsive Web Designing Fundamentals
Responsive Web Designing FundamentalsResponsive Web Designing Fundamentals
Responsive Web Designing Fundamentals
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
 

Recently uploaded

Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
FODUU
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 

Recently uploaded (20)

Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 

Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)

  • 1. Responsive Web Design in APEX - Theme 25 Christian Rokitta APEX World 2014 APEX World 2014 APEX World 2014
  • 2. VOORAF ~ 50 APEX sessions in 4 days + Symposium day with Oracle Dev Team kscope14.com Samenwerkingsverband van zelfstandige APEX professionals smart4apex.nl apex.nl
  • 4. Responsive Web Design Responsive web design (RWD) covers various techniques, both client and server side, that aim to make a website respond to the device it is viewed on. It means, writing one codebase that will adapt your website on every screen size, device and device orientation, in order to provide the best possible experience to the user.
  • 5. Key Techniques of RWD • CSS @Media queries • Grid Layouts • Device/browser detection to enhance performance of your site and reduce bloat
  • 6. @media Queries aren’t limited to the device width condition: there are many different properties you can test against using @media queries, including the device orientation, height, aspect ratio and resolution @media screen and (max-device-width: 640px) and (orientation:portrait) { /* Rules inside the @media condition only apply if the condition is met */ #mydiv { display: inline-block; } } @media all and (orientation:portrait) { … } @media all and (orientation:landscape) { … }
  • 7. @media Query Usage - Inline Put media queries directly in the style sheet. This is the most common approach. @media screen and (max-device-width: 640px) and (orientation:portrait) { /* Rules inside the @media condition only apply if the condition is met */ #mydiv { display: inline-block; } }
  • 8. @media Query Usage – Import/Link Use the @import rule to import style rules from other style sheets. @import url(style600min.css) screen and (min-width: 600px); Include a query in a linked style sheet’s media attribute. <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" />
  • 9. @media query alternative Use JavaScript to detect the viewport size and then set a className to the body element
  • 10. @media query & CSS Units • Absolute • Pixels (px) • Point (pt) = 1/72 of an inch • Relative units • are based on the initial value • em is relative to the initial value of ‘font-size’ (M) • Percentages (%) • Resolution • dpi/dpcm: dots per ‘inch’/‘centimeter’
  • 11. Adapt Layout with @media query
  • 13. Example HTML <div class="col1"> <p>…</p> </div> <div class="col2"> <p>…</p> </div> <div class="col3"> <p>…</p> </div>
  • 14. Example CSS - desktop @media (min-device-width: 641px) { /* target devices with desktop sized resolution */ .col1, .col2, .col3 { /* Float the columns to create a three-column layout */ padding: 2em; width: 30%; margin-right: 1em; float: left; } }
  • 15. Example CSS - smartphone @media (max-device-width: 640px) { /* target devices with smal sized resolution */ .col1, .col2, .col3 { position: relative; padding: 2em; width: 90%; float: none; display: block; margin-right: 0; } }
  • 18. Grid – What is it? • Fixed Grid • Not necessarily responsive • Used to layout elements in a regular rhythm • Fluid/Flexible Grid • CSS3 Grid Layout
  • 19. Grid Basics • Container • Rows • Columns: • width • gutter (afstand)
  • 22. Fixed Website Layouts A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths no matter what screen resolution.
  • 23. Fluid Website Layouts In a fluid website layout the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution.
  • 24. Theme 25: Multiple Fixed Grids @media screen and min-width 320px and max-width 479px @media only screen and min-width 480px and max-width 767px @media only screen and max-width 767px @media only screen and min-width 768px and max-width 959px @media only screen and min-width 960px and max-width 1024px @media screen and min-width 1260px and max-width 1419px @media screen and min-width 1420px and max-width 1659px @media screen and min-width 1660px and max-width 1899px @media screen and min-width 1900px @media screen and min-width 2540px
  • 25. APEX Responsive Features • Declarative way to lay out regions and items on a page without manual css overrides (region attributes) • Allows implementation of other grid frameworks such as twitterbootstrap, 960 gs, etc. (template)
  • 27. Region Grid Layout Attributes
  • 29. Page Template Grid Attributes
  • 30. Page Template Grid Definition #USED_COLUMNS_NUMBER# #USED_COLUMNS_ALPHA# #USED_COLUMNS_ALPHA_MINUS# #USED_COLUMNS_WORD# #USED_COLUMNS_PLURAL# #ROWS# #COLUMNS# #COLUMN_NUMBER# #COLUMN_ALPHA# #COLUMN_WORD# #COLUMN_PLURAL# #COLUMN_SPAN_NUMBER# #COLUMN_SPAN_ALPHA# #COLUMN_SPAN_WORD# #COLUMN_SPAN_PLURAL# #ATTRIBUTES# #FIRST_LAST_COLUMN_ATTRIBUTES# #CONTENT#
  • 31. CSS Utility Classes Hide/show content depending on @media query
  • 33. RWD Considerations • Developing a responsive application can be time consuming and may require a deep understanding of grid layout, HTML and CSS. • Page size remains the same. You are loading the full HTML, CSS, and JS resources, even on mobile devices with limited broadband. • Responsive Web Design is just the tip of the iceberg.
  • 34. Theme 25 != Theme 42
  • 35. Beyond Theme 25 • Navigation • Data Tables • Leverage APEX condition feature with client property detection to optimize layout generation.
  • 36. The Grid, the Tab and the Ugly
  • 37. Responsive Tabs in Theme 42
  • 38. Responsive Tabs in Theme 42 http://rokitta.blogspot.nl/2013/10/theme-25-responsive-tabs-enhancement.html
  • 40. Show/Hide Column: Custom CSS @media (orientation:portrait) and (max-width: 640px) { [headers="CUST_STREET_ADDRESS1"], #CUST_STREET_ADDRESS1 { display: none; } } TH: table headerTD: table data/cell
  • 42. Categorizr http://rokitta.blogspot.nl/2013/05/how-are-you-categorizr-for-apex-part-2.html Client device property detection categorizr.isdesktop categorizr.istablet categorizr.ismobile categorizr.isportrait categorizr.islandscape
  • 43. Demo
  • 44. Questions, Answers & Discussion http://rokitta.blogspot.com @crokitta christian@rokitta.nl http://www.themes4apex.com http://plus.google.com/u/0/102034735771815472470 http://nl.linkedin.com/in/rokit/