Responsive Design & APEX

Responsive Design & APEX Dimitri Gielis @dgielis http://dgielis.blogspot.com Copyright © 2013 Apex Evangelists • http://apexevangelists.com About me...
Author: Ernest Parsons
9 downloads 2 Views 1MB Size
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 (