Mobile Web Design 1st Edition EN

Mobile Web Design

Hi there, this is Thomas (aka. Makzan on the web).

This is a course about making website that works in mobile devices.

In this course, we will explore different techniques to create our content in mobile web. We will focus on content strategy for mobile devices. We will try to fit our layout into small screen. We will make the form inputs fit the virtual keyboards in touch devices. We will fetch device data such as raw touches events and device orientation. Finally, we will pack and deploy our web.

Table of Content

  1. πŸ“– Chapter 1 – Getting started
  2. πŸ“– Chapter 2 – Content strategy
  3. γ€€ Minimal mobile friendly website
  4. γ€€ Mobile first approach
  5. γ€€ Listview
  6. γ€€ Do mobile web has to be a webpage?
  7. πŸ“– Chapter 3β€”Using Zurb Foundation
  8. γ€€ Foundation grid
  9. γ€€ Block grid
  10. γ€€ Interchangable content
  11. γ€€ Push and pull column
  12. γ€€ Flex video
  13. γ€€ Off canvas
  14. πŸ“– Chapter 4β€”Response with media query
  15. γ€€ Re-visit the minimal website
  16. γ€€ Using viewport to define initial browser rendering
  17. γ€€ Using media query to define styles with condition
  18. γ€€ Navigation strategy for small screen
  19. γ€€ Putting navigation at bottom
  20. γ€€ Building our own grid system
  21. γ€€ Introducing ungridβ€”another minimal grid approach
  22. γ€€ Media queries in Zurb Foundation
  23. πŸ“– Chapter 5β€”CSS preprocessing
  24. γ€€ What is CSS preprocessor?
  25. γ€€ Preprocessor options
  26. γ€€ Nested styles
  27. γ€€ SCSS variable
  28. γ€€ SCSS mixin
  29. γ€€ Using loop to define grid
  30. πŸ“– Chapter 6β€”Typography
  31. γ€€ Different font sizes
  32. γ€€ Font size and distance
  33. γ€€ Adaptive copywriting basecamp
  34. γ€€ Adaptive copywriting for different screens
  35. πŸ“– Chapter 7 – Handling touches
  36. γ€€ Click delay
  37. γ€€ Using slick
  38. γ€€ Hammerjs
  39. πŸ“– Chapter 8 – Form inputs
  40. γ€€ Specify input types
  41. γ€€ Styling inputs for mobile
  42. γ€€ Styling radio button
  43. γ€€ Styling input range
  44. γ€€ Using file button
  45. πŸ“– Chapter 9 – Taking the web offline
  46. γ€€ Storing data with localstorage
  47. γ€€ Offline access with app cache
  48. γ€€ Provide offline access with Service Worker
  49. πŸ“– Chapter 10 – Create dedicated mobile website
  50. γ€€ One page web application
  51. γ€€ Link between pages
  52. γ€€ Page transition
  53. γ€€ jQuery mobile button
  54. γ€€ List View
  55. γ€€ Customizing jQuery mobile
  56. πŸ“– Summary
  57. γ€€ Performance Tips
  58. γ€€ One more thingβ€”Mobile as first class citizen

Course material last updated at: 2019-03-20.

Comments

no comments yet.