responsive web design & apex theme 25
DESCRIPTION
ODTUG KScope13 conferenceTRANSCRIPT
![Page 1: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/1.jpg)
Building a Responsive Application using Theme 25
Christian Rokitta
themes4apex
![Page 2: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/2.jpg)
KScope13 RWD Track
Intro to Responsive Design in APEX
Martin D’SouzaMonday
11:30
Building a Responsive Application using Theme 25
Christian RokittaWednesday
8:30
Building a Responsive Application using Twitter
BootstrapMark Lancaster
Wednesday11:15
Advanced Responsive Design in APEX
Dimitri GielisThursday
9:45
![Page 3: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/3.jpg)
Agenda
• Responsive Web Design• APEX/Theme 25• Beyond
![Page 4: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/4.jpg)
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.
![Page 5: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/5.jpg)
Key Techniques of RWD
• CSS @Media queries• Grid Layouts• Device/browser detection to
enhance performance of your site and reduce bloat
![Page 6: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/6.jpg)
@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) { … }
![Page 7: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/7.jpg)
@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; }}
![Page 8: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/8.jpg)
@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" />
![Page 9: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/9.jpg)
@media query alternative
Use JavaScript to detect the viewport size and then set a className to the body element
![Page 10: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/10.jpg)
@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’
![Page 11: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/11.jpg)
Adapt Layout with @media query
![Page 12: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/12.jpg)
Three Column Desktop Layout
![Page 13: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/13.jpg)
Example HTML<div class="col1"> <p>…</p></div><div class="col2"> <p>…</p></div><div class="col3"> <p>…</p></div>
![Page 14: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/14.jpg)
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; }
}
![Page 15: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/15.jpg)
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; }
}
![Page 16: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/16.jpg)
Single Column Smartphone Layout
![Page 17: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/17.jpg)
Floating
![Page 18: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/18.jpg)
Grid – What is it?
• Fixed Grid• Not necessarily responsive• Used to layout elements in a regular rhythm
• Fluid/Flexible Grid• CSS3 Grid Layout
![Page 19: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/19.jpg)
Grid Basics
•Container•Columns•Gutter•Rows
![Page 20: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/20.jpg)
Responsive Grid
![Page 22: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/22.jpg)
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.
![Page 23: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/23.jpg)
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.
![Page 24: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/24.jpg)
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
![Page 25: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/25.jpg)
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)
![Page 26: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/26.jpg)
Theme 25
![Page 27: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/27.jpg)
Region Grid Layout Attributes
![Page 28: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/28.jpg)
Theme 25 Grid
DEMO
![Page 29: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/29.jpg)
Page Template Grid Attributes
![Page 30: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/30.jpg)
CSS Utility Classes
Hide/show content depending on @media query
![Page 31: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/31.jpg)
Responsive Interactive Reports
http://apex.shak.us/post/35664732629/responsive-interactive-reports-in-theme-25
![Page 32: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/32.jpg)
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#
![Page 33: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/33.jpg)
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.
![Page 34: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/34.jpg)
Theme 25 != Theme 42
![Page 35: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/35.jpg)
Beyond Theme 25
• Navigation• Data Tables• Leverage APEX condition feature
with client property detection to optimize layout generation.
![Page 36: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/36.jpg)
The Grid, the Tab and the Ugly
![Page 37: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/37.jpg)
Responsive Tabs in Theme 42
![Page 38: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/38.jpg)
Conditionally Show/Hide Content
desktop
mobile
![Page 39: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/39.jpg)
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
![Page 40: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/40.jpg)
Categorizr
http://rokitta.blogspot.nl/2013/05/how-are-you-categorizr-for-apex-part-2.html
Client device property detection
categorizr.isdesktopcategorizr.istabletcategorizr.ismobile
categorizr.isportraitcategorizr.islandscape
![Page 41: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/41.jpg)
Responsive Data Table Idea(l)
Table Reflow, kind of like in APEX 5.0, but then for responsive …
![Page 42: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/42.jpg)
Demo
![Page 43: Responsive Web Design & APEX Theme 25](https://reader035.vdocument.in/reader035/viewer/2022062513/5555c7c9d8b42a711f8b45da/html5/thumbnails/43.jpg)
Questions, Answers & Discussion
http://rokitta.blogspot.com
@crokitta
http://www.themes4apex.com
? ? ?
http://plus.google.com/u/0/102034735771815472470
http://nl.linkedin.com/in/rokit/