Table of Contents for
Practical Web Design

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Practical Web Design by Philippe Hong Published by Packt Publishing, 2018
  1. Practical Web Design
  2. Title Page
  3. Copyright and Credits
  4. Practical Web Design
  5. PacktPub.com
  6. Why subscribe?
  7. PacktPub.com
  8. Contributers
  9. About the author
  10. About the reviewers
  11. Packt is searching for authors like you
  12. Table of Contents
  13. Preface
  14. Who this book is for
  15. What this book covers
  16. To get the most out of this book
  17. Download the example code files
  18. Download the color images
  19. Conventions used
  20. Get in touch
  21. Reviews
  22. Evolution of Web Design
  23. The first ever website
  24. Table-based layouts
  25. Introduction of Flash
  26. CSS – the savior
  27. Web 2.0
  28. The rise of the mobile
  29. Responsive web design
  30. Flat design
  31. What's next?
  32. Summary
  33. Web Design and its Components
  34. Grids
  35. The cons
  36. Call to Action
  37. Making it obvious
  38. Using contrasting color
  39. Compelling copy
  40. Placement
  41. Breadcrumb
  42. The search bar
  43. The submit button
  44. Making it noticeable
  45. Placing the search bar correctly
  46. Icons
  47. Describing in a nutshell  
  48. Drawing attention of the users
  49. Directional
  50. Modal
  51. Typography
  52. Choosing a font that connects your brand
  53. Serif fonts
  54. Sans-serif
  55. Casual scripts
  56. Don't use too much typeface
  57. Colors
  58. What colors mean
  59. Usability
  60. Simplicity
  61. Navigability
  62. Accessibility
  63. Consistency
  64. So, how can we be consistent?
  65. Design
  66. Content
  67. Interactions
  68. Summary
  69. Website-Designing Workflow
  70. Our situation
  71. Goal identification
  72. What is the purpose of the website?
  73. Who is the website for?
  74. Is this useful for our audience?
  75. What do they expect to find or do there?
  76. Does the website need to follow a brand or have its own brand identity?
  77. Are there any competitors? If there are, how is the website different than others?
  78. Defining the scope
  79. Creating wireframes
  80. Designing
  81. Get inspiration
  82. Improve
  83. Invent
  84. Implementing, testing, and launching
  85. Summary
  86. Responsive Versus Adaptive Design
  87. Responsive design
  88. Adaptive design
  89. So which one is the best?
  90. The takeaway
  91. Summary
  92. Learning HTML5
  93. Our main tool
  94. What is HTML?
  95. HTML tags
  96. HTML attributes
  97. HTML structure
  98. Creating our first page
  99. HTML elements
  100. Titles and paragraphs
  101. Links and images
  102. Summary
  103. Learning CSS3
  104. The different ways to use CSS
  105. CSS formatting
  106. Parent and child elements
  107. Classes and IDs
  108. CSS box model  
  109. The boxes
  110. Block and inline
  111. CSS layout and dividers
  112. The basic layout
  113. Formatting and indenting your HTML
  114. Styling our class
  115. Summary
  116. Building Your Own Website
  117. Our design
  118. Installing HTML Boilerplate
  119. Editing index.html
  120. Creating our web page
  121. Images folder
  122. Installing our font
  123. Importing Google Font
  124. Adding normalize.css
  125. The header
  126. Creating a menu
  127. Inserting links
  128. Adding a logo
  129. Right-hand side menu
  130. Adding a Facebook like button
  131. Styling our header
  132. Adding the hero section
  133. CSS flexbox
  134. Positioning in CSS
  135. Position static
  136. Position relative
  137. Position absolute
  138. Position fixed
  139. Position sticky
  140. Blog section
  141. Creating the ABOUT US section
  142. Adding the Partner section
  143. Adding the footer section
  144. Summary
  145. Making Our Website Responsive
  146. What are media queries? 
  147. Opening the inspector
  148. Desktop first
  149. Designing the menu
  150. What is jQuery? 
  151. jQuery syntax
  152. Making the hero section responsive
  153. Making the Blog section responsive
  154. Making the ABOUT US section responsive
  155. Making the footer section responsive
  156. Summary
  157. Adding Interaction and Dynamic Content
  158. CSS pseudo-classes
  159. Sticky navigation 
  160. JS Plugin: Waypoints
  161. CSS animation
  162. Adding a dynamic Instagram feed
  163. Installing Instafeed.js
  164. Getting images from your user account
  165. Finding our userID and TokenAccess
  166. Getting our access token
  167. Displaying the feed
  168. Summary
  169. Optimizing and Launching Our Website
  170. Creating a favicon
  171. Site performance optimization
  172. Optimizing images
  173. Optimizing our code
  174. Basic SEO improvement
  175. What is search engine optimization?
  176. Meta description
  177. Valid HTML
  178. Keywords
  179. Links
  180. Launching our website
  181. Buying a domain name
  182. Google analytics
  183. Google Search Console
  184. Summary
  185. What is Bootstrap?
  186. What is Bootstrap?
  187. Components
  188. Bootstrap Grid system
  189. Media queries
  190. Summary
  191. Building a Website with Bootstrap
  192. Installing Bootstrap 
  193. Setting up our project 
  194. Bootstrap navbar 
  195. Coding the Bootstrap navigation
  196. Styling our navigation bar 
  197. Styling the hero section
  198. Styling the Blog section
  199. Styling the about section 
  200. Styling the partner section
  201. Styling the footer
  202. Summary
  203. Introduction to Client-Side Rendering
  204. What is server-side rendering?
  205. What is client-side rendering?
  206. Pros and cons of server and client-side rendering
  207. Server-side rendering
  208. Client-side rendering
  209. Introducing to VueJS
  210. Setting up VueJS
  211. Creating a weather application in VueJS
  212. Vue Material
  213. Components
  214. OpenWeather API
  215. The API call
  216. Summary
  217. Tools to Help Your Workflow
  218. HTML Boilerplate
  219. Lorem Ipsum
  220. CSS preprocessor – LESS
  221. CSS preprocessor – SCSS
  222. ColorZilla
  223. Foundation
  224. Fontastic
  225. webflow
  226. Modernizr
  227. CSS3 Generator
  228. git
  229. CodeKit
  230. Animate.css
  231. TinyPNG
  232. Unsplash
  233. Summary
  234. Other Books You May Enjoy
  235. Leave a review - let other readers know what you think

Adaptive design

While Responsive design works to create a universal look and feel with one design that varies from device to device, an Adaptive design has a different approach. Adaptive design is designed to detect the user device and to redirect the user to a website designed especially for this resolution.

First introduced by Aaron Gustafson in 2011 in his book Adaptive Web Design: Crafting Rich Experience with Progressive Enhancement, an Adaptive design has the main difference of having a totally different website on specific resolutions. Resizing the browser has no impact on the design.

The best example of Adaptive design is Amazon.com, which displays an entirely new layout of the website on tablet and mobile:

Amazon Website in desktop, tablet and mobile.

If you try to resize your browser, you can see that the design doesn't change any lower than 999 px.

A tool that you can use to test the Responsiveness or Adaptiveness of a website is the inspect tool of Google Chrome. You can just right-click and inspect any element to open the Developer Console and click the little icon, as shown in the following screenshot. You can then select any devices from the drop-down on the left.
Chrome Inspector with the Device toolbar

So remember that an Adaptive website will not be visible on the desktop, even if you resize it, but only on the device in question.

While Responsive design works on the client-side with CSS, an Adaptive design, on the other hand, works on the server-side. This is really the main difference between the two concepts.

The following are a few other examples:

Opentable.com

The preceding screenshot shows the OpenTable website, which has an Adaptive website for iPad view and iPhone view. It's interesting to see how they completely change the layout on mobile view:

Adidas.com

The preceding screenshot from the Adidas website shows that Adidas has a completely different website on mobile view (m.adidas.com), with a more dynamic and user-friendly look:

The last example will be Google.com

The preceding screenshot shows the Google website. If you haven't noticed, Google.com is an Adaptive website when it comes to iPad and iPhone, surprising, no?