Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2 December 2005
Web Technologies
CSS3 and Responsive Web Design
Prof. Beat Signer
Department of Computer Science
Vrije Uni...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2October 27, 2017
Cascading Style Sheets (CSS)
 Separati...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3October 27, 2017
CSS Versions
 CSS1 specification publi...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4October 27, 2017
CSS Versions
W3C Recommendation
W3C Can...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5October 27, 2017
CSS Syntax
 CSS rule consists of two p...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6October 27, 2017
Selectors
 Selectors are used to targe...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7October 27, 2017
Selectors …
 Class selector
 elements...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8October 27, 2017
Selectors …
 Attribute selector
 elem...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9October 27, 2017
Rule Order
 For identical selectors, t...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10October 27, 2017
Inheritance
 Some properties such a c...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11October 27, 2017
CSS Inclusion
 There are three ways h...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12October 27, 2017
CSS Inclusion ...
 Internal style she...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13October 27, 2017
CSS Inclusion ...
 External style she...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14October 27, 2017
Multiple Style Sheets (Cascading)
 Mu...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15October 27, 2017
Box Model
 Box that wraps every singl...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16October 27, 2017
Box Model …
 By default the width of ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17October 27, 2017
Box Model …
 Boxes can be either bloc...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18October 27, 2017
Box Model …
 CSS3 further introduces ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19October 27, 2017
Measurements
 Absolute or relative un...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20October 27, 2017
Layout
 Elements (boxes) can be posit...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21October 27, 2017
Layout …
 Relative positioning moves ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22October 27, 2017
Layout …
 Fixed positioning renders a...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23October 27, 2017
Floats
 Elements can also be position...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24October 27, 2017
Responsive Web Design (RWD)
 Websites...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25October 27, 2017
Responsive Web Design (RWD) …
 Proble...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26October 27, 2017
Content Strategy
 Think about the con...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27October 27, 2017
The Viewport
 Viewport defines the vi...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28October 27, 2017
Media Queries
 CSS2 allowed media que...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29October 27, 2017
Media Queries
 Device properties that...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30October 27, 2017
Breakpoints
 Breakpoint is the point
...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31October 27, 2017
Designing Responsive Solutions
 Mobil...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32October 27, 2017
Multi-Column Layout
 Compute the perc...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33October 27, 2017
Multi-Column Layout …
 Example of a b...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34October 27, 2017
Images
 Scaling of images can be cont...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35October 27, 2017
RWD Frameworks
 Bootstrap
 mobile-fi...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36October 27, 2017
Use Case: MindXpres
 MindXpres presen...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37October 27, 2017
Exercise 5
 CSS3
 get some hands-on ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38October 27, 2017
References
 Learning Responsive Web D...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39October 27, 2017
References …
 Cascading Style Sheets ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40October 27, 2017
References ...
 MDN CSS Reference
 h...
2 December 2005
Next Lecture
JavaScript and jQuery
Upcoming SlideShare
Loading in …5
×

CSS3 and Responsive Web Design - Web Technologies (1019888BNR)

490 views

Published on

This lecture is part of a Web Technologies course given at the Vrije Universiteit Brussel.

Published in: Education
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ♥♥♥ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

CSS3 and Responsive Web Design - Web Technologies (1019888BNR)

  1. 1. 2 December 2005 Web Technologies CSS3 and Responsive Web Design Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel http://www.beatsigner.com
  2. 2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2October 27, 2017 Cascading Style Sheets (CSS)  Separation of presentation and content  visualisation of HTML elements defined by styles  enables multiple presentations of the same content  media-specific style sheets via the media attribute <html> <head> ... <link ref="stylesheet" type="text/css" href="default.css" media="screen, tv" /> <link rel="stylesheet" type="text/css" href="alternative.css" media="print, handheld" /> </head> <body> ... </body> </html>
  3. 3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3October 27, 2017 CSS Versions  CSS1 specification published in 1996  remember that HTML 3.2 introduced some elements and attributes (e.g. color) for the visual appearance in 1997  CSS2 specification published in 1998  superset of CSS1  functionality for relative, absolute and fixed positoning of elements  media types  CSS3 divided into separate modules (documents)  2D & 3D transforms  transitions  Flexbox  media queries  ...
  4. 4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4October 27, 2017 CSS Versions W3C Recommendation W3C Candidate Recommendation Working Draft CSS Syntax Pseudo Classes Visual Effects Grid Layout Masking Basic UI Flexible Layout Syntax L3 Speech Multi- Column Back- grounds Borders Style Attributes Media Queries Selectors L3 Name spaces Color L3 Ruby Paged Media Transforms based on https://en.wikipedia.org/wiki/Cascading_Style_Sheets Selectors L4 Web Animations Transitions MathML Generated Content Text Properties Color + Back- ground Box Properties Box Model Media Types Tables Paged Media Generated Content Selectors Cascade Font Properties
  5. 5. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5October 27, 2017 CSS Syntax  CSS rule consists of two parts  a selector - HTML element  a declaration block (at least one property and value) - surrounded by curly braces - multiple properties are separated with a semicolon  Example selector { property1: value1; property2: value2; } h1 { color: red; font-size: 10px; }
  6. 6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6October 27, 2017 Selectors  Selectors are used to target rules to specific elements in an HTML document (case sensitive)  Universal selector  all elements in the document  Element/Type selector  specific element names  ID selector  element with a specific value for the id attribute * { ... } p { ... } h1, h2, h3 { ... } /* also called grouping selector */ #intro { ... } /* always more weight than class selector */
  7. 7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7October 27, 2017 Selectors …  Class selector  elements with the given class attribute value (elements can have more than one class)  Child selector  elements that are direct children of other elements  Descendant selector  elements that are descendants of other elements .main { ... } /* any element with a 'main' class value */ h1.main { ... } /* only h1 elements with a 'main' class value */ p>a { ... } p a { ... }
  8. 8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8October 27, 2017 Selectors …  Attribute selector  elements with a given attribute value  Pseudo element selectors  treated like extra elements  Pseudo class selector  act like additional values for a class attribute p[type] { ... } /* p element with an attribute called type (existence) */ p[type="new"] { ... } /* p element with attribute value 'new' (equality) */ p[type^="n"] { ... } /* type attribute value starts with letter 'n' */ p[type*="do"] { ... } /* type attribute contains substring 'do' */ h1.main:first-letter { ... } a:link { ... } a:visited { ... } a:hover { ... }
  9. 9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9October 27, 2017 Rule Order  For identical selectors, the last rule will be applied  Furthermore, we have the following internal priorities (1) rules containing IDs (2) rules containing classes (or pseudo classes) and attributes (3) rules containing elements (or pseudo elements)  Rules for selectors that are more specific than the others have preference * { color: red; } p b { color: pink; } /* more specific than p selector */ p { color: blue; } p { color: green; } /* last rule for p selector */
  10. 10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10October 27, 2017 Inheritance  Some properties such a color or font-family are inherited by most child elements  leads to simpler style sheets  The inheritance of properties can be enforced via the inherit keyword body { color: red; /* inherited by child elements */ padding: 10px; /* normally not inherited */ } p { padding: inherit; /* explicitly inherited from parent element */ }
  11. 11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11October 27, 2017 CSS Inclusion  There are three ways how CSS can be included in HTML  inline style  internal style sheet  external style sheet  Inline style  defined via the style attribute of the corresponding HTML element  still mixes content and presentation and should therefore be avoided whenever possible <h1 style="color:red; font-size:10px">Urgent Tasks</h1>
  12. 12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12October 27, 2017 CSS Inclusion ...  Internal style sheet  used when a single document has a unique style  defined in the <head> section  e.g. used in HTML-encoded emails <html> <head> ... <style> h1 {color: red; font-size: 10px;} p {color: blue;} ... </style> </head> <body> ... </body> </html>
  13. 13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13October 27, 2017 CSS Inclusion ...  External style sheet (in *.css file)  changes to the overall appearance of an entire website can be managed in a single file - removes a lot of potential redundancy - saves a lot of time - leads to more consistent websites <html> <head> ... <link rel="stylesheet" type="text/css" href="default.css" /> </head> <body> ... </body> </html>
  14. 14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14October 27, 2017 Multiple Style Sheets (Cascading)  Multiple styles will cascade into a single one  properties/values are inherited from more specific style sheets  Overriding priorities (1) inline style (highest priority) (2) internal style sheet (3) external style sheet (4) default browser style  Note that if the link to the external style sheet in the <head> section is placed after the internal style sheet, then the external style sheet will override the internal one  A stylesheet can import other stylesheets via @import
  15. 15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15October 27, 2017 Box Model  Box that wraps every single HTML element (content)  by default the box is just big enough to keep its content  padding - transparent area around the content  border - around the padding  margin - transparent area around the border margin padding border content div { width: 300px; /* only content area */ padding: 10px; border: 10px red; margin: 5px; }
  16. 16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16October 27, 2017 Box Model …  By default the width of a box only defines the width of the content  padding and border are added to that width  Behaviour can be changed via the box-sizing property  content-box (default) or border-box  width in border-box "mode" includes padding and border width * { box-sizing: border-box; /* use border-box for the whole page */ }
  17. 17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17October 27, 2017 Box Model …  Boxes can be either block-level boxes or inline boxes  block-level boxes start on a new line - main building blocks of any layout - e.g. <p>, <h1>, <ul>, or <li>  inline boxes flow between sourrounding text - e.g. <b>, <i> or <img>  Block-level boxes (elements) can be grouped  e.g. number of elements grouped via <div> in a containing or parent element  Behaviour can be changed via display property li { display: inline; /* no longer treated as block-level element */ margin-right: 5px; /* list items shown next to each other with space */ }
  18. 18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18October 27, 2017 Box Model …  CSS3 further introduces a new Flexbox layout mode  new flex and inline-flex values for the display property
  19. 19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19October 27, 2017 Measurements  Absolute or relative units of measurements can be used  Absolute units  px: pixels are not necessary consistent across devices  cm, mm and in: one centimeter is 37.8 pixels, a milimeter 3.78 pixels and an inch 96 pixels (also not consistent across devices)  pt: a point is equal to 1/72 of an inch (common in print design)  Relative units  %: percentage measured against the content  em: ems are relative to the font size of the element  rem: rems are relative to the font size of the document
  20. 20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20October 27, 2017 Layout  Elements (boxes) can be positioned via the position property  static (default), relative, absolute or fixed position  In normal flow (static) each block-level element starts on a new line p { position: static; /* optional since it is the default anyway */ width: 400px; }
  21. 21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21October 27, 2017 Layout …  Relative positioning moves the element in relation to where it would have been shown  Absolute position takes box out of the normal flow p.test { position: relative; width: 400px; left: 100px; /* move 100 pixels to the right */ top: 20px; /* move 20 pixels down */ } p.test { position: absolute; width: 200px; left: 300px; /* position the element 300 pixels from the left */ top: 0px; /* position element at the top (of the containing element) */ }
  22. 22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22October 27, 2017 Layout …  Fixed positioning renders an element relative to the browser window  scrolling no longer changes the position  Boxes with a relative, absolute or fixed position might overlap  z-index property can be used to control the ordering (higher values are closer to the front) p.test { position: fixed; width: 400px; right: 0px; top: 0px; /* positions the paragraph at the top right corner */ }
  23. 23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23October 27, 2017 Floats  Elements can also be positioned via the float property  succeeding elements will flow around the element  floating can be stopped via the clear property <p>...</p> <img class="floatLeft" src="logo.jpg" alt="logo"> <p>...</p> <h2 class="clearLeft">History</h2> .floatLeft { float: left; } .clearLeft { clear: left; }
  24. 24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24October 27, 2017 Responsive Web Design (RWD)  Websites originally designed with a fixed size to fit common desktop and laptop screen sizes  e.g. 960-pixel-wide layout  Around 2007 mobile phones able to render standard HTML pages  dedicated mobile version of website (e.g. 320-pixel-wide) - redirection to m-dot websites
  25. 25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25October 27, 2017 Responsive Web Design (RWD) …  Problem of maintainability as more versions added  different phone display sizes and new devices (e.g. iPad)  Design websites that can easily be viewed on devices with various screen sizes  Only one version of the website (one HTML structure)  design rearranges itself to perfectly fit the screen size - e.g. single column on mobile device and multiple columns on wider desktop screens  use different CSS styles based on media queries  only since CSS3 it is possible to query features such as the screen width and height or the colour capabilities  flexibility via relative horizontal measurements (e.g. percentage)  should automatically look decent on future devices
  26. 26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26October 27, 2017 Content Strategy  Think about the content before thinking about the design of a website  address user needs  Most important information should be at the top of a page  Divide content into chunks that can be rearranged on a page  All users (regardless of the device) should have access to all the content of a website
  27. 27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27October 27, 2017 The Viewport  Viewport defines the visible area of a web page  without scrollbars, browser borders etc.  HTML5 introduced a new method to control the viewport via a meta tag  Avoid large fixed width for elements  elements (e.g. images) that are wider than the viewport might lead to horizontal scrollbars (poor user experience)  Do not rely on a particular viewport width for a page to render well <meta name="viewport" content="width=device-width, initial-scale=1.0">
  28. 28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28October 27, 2017 Media Queries  CSS2 allowed media queries for media types  e.g. screen or print  CSS3 allows media queries to apply different declaration blocks based on device properties (e.g. viewport width)  e.g. typically change the number of columns, navigation, font size or image size body { font-size: 12px; background-color: red; } @media only screen and (min-width: 40em) { body { background-color: green; } }
  29. 29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29October 27, 2017 Media Queries  Device properties that can be queried via CSS3  viewport width (width) and height (height)  screen width (device-width) and height (device-height)  orientation (orientation) which can be landscape or portrait  aspect ratio (aspect-ratio or device-aspect-ratio) - e.g. 16:9 or 4:3  resolution (resolution) of the device screen - e.g. 300 dpi  does the device support colour (color)  …
  30. 30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30October 27, 2017 Breakpoints  Breakpoint is the point where we use a media query to change the design  e.g. change the number of columns or font size  Design range is the range between two breakpoints  design should look good anywhere within a design range
  31. 31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31October 27, 2017 Designing Responsive Solutions  Mobile-first approach  start with the basic design (default design) for the narrowest design range and devices that might not support media queries  Progressive enhancement via different layers ensures that page is also accessible without CSS and JavaScript 1. HTML 2. CSS (with potential media queries) 3. JavaScript  Responsive design is often based on grids  12-column grid is very common  columns can be grouped
  32. 32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32October 27, 2017 Multi-Column Layout  Compute the percentage for each column and the space between the columns  e.g. 4-column layout with 21% for each column, 2% between the columns and 5% for the left and right border 5% 5%21% 21% 21% 21%2% 2% 2% <article> <aside> <footer>
  33. 33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33October 27, 2017 Multi-Column Layout …  Example of a breakpoint between a single column layout and 2-column layout @media only screen and (min-width: 40em) { article { width: 67%; float: left; margin-right: 0; } aside { width: 21%; float: right; margin-left: 0; } footer { clear: both; } }
  34. 34. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34October 27, 2017 Images  Scaling of images can be controlled  e.g. via max-width property  Offer different sizes of an image  e.g. via the HTML5 picture element img { max-width: 100%; /* do not scale up images */ height: auto; } <picture> <source srcset="smallfBird.jpg" media="(max-width: 300px)"> <source srcset="bird.jpg"> <img src="bird.jpg" alt="Bird"> /* fallback */ </picture>
  35. 35. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35October 27, 2017 RWD Frameworks  Bootstrap  mobile-first design philosophy  provides a set of CSS style sheets for the formatting of key HTML components  additional reusable components (e.g. advanced buttons)  JavaScript components (e.g. UI elements)  Skeleton  …
  36. 36. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36October 27, 2017 Use Case: MindXpres  MindXpres presentations are currently represented in an XML document format  Compiler (node.js application) translates XML to HTML  Presentation engine based on HTML5 and related APIs  e.g. WebSockets for connectivity
  37. 37. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37October 27, 2017 Exercise 5  CSS3  get some hands-on experience with CSS3
  38. 38. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38October 27, 2017 References  Learning Responsive Web Design: A Beginner's Guide, Clarissa Peterson, O'Reilly Media (1st edition), June 2014 ISBN-13: 978-1449362942  HTML and CSS: Design and Build Websites, Jon Duckett, Wiley (1st edition), November 2011 ISBN-13: 978-1118008188
  39. 39. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39October 27, 2017 References …  Cascading Style Sheets (CSS) Snapshot 2010, W3C Working Group Note  http://www.w3.org/TR/CSS/  Molly E. Holzschlag, Core CSS (Part I, II & III) (refcardz #19, #25 and #34)  http://refcardz.dzone.com/refcardz/corecss-part1  http://refcardz.dzone.com/refcardz/corecss2  http://refcardz.dzone.com/refcardz/corecss3  CSS Tutorial  http://www.w3schools.com/css/
  40. 40. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40October 27, 2017 References ...  MDN CSS Reference  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference  Webplatform.orgl  http://docs.webplatform.org/wiki/css  Bootstrap  http://getbootstrap.com  R. Roels and B. Signer, MindXpres: An Extensible Content-driven Cross-Media Presentation Platform, Proceedings of WISE 2014, 15th International Conference on Web Information System Engineering, Thessaloniki, Greece, October, 2014  http://beatsigner.com/publications/roels_WISE2014.pdf
  41. 41. 2 December 2005 Next Lecture JavaScript and jQuery

×