Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course...
Transcript of Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course...
![Page 1: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/1.jpg)
BuildingResponsive Websites
(CSCI-GA.3033-011)
Robert GrimmNew York University
![Page 2: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/2.jpg)
2
In the Beginning:Introductions
![Page 3: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/3.jpg)
3
This CourseIs Experimental!
![Page 4: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/4.jpg)
I Am Teaching This Coursefor the First Time
•Built two small responsive websites last year
•One private, one my NYU CS home page
•Strongly believe this is the future of web design
•Mobile devices are becoming more popularby the month!
•But need to develop syllabus & materialsas we go along
4
![Page 5: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/5.jpg)
Technologies Arein Constant Flux
•Web technologies are standardized, but
•Standards are changing
•Browsers are changing much faster
•Are experimenting with new features
•Are incomplete and buggy
•Some best common practices, but no science
•E.g., HTML5 Boilerplate5
![Page 6: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/6.jpg)
One Class Project• Goal: develop a new, responsive website
for this department
• Based on my believe in learning by doing
• And having real impact!
• Department will seriously considerour “product”
• But we may get overwhelmed by
• Size of project itself
• Managing the project6
![Page 7: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/7.jpg)
7
Please Please Please
![Page 8: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/8.jpg)
Please Participate• In and outside class
•On project and on class itself
• I am counting on you!
• Please raise issues, ask questions,make comments, contribute code...
•Ground rule: you are free to interrupt8
![Page 9: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/9.jpg)
9
Challengesin Building Websites
![Page 10: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/10.jpg)
10
Mobile DevicesAre Taking Over...
•According to StatCounter
•December 2011: 8.04%
•December 2012: 14.55%
•And this makes everything variable...
![Page 11: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/11.jpg)
Screen Size
•Smartphones, tablets, laptops, desktops
•Subpar phone: 240 by 320 pixels
•27” desktop: 2,560 by 1,440 pixels
11
![Page 12: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/12.jpg)
Screen Density
• In the old days: one logical is one device pixel
•Nowadays: One logical is x device pixels
• x=2 on current iPhone and iPad
• x=1.0, 1.325, 1.5, 1.6, 1.7, or 2.0 on others
12
![Page 13: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/13.jpg)
User Interaction
• In the old days: pointing devices
•Mice, trackpads, tablets
•Nowadays: touchscreen
•Cannot “hover” over content
13
![Page 14: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/14.jpg)
Network Connectivity
•Wired ethernet, wifi, and cellular data
•Both bandwidth and latency vary widely
•Especially, for 2nd and 3rd generationcellular data networks
14
![Page 15: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/15.jpg)
The Three Languagesof the Web
• Hypertext markup language (HTML) for content
• Focus on semantics
• Cascading style sheets (CSS) for presentation
• Focus on layout, typography, etc.
• JavaScript for dynamic behavior
• Focus on user interaction
• Reminiscent of Model-View-Controller separationfor user interface libraries
15
![Page 16: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/16.jpg)
16
One Websiteto Rule Them All?
![Page 17: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/17.jpg)
•CSS Media Query
•Rules specific for given media feature, incl.
•Medium (e.g., screen vs print)
•Size of medium
•More fundamentally: CSS
•Cascade determines which rule applieswhen many different rules do apply
Key Enabling Technology
17
![Page 18: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/18.jpg)
So, What Do We Do?
•Screen size: media queries
•Screen density: responsive images
•User interaction: do not assume pointing device
•Network connectivity: keep website lean & mean
• “Design for mobile first!”
18
![Page 19: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/19.jpg)
19
[Demo]
![Page 20: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/20.jpg)
20
Challengesin Building One Website
![Page 21: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/21.jpg)
There Is Lots to Do•Organization
•Structure of website: easy to browse & search
•Markup
•Semantics of content, shared elements
•Search Engine Optimization
•Making information easy to find
•Think keywords, people’s addresses21
![Page 22: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/22.jpg)
There Is Lots to Do (2)• Layout
• Making the content responsiveto media differences
• Styling
• Detailed rules for different elementsand different classes of same elements
• E.g.: <dl> can encode
• List of terms and explanations
• Schedule22
![Page 23: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/23.jpg)
There Is Lots to Do (3)
•Dynamic behavior
•Sometimes we just need code
•Navigation on small devices
•Responsive images
•Database integration
•Not all content is static
23
![Page 24: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/24.jpg)
There Is Lots to Do (4)
• Infrastructure & testing
•We need tools to manage project
•And we need to make sure website works
•Chrome, Firefox, Internet Explorer, Safari,...
•Documentation
•We need to make sure others can take over
24
![Page 25: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/25.jpg)
25
Practical Matters
![Page 26: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/26.jpg)
Textbook
•There is no required textbook
•We will rely on internet sites and posts instead
• If you want to read a book, check out
•Ethan Marcotte’s “Responsive Web Design”
•Discount code from A Book Apart
26
![Page 27: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/27.jpg)
Class Notes• Each class, one student serves as scribe
• Lets me focus on technical & organizational content
• Notes capture spoken discussion
•Written up using (responsive) HTML template
• Emailed to me by Friday night
• One complication
• 13 meetings vs (currently) 16 students
• But also need project documentation27
![Page 28: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/28.jpg)
Mailing List
• You should already be subscribed
• Primary means of communication outside class
• For announcements, questions, suggestions
•About class and project!
28
![Page 29: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/29.jpg)
Grading
•At end of term, I need to assign letter grades
• Participation in class
•One factor: note taking
•Quality of contribution to project
•What do you think?
29
![Page 30: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/30.jpg)
30
Questions?Comments?
![Page 31: Building Responsive Websitesrgrimm/teaching/sp13-web/Introduction.pdf · I Am Teaching This Course for the First Time • Built two small responsive websites last year • One private,](https://reader036.fdocuments.in/reader036/viewer/2022080719/5f7930b04000c5202b0b2979/html5/thumbnails/31.jpg)
31
Our Starting Point:The Current Website
by Daniel Tsadok