Responsive Design & APEX Dimitri Gielis
@dgielis http://dgielis.blogspot.com Copyright © 2013 Apex Evangelists • http://apexevangelists.com
About me
2
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
http://apex-evangelists.com
3
Copyright © 2013 Apex Evangelists
http://dgielis.blogspot.com
@dgielis
5
Challenges of the Web
6
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
Please Stand Up!
7
The Web today...
8
Different devices?
...
9
Different platforms?
10
...
Different browsers?
...
11
Different connection speeds?
12
Image source: http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html
Different resolutions?
13
Image source: http://www.macrumors.com/2012/04/12/intel-looking-toward-retina-display-pcs-by-2013/
Different screen sizes?
Image 14 source: http://blog.stonehippo.com/images/2010/02/Apple_Screen_Sizes.png
Who’s still standing?
15
The Web tomorrow...
16
Image source: http://bradfrostweb.com
“The total number of people using the web on mobile devices is set to surpass desktops by 2015” source: idc.com
17
“CIO #2 Priority is Mobile technologies”
18
source: Gartner.com
How to address those challenges?
19
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
Responsive Web Design (RWD)?
20
Ethan Marcotte introduced the term responsive web design (RWD) in a May 2010 article in A List Apart.
21
“Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience - easy reading and navigation with a minimum of resizing, panning, and scrolling - across a wide range of devices” source: http://en.wikipedia.org/wiki/Responsive_web_design
22
Example Of Biggest RWD Impl.
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
23
Example Of APEX RWD Impl.
24
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
Others RWD - Http://mediaqueri.es
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
25
RWD Examples DEMONSTRATION
26
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
Why RWD (vs Mobile Specific)
• • • •
One url One set of markup One deployment Future friendly
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
27
Elements Of RWD
•
Media Queries
•
•
different CSS based on characteristics of the device
Fluid/Adaptive Grids
•
•
Flexible Media (images & video)
• 28
sized relative to element Copyright © 2013 Apex Evangelists http://apex-evangelists.com
Media Queries
•
Define styles based on conditions
•
Set breakpoints depending the design (not the device!)
@media only screen and (min-width: 768px) and (max-width: 959px){ ... } @media only screen and (min-width: 480px) and (max-width: 767px){ ... }
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
29
Fluid/Adaptive Grids
• •
TARGET ÷ CONTEXT = RESULT APEX 4.2.1 Grid (responsive_grid.css)
•
30
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
APEX Grids
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
31
Flexible Media
•
CSS: max-width to the rescue embed, object, img { max-width: 100%; }
•
32
But there are some challenges ...
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
RWD Just The Start...
•
Other concepts
• • • •
Adaptive design Mobile Optimized Mobile First Progressive enhancements based on browser-, device- or feature-detection
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
33
Why RWD (vs Mobile Specific)
Image 34 source: http://bradfrostweb.com
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
Frameworks Can Help
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
35
Technology Behind RWD
• • •
36
HTML5 CSS3 Javascript (JQuery - and plugins)
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
HTML5
•
Semantic tags
•
•
Multimedia
•
•
Figure, Audio,Video, Canvas, SVG
Device API’s
•
• •
...
Geolocation, Microphone, Camera
Offline / Local Storage Web Sockets, Web Workers Copyright © 2013 Apex Evangelists http://apex-evangelists.com
37
HTML 5 TAG REFERENCE
★
C
Define a comment Defines the document type Defines a hyperlink
✽ ✽ ★
href, hreflang, media, ping , rel, target, type
Defines a definition term
Defines an address element
Defines a section in a document
Used to define an embedded applet
Defines a definition list
Defines an area inside an image map
Defines a definition term
Defines an article cite, pubdate
autobuffer, autoplay, controls, src
Defines a base URL for all the links in a page
Used to define a default font-color, fontsize, or font-family for all the document
★
✽ ★
38
★
dir Used to make text bigger Defines a long quotation cite Defines the body element Inserts a single line break
autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value Defines graphics
★
✽ ★
Used to center align text and content
✽ to
Defines computer code text
checked, disabled, icon, label, radiogroup, type
Used to define font face, font size, and font color of text Defines a footer for a section or page
accept-charset, action, autocomplete, enctype, method, name, novalidate, target Used to define one particular window (frame) within a frameset Used to define a frameset, which organized multiple windows (frames)
Defines a horizontal rule Defines an html document
★
★
Defines italic text
height, name, sandbox, seamless, src, width
★
✽
★
Defines an input field
accept, alt, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, type, value, width
★ ★ ★
✽ ,
Defines sample computer code
cite, datetime
autofocus, challenge, disabled, form, keytype, name
Defines a definition list async, type charset defer, src Defines a section
★
cite
Defines keyboard text
Defines a selectable list
Defines an inline sub window
for, form Defines a title in a fieldset Defines a list item value
autofocus, disabled, form, multiple, name, size
Defines small text Defines media resources
★
Defines a resource reference
media, src, type
href, hreflang, media, rel, sizes, type
Defines a section in a document
Defines an image map name
Defines strong text Defines a style definition
Defines marked text
type, media, scoped
,
Defines a menu list label, type
Defines sub/super-scripted text Defines a table
summary
Defines meta information charset, content, http-equiv, name
Defines a table body
Defines measurement within a predefined range
summary Defines a table cell
colspan, headers, rowspan Defines a text area
Defines navigation links Used to display text for browsers that do not handle frames
Defines a noscript section
autofocus, cols, disabled, form, maxlength, name, placeholder, readonly, readonly, required, rows, wrap
,
Defines an embedded object
Defines an image alt, src, height, ismap, usemap, width
Defines inserted text
Defines a generated key in a form
high, low, max, min, optimum, value
manifest, xmlns
Defines an inline sub window
Defines header 1 to header 6 Defines information about the document
Defines information about a section in a document
Defines groups of table columns span
Defines a group of media content, and their caption
★
Defines attributes for table columns
Defines a command button
disabled, form, name
Defines a header for a section or page
★
Defines a fieldset
★
Defines a citation
autobuffer, autoplay, controls, src
Defines external interactive content or plugin
Defines a form
height, width Defines a table caption
Defines emphasized text
height, src, type, width
Defines the direction of text display
Defines a push button
Defines bold text
href, target
✽
Defines a dialog (conversation)
Used to define a directory list
alt, coords, href, hreflang, media, ping, rel, shape, target, type
open
Defines sound content
Defines details of an element
✽
★
✽
★
cite, datetime
Defines an abbreviation
Defines content aside from the page content
★
Defines deleted text
Used to define an embedded acronyms
★
Defines a dropdown list Defines a definition description
data, form, height, name, type, usemap, width
Defines an ordered list reversed, start
Defines a table footer / head Defines a table header colspan, headers, rowspan, scope Defines a date/tim
Defines an option group label, disabled
datetime
Defines the document title
Defines an option in a drop-down list
Defines a table row
disabled, label, selected, value
Defines some types of output
✽
Used to define teletype text
✽
Used to define underlined text
for, form, name Defines a paragraph
Defines a parameter for an object
Defines progress of a task of any kind
Defines an unordered list
name, value Defines preformatted text
datetime
★
Defines a variable Defines a video autobuffer, autoplay, controls, height, loop, src, width
max, value Defines a short quotation cite Used in ruby annotations to define what to show browsers that to not support the ruby element Defines explanation to ruby annotations Defines ruby annotations Used to define strikethrough text.
★
HTML 5 new tag
✽
Tag not supported in HTML 5 Designed by Antonio Lupetti (http://woorkup.com) http://facebook.com/antoniolupetti http://www.twitter.com/woork
THE k WORKING BRAIN
HTML5 - Browsers Ready?
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
39
CSS3
•
New Properties
•
•
Pseudo Selectors
•
•
:nth-child(n), :last-child, :empty, :disabled, :not
Attribute Selectors
• 40
Gradients, Shadows, Border Radius, Transitions, Transforms, Animations, Multiple Background Images, and more
[attr=val], [attr^=val], [attr$=val], [attr*=val]
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
CSS3 Issues
•
Browser dependent syntax .gradient_box { background: -moz-linear-gradient(top, #ed2a2d 0%, #440000 100%); background: -webkit-linear-gradient(top, #ed2a2d 0%,#440000 100%); background: -o-linear-gradient(top, #ed2a2d 0%,#440000 100%); background: -ms-linear-gradient(top, #ed2a2d 0%,#440000 100%); background: linear-gradient(top, #ed2a2d 0%,#440000 100%); filter: progid:DXImageTransform.Microsoft. gradient(startColorstr='#ed2a2d', }
Copyright © 2013 Apex Evangelists http://apex-evangelists.com
41
JavaScript
•
Being backwards compatible
•
Modernizr.js
•
•
Respond.js
•
•
•
serve high-resolution images to devices with retina displays
FitVids.js
• 42
polyfill for min/max-width CSS3 Media Queries (