Frontend Engineering, Volume II
CSS: Chapter 6 Companion—Multi-Device Pages
© 2013, Martin Rinehart
Left-to-right, top-to-bottom:
- IBM 3277 "green screen" monitor, connected to mainframe computer, born 1971, 12 lines by 40 characters (Model 1), later 24 lines by 80 characters (Model 2)
- Apple II personal computer, born 1977, with adapter 24 lines by 80 characters
- IBM PC with CGA (Color Graphics Adapter) monitor, born 1981, 24 lines by 40 characters and 16 colors
- HTC smartphone, 1080p resolution, 2013
- Samsung smartwatch, 320 x 320 pixels, 2013
For a web-focused hardware history (pre-history?): http://blog.frankmtaylor.com/2013/12/12/responsive-design-is-not-the-complete-answer/?goback=.gde_2071438_member_5823846935999561728#!.
History
IBM 3277 "green screen" monitors: http://en.wikipedia.org/wiki/IBM_3270.
The Apple II personal computer: http://en.wikipedia.org/wiki/Apple_II.
IBM PC (MDA and CGA): http://en.wikipedia.org/wiki/IBM_Personal_Computer.
IBM PC EGA: http://en.wikipedia.org/wiki/Enhanced_Graphics_Adapter.
IBM PC VGA: http://en.wikipedia.org/wiki/Video_Graphics_Array.
SVGA and above: http://en.wikipedia.org/wiki/Svga.
CGA through WQXGA timeline (SVG graphic): http://en.wikipedia.org/wiki/File:Vector_Video_Standards2.svg.
Apple iPhone: http://en.wikipedia.org/wiki/Iphone.
Apple iPad: http://en.wikipedia.org/wiki/Ipad.
Contemporary smartphone resolutions: http://phone-size.com.
High resolution desktop monitors: http://www.pcmag.com/article2/0,2817,2426664,00.asp.
Ultra high resolution monitors: http://en.wikipedia.org/wiki/4K_resolution.
High resolution tablets: http://gizmodo.com/the-best-large-tablet-display-its-not-the-ipad-air-1458132865.
Design for Width
"Users hate horizontal scrolling": http://www.nngroup.com/articles/scrolling-and-scrollbars/.
Vertical scrolling examples: http://creativeoverflow.net/33-creative-uses-of-vertical-scrolling-in-web-design/.
An opposit take: http://webdesignledger.com/inspiration/40-of-the-best-horizontal-scrolling-websites.
Fluid Design
What is fluid?: http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/.
Fluid v. responsive: http://ux.stackexchange.com/questions/24406/what-is-the-exact-difference-between-fluid-and-responsive-design.
Responsive Design
Marcotte's seminal article: http://alistapart.com/article/responsive-web-design.
A good overview: http://en.wikipedia.org/wiki/Responsive_web_design.
A good webliography: http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/.
Responsive images: http://css-tricks.com/responsive-images-use-cases-documented-code-snippets-get-started/
Post-Responsive Design
"Content-driven" design: http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/.
"Responsive Experience": http://www.cmswire.com/cms/customer-experience/think-beyond-responsive-design-to-the-responsive-experience-021808.php.
"Adaptive Design": http://www.rasmussen.edu/degrees/design/blog/web-design-101-adaptive-vs-responsive-design/.
At-Rules
Overview with nested at-rules: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule.
Selected at-rules: http://www.tutorialrepublic.com/css-reference/css-at-rules.php.
Downloadable fonts: http://www.tutorialrepublic.com/css-reference/css-font-face-rule.php.
Print Stylesheets
Basic screen/print differences: http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/.
More tips from Smashing: http://coding.smashingmagazine.com/2013/03/08/tips-tricks-print-style-sheets/.
Video from Chris Coyier: http://css-tricks.com/video-screencasts/52-building-a-print-stylesheet/.
Using a seperate stylesheet: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml.
Media Queries
Brief summary (Wikipedia calls it a "stub"): http://en.wikipedia.org/wiki/Media_queries.
Overview with conditional rules: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.
A fluid example of responsive sites: http://mediaqueri.es.
Early article on media queries in responsive design: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/.
Testing with Emulators
iPhone, iPad, others: http://www.webdesignerdepot.com/2012/11/6-free-mobile-device-emulators-for-testing-your-site/.
Various phones, iPads and more: http://www.themobilewebdesignblog.com/2011/11/26/best-mobile-emulators-responsive-design-testing-tools/.
The "ultimate" list (good vendor-specifics): http://www.mobilexweb.com/emulators.
Gaming device emulators (most are free): http://www.pocketgamer.co.uk/r/Android/Emulation/feature.asp?c=38947.
CSS to Solve PPI Issue?
High resolution device solutions, today and tomorrow: http://alistapart.com/article/mo-pixels-mo-problems.
Feedback: MartinRinehart at gmail dot com
# # #