O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Designing Web & Mobile Graphics: Fundamental Concepts for Web and Interactive Projects

Book Description

Graphics are key to the user experience of online content, especially now that users are accessing that content on a multitude of devices: smartphones, tablets, laptops, and desktops. This book provides foundational methodology for optimal use of graphics that begins with HTML and CSS, and delves into the worlds of typography, color, transparency, accessibility, imagery, and layout for optimal delivery on all the different devices people use today.
It serves beginners and intermediate web builders alike with a complete foundation needed to create successful illustrative and navigational imagery for web and mobile. Coverage includes:

  • lessons on typography, icons, color, and images

  • the latest information on HTML5, CSS3, and other modern technologies

  • in-depth exploration of image formats: GIF, PNG, JPEG, and SVG

  • ways to employ adaptive strategies for responsive web design

  • Table of Contents

    1. Title Page
    2. Copyright Page
    3. Dedication Page
    4. Acknowledgments
    5. Contents
    6. Introduction
      1. Get ready,... Go!
    7. Chapter 1. Understanding HTML
      1. Why Learn HTML?
      2. HTML Coding Basics
      3. Structuring a Web Page
      4. Structuring Page Content
      5. In Conclusion
    8. Chapter 2. Styling with CSS
      1. CSS to the Rescue
      2. Getting to Know Style
      3. Adding CSS Formatting
      4. Block and Inline Formatting
      5. Delivering CSS Just to IE
      6. Normal Flow and Positioning
      7. In Conclusion
    9. Chapter 3. Web Typography
      1. Working with Web Type
      2. Practicing Safe Typography
      3. Making Better Font Stacks
      4. “Real Fonts” in Web Pages
      5. In Conclusion
    10. Chapter 4. Challenges in Web Design
      1. The Web Environment
      2. Determining Your Cross-Browser Goals
      3. Developing Your Site for Different Devices
      4. In Conclusion
    11. Chapter 5. Color for the Web
      1. Coding Web Color
      2. Color Properties
      3. Primary Color Systems
      4. Color Combinations
      5. Building a Color Scheme
      6. Consistent Colors
      7. CSS Color Chart
      8. In Conclusion
    12. Chapter 6. Images for the Web
      1. A Matter of Bits
      2. Raster Image Formats
      3. Image Compression Chart
      4. Image Compression Chart
      5. Image Compression Chart
      6. Image Compression Chart
      7. SVG: Vector Files for the Web
      8. In Conclusion
    13. Chapter 7. Creating Images for the Web
      1. Working in Illustrator
      2. Working in Photoshop
      3. Naming Web Image Files
      4. Reducing Image File Size
      5. In Conclusion
    14. Chapter 8. Transparency and Shadow
      1. Creating Transparency with GIFs
      2. Transparency with PNGs
      3. CSS Transparency
      4. In Conclusion
    15. Chapter 9. Favicons and Mobile Bookmarks
      1. Where Favicons Are Found
      2. Image Formats for Favicons
      3. Inserting Favicons into a Website
      4. Creating Favicons for Web Pages
      5. Mobile Bookmarks
      6. Combining Favicons and Mobile Bookmarks
      7. In Conclusion
    16. Chapter 10. Lists and Icon Fonts
      1. Unordered Lists
      2. Definition Lists
      3. Ordered Lists
      4. Effective List Design
      5. Icon Fonts
      6. In Conclusion
    17. Chapter 11. Image Maps
      1. Making Image Maps
      2. Responsive Image Maps
      3. In Conclusion
    18. Chapter 12. Laying Out Pages
      1. Float Behavior
      2. Laying Out Pages with Floats
      3. CSS Frameworks
      4. Responsive Layouts
      5. In Conclusion
    19. Chapter 13. Images for Responsive Web Design
      1. Scaling Images and Media
      2. The Problem with Scaling Images
      3. Adaptive Image Solutions
      4. Many-Image Solution
      5. In Conclusion
    20. Chapter 14. Aligning Images
      1. Aligning Images in Relation to the Text
      2. Centering Images in the Window
      3. Stretching an Image Across a Browser Window
      4. In Conclusion
    21. Conclusion
    22. Index
    23. Ad Page