SlideShare a Scribd company logo
1 of 43
Building a Responsive
Application using Theme 25
Christian Rokitta
themes4apex
KScope13 RWD Track
Intro to Responsive Design
in APEX
Martin D’Souza
Monday
11:30
Building a Responsive
Application using Theme 25
Christian Rokitta
Wednesday
8:30
Building a Responsive
Application using Twitter
Bootstrap
Mark Lancaster
Wednesday
11:15
Advanced Responsive
Design in APEX
Dimitri Gielis
Thursday
9:45
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 unit is relative to the initial value of ‘font-size’
• 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
•Columns
•Gutter
•Rows
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
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
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#
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
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
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
Responsive Data Table Idea(l)
Table Reflow, kind of like in APEX 5.0, but then for responsive …
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

UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXStoian Dipchikov
 
HTL(Sightly) - All you need to know
HTL(Sightly) - All you need to knowHTL(Sightly) - All you need to know
HTL(Sightly) - All you need to knowPrabhdeep Singh
 
ADF - Layout Managers and Skinning
ADF - Layout Managers and SkinningADF - Layout Managers and Skinning
ADF - Layout Managers and SkinningGeorge Estebe
 
HTML5 - Introduction
HTML5 - IntroductionHTML5 - Introduction
HTML5 - IntroductionDavy De Pauw
 
Experience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - HighlightsExperience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - HighlightsCédric Hüsler
 
ECS 19 Bert Jansen - Taking your SharePoint to the next level – Transforming ...
ECS 19 Bert Jansen - Taking your SharePoint to the next level – Transforming ...ECS 19 Bert Jansen - Taking your SharePoint to the next level – Transforming ...
ECS 19 Bert Jansen - Taking your SharePoint to the next level – Transforming ...European Collaboration Summit
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointChad Schroeder
 
Adobe Experience Manager Core Components
Adobe Experience Manager Core ComponentsAdobe Experience Manager Core Components
Adobe Experience Manager Core ComponentsGabriel Walt
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012crokitta
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Doris Chen
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Content query web part – get it all in one place and style it!
Content query web part – get it all in one place and style it!Content query web part – get it all in one place and style it!
Content query web part – get it all in one place and style it!Benjamin Niaulin
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsFu Cheng
 
The Chaos Tools Suite
The Chaos Tools SuiteThe Chaos Tools Suite
The Chaos Tools Suitemerlinofchaos
 
Take a load off! Load testing your Oracle APEX or JDeveloper web applications
Take a load off! Load testing your Oracle APEX or JDeveloper web applicationsTake a load off! Load testing your Oracle APEX or JDeveloper web applications
Take a load off! Load testing your Oracle APEX or JDeveloper web applicationsSage Computing Services
 
jQuery Mobile Workshop
jQuery Mobile WorkshopjQuery Mobile Workshop
jQuery Mobile WorkshopRon Reiter
 
Asset Redux - Front end performance on Rails (Phil Nash)
Asset Redux - Front end performance on Rails (Phil Nash)Asset Redux - Front end performance on Rails (Phil Nash)
Asset Redux - Front end performance on Rails (Phil Nash)Future Insights
 
Custom WordPress theme development
Custom WordPress theme developmentCustom WordPress theme development
Custom WordPress theme developmentTammy Hart
 

What's hot (20)

UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UX
 
HTL(Sightly) - All you need to know
HTL(Sightly) - All you need to knowHTL(Sightly) - All you need to know
HTL(Sightly) - All you need to know
 
ADF - Layout Managers and Skinning
ADF - Layout Managers and SkinningADF - Layout Managers and Skinning
ADF - Layout Managers and Skinning
 
HTML5 - Introduction
HTML5 - IntroductionHTML5 - Introduction
HTML5 - Introduction
 
Experience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - HighlightsExperience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - Highlights
 
ECS 19 Bert Jansen - Taking your SharePoint to the next level – Transforming ...
ECS 19 Bert Jansen - Taking your SharePoint to the next level – Transforming ...ECS 19 Bert Jansen - Taking your SharePoint to the next level – Transforming ...
ECS 19 Bert Jansen - Taking your SharePoint to the next level – Transforming ...
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
 
Adobe Experience Manager Core Components
Adobe Experience Manager Core ComponentsAdobe Experience Manager Core Components
Adobe Experience Manager Core Components
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Content query web part – get it all in one place and style it!
Content query web part – get it all in one place and style it!Content query web part – get it all in one place and style it!
Content query web part – get it all in one place and style it!
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
AEM responsive
AEM responsiveAEM responsive
AEM responsive
 
The Chaos Tools Suite
The Chaos Tools SuiteThe Chaos Tools Suite
The Chaos Tools Suite
 
Take a load off! Load testing your Oracle APEX or JDeveloper web applications
Take a load off! Load testing your Oracle APEX or JDeveloper web applicationsTake a load off! Load testing your Oracle APEX or JDeveloper web applications
Take a load off! Load testing your Oracle APEX or JDeveloper web applications
 
jQuery Mobile Workshop
jQuery Mobile WorkshopjQuery Mobile Workshop
jQuery Mobile Workshop
 
Asset Redux - Front end performance on Rails (Phil Nash)
Asset Redux - Front end performance on Rails (Phil Nash)Asset Redux - Front end performance on Rails (Phil Nash)
Asset Redux - Front end performance on Rails (Phil Nash)
 
Custom WordPress theme development
Custom WordPress theme developmentCustom WordPress theme development
Custom WordPress theme development
 

Viewers also liked

Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application ExpressResponsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application ExpressShakeeb Rahman
 
Differential pulse code modulation
Differential pulse code modulationDifferential pulse code modulation
Differential pulse code modulationRamraj Bhadu
 
Dpcm ( Differential Pulse Code Modulation )
Dpcm ( Differential Pulse Code Modulation )Dpcm ( Differential Pulse Code Modulation )
Dpcm ( Differential Pulse Code Modulation )Mohammed Abdullah
 
Pulse modulation
Pulse modulationPulse modulation
Pulse modulationstk_gpg
 

Viewers also liked (6)

Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application ExpressResponsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
 
Dcom ppt(en.39) dpcm
Dcom ppt(en.39) dpcmDcom ppt(en.39) dpcm
Dcom ppt(en.39) dpcm
 
Differential pulse code modulation
Differential pulse code modulationDifferential pulse code modulation
Differential pulse code modulation
 
Dpcm ( Differential Pulse Code Modulation )
Dpcm ( Differential Pulse Code Modulation )Dpcm ( Differential Pulse Code Modulation )
Dpcm ( Differential Pulse Code Modulation )
 
Pcm
PcmPcm
Pcm
 
Pulse modulation
Pulse modulationPulse modulation
Pulse modulation
 

Similar to Responsive Web Design & APEX Theme 25

Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignShawn Calvert
 
Responsive web design
Responsive web designResponsive web design
Responsive web designBen 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.pptxzainm7032
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio
 
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-13Frédéric Harper
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
 
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-18Frédéric Harper
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Frédéric Harper
 
Adaptive theming using compass susy grid
Adaptive theming using compass susy gridAdaptive theming using compass susy grid
Adaptive theming using compass susy gridsoovor
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)admecindia1
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinRazorfish
 
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply ResponsiveDenise Jacobs
 
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 WalkerLizzie Hodgson
 
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignChapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignSteve Guinan
 

Similar to Responsive Web Design & APEX Theme 25 (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
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web Design
 
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
 
Design
DesignDesign
Design
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
 
Approaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & DevelopmentApproaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & Development
 
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
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
 
Adaptive theming using compass susy grid
Adaptive theming using compass susy gridAdaptive theming using compass susy grid
Adaptive theming using compass susy grid
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
Responsive Web Designing Fundamentals
Responsive Web Designing FundamentalsResponsive Web Designing Fundamentals
Responsive Web Designing Fundamentals
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic Welterlin
 
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
 
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
 
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignChapter 17: Responsive Web Design
Chapter 17: Responsive Web Design
 

More from Christian Rokitta

Hitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal ThemeHitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal ThemeChristian Rokitta
 
Browser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersBrowser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersChristian Rokitta
 
Bootstrapify Universal Theme
Bootstrapify Universal ThemeBootstrapify Universal Theme
Bootstrapify Universal ThemeChristian Rokitta
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)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 PhoneGapChristian Rokitta
 
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-scope11Christian Rokitta
 

More from Christian Rokitta (11)

Keep me moving goin mobile
Keep me moving   goin mobileKeep me moving   goin mobile
Keep me moving goin mobile
 
Hitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal ThemeHitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal Theme
 
Browser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersBrowser Developer Tools for APEX Developers
Browser Developer Tools for APEX Developers
 
Bootstrapify Universal Theme
Bootstrapify Universal ThemeBootstrapify Universal Theme
Bootstrapify Universal Theme
 
Plugins unplugged
Plugins unpluggedPlugins unplugged
Plugins unplugged
 
APEX & Cookie Monster
APEX & Cookie MonsterAPEX & Cookie Monster
APEX & Cookie Monster
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)
 
Browser Developer Tools
Browser Developer ToolsBrowser Developer Tools
Browser Developer Tools
 
"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
 
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
 
Oracle APEX & PhoneGap
Oracle APEX & PhoneGapOracle APEX & PhoneGap
Oracle APEX & PhoneGap
 

Recently uploaded

Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptxFIDO Alliance
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireExakis Nelite
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAnitaRaj43
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxFIDO Alliance
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)Wonjun Hwang
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfAnubhavMangla3
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuidePixlogix Infotech
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewDianaGray10
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...FIDO Alliance
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfalexjohnson7307
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMKumar Satyam
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data SciencePaolo Missier
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfdanishmna97
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)Samir Dash
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimaginedpanagenda
 

Recently uploaded (20)

Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 

Responsive Web Design & APEX Theme 25

  • 1. Building a Responsive Application using Theme 25 Christian Rokitta themes4apex
  • 2. KScope13 RWD Track Intro to Responsive Design in APEX Martin D’Souza Monday 11:30 Building a Responsive Application using Theme 25 Christian Rokitta Wednesday 8:30 Building a Responsive Application using Twitter Bootstrap Mark Lancaster Wednesday 11:15 Advanced Responsive Design in APEX Dimitri Gielis Thursday 9:45
  • 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 unit is relative to the initial value of ‘font-size’ • 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
  • 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. CSS Utility Classes Hide/show content depending on @media query
  • 32. 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#
  • 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
  • 39. 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
  • 40. 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
  • 41. Responsive Data Table Idea(l) Table Reflow, kind of like in APEX 5.0, but then for responsive …
  • 42. Demo
  • 43. 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/