Carver, M. (2015) The Responsive Web, Manning Publications Co.
Download eBook PDF (PDF 5,694KB)
Download Source Code (ZIP 972KB)
he Responsive Web is an easy-to-read introduction to responsive web design packed with instantly useful tips and techniques, and dozens of examples that show you exactly how to benefit from this valuable approach. You’ll learn innovative ways to use what you already know along with design techniques leveraging new HTML5 and CSS3 features.
Part 1 The responsive way
1. Learning to work responsively
1.1. Meet the responsive web
1.1.1. What is the responsive web?
1.1.2. Key features
1.2. Building your first responsive site
1.2.1. Creating prototypes
1.3. The basic responsive layout
1.3.1. Mobile-first markup
1.3.2. Using percentages in CSS
1.3.3. Adding text and images
1.3.4. The fickle and mighty em
1.3.5. Your first breakpoint
1.4. Summary
1.5. Discussion points
2. Design for mobile first
2.1. Why mobile-first design
2.1.1. Benefits of mobile-first design
2.1.2. The challenges of designing for mobile first
2.2. Designing headers for small screens
2.2.1. Creating the header
2.3. Designing for a touch interface
2.3.1. The simplified small-screen grid
2.4. Designing content for a small screen
2.4.1. Using web fonts in layouts
2.5. Summary
2.6. Discussion points
Part 2 Designing for the responsive web
3. Using style tiles to communicate design
3.1. Visualizing design with style guides
3.1.1. What is a style guide?
3.1.2. Developing a style guide
3.1.3. Style tiles: creating a visual language
3.2. How to create a style tile
3.2.1. Get feedback
3.2.2. Design the style tile
3.2.3. Creating the style tile
3.2.4. Iterative design with a style tile
3.3. The death of the mockup
3.4. Summary
3.5. Discussion points
4. Responsive user experience design patterns
4.3. Responsive user experience design pattern resources
4.4. Summary
4.5. Discussion points
5. Responsive layouts
5.1. Fluid layouts via percentages
5.1.1. How percentages work in CSS
5.1.2. Box sizing
5.1.3. Fluid grid systems
5.2. Building a fluid layout
5.2.1. Interpreting the prototype
5.2.2. Starting coding
5.2.3. Animating the off-canvas elements
5.2.4. Making the element responsive
5.2.5. Expanding into the wider views
5.3. Summary
5.4. Discussion points
6. Adding content modules and typography
6.1. Adding a content module
6.1.1. Creating useful placeholder content
6.2. Typography in responsive design
6.2.1. Embedding typefaces
6.2.2. Setting a typographic base
6.3. Summary
6.4. Discussion points
Part 3 Expanding the design with code
7. Adding graphics in the browser with CSS
7.1. Using CSS to implement design
7.1.1. CSS basics
7.1.2. Maintaining proportions in a fluid structure
7.2. Using icon fonts in your design
7.2.1. User interface sprites
7.2.2. Font-based user-interface graphics
7.3.2. Implementing SVG with CSS
7.3.3. Limitations of the SVG format
7.4. Summary
7.5. Discussion points
8. Progressive enhancement and obsolescence control with Modernizr
8.1. Technical obsolescence
8.1.1. Progressive enhancement
8.1.2. Graceful degradation
8.2. What is Modernizr?
8.2.1. Installing Modernizr
8.2.2. Using Modernizr for cross-browser CSS
8.3. JavaScript feature detection with Modernizr
8.3.1. Detecting touch support
8.3.2. Using Modernizr.load and yepnope
8.3.3. Creating custom Modernizr tests
8.4. Adding Modernizr to our site
8.5. Summary
8.6. Discussion points
9. Testing and optimization for responsive websites
9.1. What is responsive testing?
9.1.1. Simulated testing environments
9.2. Browser tools for testing
9.4. Tips on reducing request times
9.4.1. Reducing HTTP requests
9.4.2. Reducing image requests with Base64 encoding
9.4.3. Speed optimization check list
9.5. Summary
9.6. Discussion points
Appendix A: Context-aware design
A.1. Context awareness in applications
A.2. Context awareness on the web
A.2.1. Contextual breakpoints
A.2.2. Creating contextual tests
A.2.3. Contextual CSS
A.3. Summary
In a world of mobile devices, new browsers, and changing standards, each page of your website can require an unmanageably large number of separate designs. Responsive web design is a set of techniques that allow you to design pages that efficiently adapt to whatever device or platform loads them. For web designers and developers and their customers, responsive design can be a big win.
The Responsive Web builds on the best practices that have shaken out over a few years of production experience. This concise book skips pure theory and shows you exactly how to make responsive web design work for you in the real world. You’ll learn innovative ways to use what you already know along with design techniques leveraging new HTML5 and CSS3 features. Along the way, you’ll discover strategies to balance apps and websites, manage browser incompatibilities, and learn when multiple versions are the best option.
- Responsive design concepts
- CSS preprocessing
- Rapid prototyping techniques
- Fluid typography
- Future-proof designs
Firdaus, Thoriq (2013) Responsive Web Design by Example – Beginner’s Guide – Discover how you can easily create engaging, responsive websites with minimum hassle, PACKT Publishing
Download eBook PDF (PDF 4,469KB)
Download Source Code (ZIP 4,445KB)
Discover how you can easily create engaging, responsive websites with minimum hassle!
Overview
- Rapidly develop and prototype responsive websites by utilizing powerful open source frameworks
- Focus less on the theory and more on results, with clear step-by-step instructions, previews, and examples to help you along the way.
- Learn how you can utilize three of the most powerful responsive frameworks available today: Bootstrap, Skeleton, and Zurb Foundation.
Responsive web design is an explosive area of growth in modern web development due to the huge volume of different device sizes and resolutions that are now commercially available. You can now create your very own responsive website quickly and efficiently, allowing you to showcase your content in a format that will work on any device with an Internet browser.
By following our detailed step-by-step instructions in this structured reference guide, you will learn how you can build engaging responsive websites. With coverage of Bootstrap, Skeleton, and Zurb Foundation you’ll learn about three of the most powerful responsive frameworks available today.
Leading you through by practical example, you’ll find that this essential reference develops your understanding by actually helping you create beautiful websites step by step in front of your very eyes. After going over the basics, you’ll be able to choose between creating your own responsive portfolio page with Skeleton, building a stunning product page with Bootstrap, or setting up your own professional business website with Zurb Foundation. Ultimately you’ll learn how to decide which framework is right for you, and how you can deploy and customize it to your exact specifications!
- Learn how to decide which responsive framework is right for you.
- Harness the flexibility of Skeleton to create a truly unique portfolio.
- Use Bootstrap to almost effortlessly create a stunning product launch page.
- Create an online presence for your business that will work on any device with Zurb Foundation.
- Discover how you can leverage CSS to its full potential for refining your responsive websites.
Written as a concise yet practical guide with an explicit focus on showing beginners how to get their very own responsive websites up and running, this essential reference includes coverage of tried-and-tested responsive frameworks in a project-based format that simultaneously provides visible results whilst developing core understanding.
Ideal for anybody who wants their online presence to be compatible with devices and resolutions of any size, “Responsive Web Design by Example” shows you how to select the right framework for your own project requirements and then guides you through the process of installation, configuration, and customization. With three highly structured and meticulously designed projects to choose from, it is the ideal reference for both new and existing web developers who want to be able to augment their skills and showcase their content in a truly professional manner.
Sharkie, C. and Fisher, A. (2013) Jump Start Responsive Web Design, SitePoint Pty. Ltd
Get Up to Speed with Responsive Web Design in a Weekend
Download eBook PDF (PDF 5,554KB)
Download Source Code (ZIP 3,460KB)
Get a Jump Start on Responsive Web Design today!
Responsive Web Design is redefining the way websites are designed, enabling you to craft websites that deliver exceptional experiences to your users – whether they happen to be using a desktop PC, tablet or mobile device.
In just one weekend with this SitePoint book, you’ll learn how to:
- Use media queries to maximize website usability
- Harness the power of fluid grids
- Use dynamic images to automatically scale and select appropriate images
Plus you’ll discover how to use responsive content and a mobile first approach.
M
arcotte, Ethan (2011) Responsive Web Design, A Book Apart
Download eBook PDF (PDF 8,218KB)
Download Source Code (ZIP 81,222KB)
Since its groundbreaking release in 2011, Responsive Web Design remains a fundamental resource for anyone working on the web.
Learn how to think beyond the desktop, and craft designs that respond to your users’ needs. In the second edition, Ethan Marcotte expands on the design principles behind fluid grids, flexible images, and media queries. Through new examples and updated facts and figures, you’ll learn how to deliver a quality experience, no matter how large or small the display.
What’s new in the second edition?
Discover new tips and tricks for browser support, take a closer look at solutions for serving images, explore the role of progressive enhancement in web design, find better methods for managing bandwidth, and more. Follow along with the new examples and approaches Ethan has assembled, and dive in to his meticulously revised code samples.
Kadlec, T (2013) Implementing Responsive Design – Building Sites for an Anywhere, Everywhere Web, New Riders, PeachPit
Download eBook PDF (PDF 8,573KB)
Download Source Code (ZIP 1,177KB)
Companion web site: http://www.implementingresponsivedesign.com/
New devices and platforms emerge daily. Browsers iterate at a remarkable pace. Faced with this volatile landscape we can either struggle for control or we can embrace the inherent flexibility of the web.
Responsive design is not just another technique–it is the beginning of the maturation of a medium and a fundamental shift in the way we think about the web.
Implementing Responsive Design is a practical examination of how this fundamental shift affects the way we design and build our sites. Readers will learn how to:
- Build responsive sites using a combination of fluid layouts, media queries, and fluid media
- Adopt a responsive workflow from the very start of a project
- Enhance content for different devices
- Use feature-detection and server-side enhancement to provide a richer experience
- Chapter 1: The Anywhere, Everywhere Web
- Chapter 2: Fluid Layouts
- Chapter 3: Media Queries
- Chapter 4: Responsive Media
- Chapter 5: Planning
- Chapter 6: Workflow
- Chapter 7: Responsive Content
- Chapter 8: RESS
- Chapter 9: Responsive Experiences
Hay, S. (2013) Responsive Design Workflow, New Riders
Download eBook (Chapter 4) PDF (PDF 969KB)
Download Source Code (ZIP 177KB)
The book’s example code is available on GitHub.
Companion web site: http://www.responsivedesignworkflow.com/
Forget fixed-width Photoshop comps, bloated client requirements, and overproduced wireframes. Yesterday’s web design deliverables fail to take into account the demands of responsive solutions. Design workflow hasn’t really changed, but best practices have. This book shows you how to adapt to the new paradigm and create sites for today’s web. Some of the strategies you’ll learn include:
- how to better manage client expectations and development requirements
- a practical approach for designing in the browser
- documentation methods that outperform static Photoshop comps
- a method for visualizing the points where responsive designs change
After absorbing the lessons in this book, you’ll leave behind old-school workflows and start working in ways that are uniquely suited to today’s multi-platform web.
- Chapter 1: In Splendid Variety These Changes Come
- Chapter 2: From the Content Out
- Chapter 3: Content Reference Wireframes
- Chapter 4: Designing in Text
- Chapter 5: Linear Design
- Chapter 6: Breakpoint Graphs
- Chapter 7: Designing for Breakpoints
- Chapter 8: Creating a Web-Based Design Mockup
- Chapter 9: Presentation, Round One: Screenshots
- Chapter 10: Presentation, Round Two: In the Browser
- Chapter 11: Creating Design Guidelines
Frain, B. (2012) Responsive Web Design with HTML5 and Css3 – Learn Responsive design using HTML5 and CSS3 to adapt websites to any browser or screen size, PACKT Publishing
Download eBook PDF (PDF 21,062KB)
Download Source Code (ZIP 10,456KB)
This book will lead you, step by step and with illustrative screenshots, through a real example. Are you writing two websites one for mobile and one for larger displays? Or perhaps you’ve heard of Responsive Design but are unsure how to bring HTML5, CSS3, or responsive design all together. If so, this book provides everything you need to take your web pages to the next level before all your competitors do!Tablets, smart phones and even televisions are being used increasingly to view the web. There’s never been a greater range of screen sizes and associated user experiences to consider. Web pages built to be responsive provide the best possible version of their content to match the viewing devices of not just today’s devices but tomorrow’s too.
Learn how to design websites according to the new “responsive design” methodology, allowing a website to display beautifully on every screen size. Follow along, building and enhancing a responsive web design with HTML5 and CSS3. The book provides a practical understanding of these new technologies and techniques that are set to be the future of front-end web development.
Starting with a static Photoshop composite, create a website with HTML5 and CSS3 which is flexible depending on the viewer’s screen size.
With HTML5, pages are leaner and more semantic. A fluid grid design and CSS3 media queries means designs can flex and adapt for any screen size. Beautiful backgrounds, box-shadows and animations will be added – all using the power, simplicity and flexibility of CSS3.
Responsive web design with HTML5 and CSS3 provides the necessary knowledge to ensure your projects won’t just be built ‘right’ for today but also the future.
- Responsive web design is the hottest topic in web design. Understand what it is and why it’s essential to master
- HTML5 is leaner, faster and more semantically rich. You’ll learn how to write HTML5 and understand all the key features
- CSS3 media queries allow different styles for different media, learn how to integrate them into a design
- Make web pages and the media within them ‘fluid’ – allowing them to flex when needed
- Ditch images and use CSS3 to create background gradients, text shadows, box shadows and more
- Use CSS3 3D transformations to flip elements in 3D space. Animate elements with CSS3 keyframes
- Create smooth CSS3 transitions between default and hover states with differing durations and timing functions
- Conquer forms – add validation and useful interface elements like date pickers and range sliders with HTML5 alone
Table of Contents