User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design...
Transcript of User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design...
![Page 1: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/1.jpg)
User Interaction: Responsive Design
Assoc. Professor Donald J. Patterson INF 133 Fall 2014
1
![Page 2: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/2.jpg)
Evolution of HTML Concerns
HTMLCSS
Javascript
![Page 3: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/3.jpg)
Evolution of HTML Concerns
HTMLCSS
Javascript
![Page 4: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/4.jpg)
Evolution of HTML Concerns
HTML
CSS
Javascript
![Page 5: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/5.jpg)
Evolution of HTML Concerns
HTML
CSSJavascript
![Page 6: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/6.jpg)
CSS
• CSS
• Cascading Style Sheets
• Styles define how to display HTML elements
• They solved the problem of
• formatting large websites consistently
•Multiple sources “cascade” into one presentation
•Where can styles be specified?
http://www.w3schools.com/css/
![Page 7: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/7.jpg)
CSS
• In order of priority (inline overrides all)
• Browser default
• User Defined
• External Style Sheet
• Internal Style Sheet
• Inline Style
![Page 8: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/8.jpg)
CSS
• In order of priority (inline overrides all)
• Browser default
• User Defined
• External Style Sheet
• Internal Style Sheet
• Inline Style
![Page 9: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/9.jpg)
CSS
• In order of priority (inline overrides all)
• Browser default
• User Defined
• External Style Sheet
• Internal Style Sheet
• Inline Style
![Page 10: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/10.jpg)
CSS
• In order of priority (inline overrides all)
• Browser default
• User Defined
• External Style Sheet
• Internal Style Sheet
• Inline Style
![Page 11: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/11.jpg)
CSS
• Storing styles in an external style sheet is currently the best known practice
• Allows reusability
• apply same style to multiple HTML pages
• Allows modularity
• include the style sheets that apply to the HTML page
• Allow sane management
• files can be handled with tools like git
• Allows maintainability
• finding the source of a style is less nightmarish
![Page 13: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/13.jpg)
CSS Syntax
• selector points to the HTML element to be styled
• declaration holds one or more style declarations separated by a semi-colon
• declaration is a property name and a value
This looks like JSON, it’s close, but it’s not the same
![Page 14: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/14.jpg)
Basic Selectors
• Element selector
All paragraph tags
![Page 15: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/15.jpg)
Basic Selectors
• id selector
the element with id=“para1”
SHOULD be unique
![Page 16: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/16.jpg)
Basic Selectors
• class selector
all elements with class=“center”
![Page 17: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/17.jpg)
Basic Selectors
• There are many other ways to select elements in the DOM
• selectors are a small language for finding elements in an XML tree
• There are many other properties that can be styled
• font, positioning, opacity, color, layers,etc.
• w3schools.com is a good online manual for learning them
![Page 18: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/18.jpg)
Bootstrap
• Bootstrap is a CSS library
• like jQuery is a javascript library
• It provides access to predefined styles
• That make a lot of common HTML work easier
![Page 19: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/19.jpg)
Responsive Design
• Responsive Design
• Refers to the practice of making web pages optimally adapted to different viewing environments
• So that a web page/app looks good on
• a phone
• a tablet
• a desktop
• portrait orientation
• landscape orientation
![Page 20: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/20.jpg)
Bootstrap and Responsive Design
•One of Bootstraps strengths is it’s support for grid based layouts
• grid layouts allow one HTML to work on multiple devices
• and therefore support responsive design
![Page 21: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/21.jpg)
History of Bootstrap
• Developed at Twitter
• 2010
• open sourced
• used everywhere
• Themeable
• bootswatch
![Page 22: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/22.jpg)
History of Bootstrap
• Bootstrap is
• a css file
• some javascript to make some of the interactivity work
• a set of icons
![Page 23: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/23.jpg)
Bootstrap Grid System
• Responsive, mobile-first, 12-column grid system
• Columns stack as viewport shrinks
![Page 24: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/24.jpg)
Bootstrap Grid System
• Responsive, mobile-first, 12-column grid system
• Columns stack as viewport shrinks
![Page 25: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/25.jpg)
Bootstrap Grid System
• Responsive, mobile-first, 12-column grid system
• Columns stack as viewport shrinks
• “Mobile-first”
• Design for small screen sizes
• Add content as screen sizes increase
![Page 26: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/26.jpg)
Bootstrap Grid System
•Grid system rules
• a “.container” holds “.rows”
• a “.row” holds a group of columns
• content goes in columns
• only columns should be children of rows
• This is usually done with <div> tags
![Page 27: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/27.jpg)
Bootstrap Grid System
![Page 28: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/28.jpg)
Bootstrap Grid System
<div class="container"><div class="row">
<div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div>
</div></div>
![Page 29: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/29.jpg)
Bootstrap Grid System
![Page 30: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/30.jpg)
Bootstrap Grid System
<div class=“container"><div class="row">
<div class="col-md-8">.col-md-8<div class="row">
<div class="col-md-6">.col-md-6</div><div class=“col-md-6">.col-md-6</div>
</div></div><div class=“col-md-4”>.col-md-4</div></div>
</div>
![Page 31: User Interaction: Responsive Designdjp3/classes/2014_09_INF133/Lectures/...Responsive Design •Responsive Design •Refers to the practice of making web pages optimally adapted to](https://reader033.fdocuments.in/reader033/viewer/2022052519/5f1031507e708231d447e6e0/html5/thumbnails/31.jpg)