Flipping Tables: Displaying Data on Small Screens (2016-02)
-
Upload
stephanie-hobson -
Category
Technology
-
view
3.011 -
download
0
Transcript of Flipping Tables: Displaying Data on Small Screens (2016-02)
![Page 1: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/1.jpg)
Flipping TablesDisplaying Data on Small Screens
![Page 2: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/2.jpg)
![Page 3: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/3.jpg)
![Page 4: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/4.jpg)
![Page 5: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/5.jpg)
![Page 6: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/6.jpg)
![Page 7: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/7.jpg)
![Page 8: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/8.jpg)
Tables
![Page 9: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/9.jpg)
![Page 10: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/10.jpg)
Am I right?
![Page 11: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/11.jpg)
• When to use tables• Creating structure with HTML• Designing tables• Adding style with CSS• Adapting tables to small screens• Case Study: MDN compatibility tables
(�°□°)�� �━�
![Page 12: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/12.jpg)
Sorry,
![Page 13: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/13.jpg)
![Page 14: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/14.jpg)
When to use tables
![Page 15: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/15.jpg)
When to use tablesnot
![Page 16: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/16.jpg)
When not to use tables
![Page 17: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/17.jpg)
When not to use tables
<h5>Players:</h5> <ul> <li>Daniel Sedin</li> <li>Henrik Sedin</li> <li>Jannik Hansen</li> <li>Bo Horvat</li> </ul>
![Page 18: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/18.jpg)
When not to use tables
![Page 19: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/19.jpg)
When not to use tables
.players { column-count:2; }
![Page 20: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/20.jpg)
When not to use tables
![Page 21: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/21.jpg)
When not to use tables
/* Nicole Sullivan’s Media Object */ <div class="media"> <div class="img"> <img src="" alt="" /> </div> <div class="body"> Henrick Sedin etc. </div> </div>
![Page 22: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/22.jpg)
layout
When not to use tables
![Page 23: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/23.jpg)
When to use tables
![Page 24: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/24.jpg)
When to use tables
• Sort• Compare• Cross Reference• Calculations
![Page 25: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/25.jpg)
![Page 26: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/26.jpg)
Creating structure with HTML
![Page 27: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/27.jpg)
Creating structure with HTML
<table>
</table>
![Page 28: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/28.jpg)
Creating structure with HTML
![Page 29: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/29.jpg)
Creating structure with HTML
<table> <caption>…</caption> </table>
![Page 30: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/30.jpg)
Creating structure with HTML
<table>
</table>
![Page 31: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/31.jpg)
Creating structure with HTML
<table> <caption>…</caption> <colgroup> <col span=“” class=“”> </colgroup> </table>
![Page 32: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/32.jpg)
Creating structure with HTML
![Page 33: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/33.jpg)
Creating structure with HTML
<table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> </table>
![Page 34: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/34.jpg)
Creating structure with HTML
![Page 35: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/35.jpg)
Creating structure with HTML
<table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tfoot>…</tfoot> </table>
![Page 36: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/36.jpg)
Creating structure with HTML
![Page 37: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/37.jpg)
Creating structure with HTML
<table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tfoot>…</tfoot> <tbody>…</tbody> </table>
![Page 38: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/38.jpg)
Creating structure with HTML
![Page 39: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/39.jpg)
Creating structure with HTML
<tr> <th scope=“”></th> <td colspan=“”></td> <td rowspan=“”></td> </tr>
![Page 40: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/40.jpg)
Creating structure with HTML<table> <caption> <colgroup span> <col /> <thead> <tfoot> <tbody> <tr> <th scope colspan rowspan> <td colspan rowspan>
![Page 41: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/41.jpg)
![Page 42: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/42.jpg)
Designing tables
![Page 43: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/43.jpg)
Designing tables
![Page 44: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/44.jpg)
Designing tables• Provide a caption• Identify columns, rows, and headers• Enhance readability• Group similar data• Smart defaults
![Page 45: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/45.jpg)
Designing tables• Contrast• Repetition• Alignment• Proximity
![Page 46: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/46.jpg)
Designing tables
![Page 47: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/47.jpg)
– John Maeda
“Simplicity is about subtracting the obvious and adding the
meaningful.”
Designing tables
![Page 48: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/48.jpg)
![Page 49: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/49.jpg)
Designing tables• www.behance.net/gallery/Designing-
Effective-Data-Tables/885004• understandinggraphics.com/design/
data-table-design/ • www.darkhorseanalytics.com/blog/
clear-off-the-table/
![Page 50: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/50.jpg)
![Page 51: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/51.jpg)
Adding style with CSS
![Page 52: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/52.jpg)
Adding style with CSSborder-collapse: collapse; border-spacing: 0;
![Page 53: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/53.jpg)
Adding style with CSScaption-side:bottom;
![Page 54: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/54.jpg)
Adding style with CSSth { } tbody th { } tbody th[scope=“row”] { } th.points { }
![Page 55: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/55.jpg)
Adding style with CSS<colgroup> <col>
![Page 56: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/56.jpg)
tbody td:nth-child(even) { background-color: #ddd; }
Adding style with CSS
![Page 57: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/57.jpg)
Adding style with CSS
![Page 58: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/58.jpg)
tr:nth-child(even) { background-color: #ddd; }
Adding style with CSS
![Page 59: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/59.jpg)
Adding style with CSS
![Page 60: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/60.jpg)
Adding style with CSS• A note about borders and screen
readers
![Page 61: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/61.jpg)
![Page 62: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/62.jpg)
Adapting tables to small screens
![Page 63: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/63.jpg)
Adapting tables to small screens• Shrink
![Page 64: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/64.jpg)
![Page 65: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/65.jpg)
![Page 66: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/66.jpg)
Adapting tables to small screens• Shrink• Flip (linearize)
![Page 67: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/67.jpg)
Adapting tables to small screens
![Page 68: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/68.jpg)
Adapting tables to small screens
![Page 69: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/69.jpg)
Adapting tables to small screens• Shrink• Flip (linearize) • Remove
![Page 70: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/70.jpg)
Adapting tables to small screens
![Page 71: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/71.jpg)
Adapting tables to small screens
![Page 72: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/72.jpg)
![Page 73: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/73.jpg)
Adapting tables to small screens• Shrink• Flip (linearize) • Remove• Scroll
![Page 74: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/74.jpg)
![Page 75: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/75.jpg)
![Page 76: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/76.jpg)
Adapting tables to small screens• Shrink• Flip (linearize) • Remove• Scroll• Replace
![Page 77: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/77.jpg)
Adapting tables to small screens• Shrink• Flip (linearize) • Remove• Scroll• Replace• Combo
![Page 78: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/78.jpg)
![Page 79: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/79.jpg)
Case Study
![Page 80: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/80.jpg)
Case Study
![Page 81: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/81.jpg)
Case Study
![Page 82: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/82.jpg)
Case Study
![Page 83: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/83.jpg)
Case Study
![Page 84: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/84.jpg)
Case Study
![Page 85: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/85.jpg)
Case Study
![Page 86: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/86.jpg)
Case Study
![Page 87: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/87.jpg)
![Page 88: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/88.jpg)
• When to use tables• Creating structure with HTML• Designing tables• Adding style with CSS• Adapting tables to small screens• Case Study: MDN compatibility tables
(�°□°)�� �━�
![Page 89: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/89.jpg)
![Page 90: Flipping Tables: Displaying Data on Small Screens (2016-02)](https://reader033.fdocuments.in/reader033/viewer/2022042908/58ec8ae91a28abbf1e8b470b/html5/thumbnails/90.jpg)
I Like to Make Websites Everyone Can [email protected]