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.
If you already know some HTML and CSS and understand the principles of responsive web design, this book is for you. There's something here for you to learn regardless of if you're a web designer or web developer, or whether you're a seasoned expert web professional.What You Will LearnInstall and use Sass with SCSS syntax to create your CSSUse HTML5 tags the right way for the right type of contentEnhance the experience of users with assistive technology with ARIA rolesDesign with desktop-first approach but implement with mobile-first methodologyFor your layouts, either create and use your own scalable CSS grid, or use FlexboxCreate three types of navigation for small screen devicesFind the best way to serve the best type of image and how to make videos responsiveBuild custom responsive emails to ensure the message gets across regardless of the deviceIn Detail
Responsive web design is getting more complex day by day and without the necessary design and development skill sets, it's a matter of time before we're left behind.
Building meaningful and accessible websites and apps using HTML5 and CSS3 is a must if we want to create memorable experiences for the users. In the ever-changing world of web designers and developers, being proficient in responsive web design is no longer an option, it is mandatory.
Whether you're a web designer or web developer, or a seasoned expert web professional, this book will bolster your HTML and CSS skills to a master level.
The book is designed in a way that each chapter will take you one step closer to becoming an expert in RWD. The book begins with introducing you to the power of CSS preprocessors, Sass in this case, to increase the speed of writing repetitive CSS tasks, then use simple but meaningful HTML examples; and add ARIA roles to increase accessibility. You will also understand why a mobile-first approach is ideal.
Next, you will learn how to use an easily scalable CSS grid or if you prefer, use Flexbox instead. Create navigations for small screen devices using the “drawer navigation,” “off-canvas” or “toggle” navigation patterns, and also implement images and media in both responsive and responsible ways. Finally, you will build a solid and meaningful typographic scale and make sure your messages and communications display correctly with responsive emails.Style and approach
Designing and developing for the web should be fun, and that's the tone used in the book. This book is written in a step-by-step format with clean-cut examples. You will also find tips and notes all over the book to help clarify those small and simple details most books and tutorials assume you already know.
TABLE OF CONTENTS
1) Not Your Parents Mobile Phone: UX Design Guidelines For Smartphones
2) Why We Shouldnt Make Separate Mobile Websites
3) How To Build A Mobile Website
4) Making It A Mobile Web App
5) A Study Of Trends In Mobile Design
6) How To Market Your Mobile Application
7) A Foot On The Bottom Rung: First Forays Into Responsive Web Development
8) From Monitor To Mobile: Optimizing Email Newsletters With CSS
9) How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
10) Creating Mobile Optimized Websites Using WordPress
Learn about the harsh truths of corporate Web design and the troubles you are bound to run into. Create effective online portfolios with optimized user experiences, without the usual trial and error. Use storytelling to create engaging user experiences. Impress clients by staying on top of enhancements and Web standards. And in case you are wondering how to handle clients, we have some professional advice on how to deal with exceptional situations and customer requests.
This guide to professional Web design was carefully selected, prepared and edited to bring you the most useful Web design advice from Smashing Magazines articles. Know where you stand, put your situation in perspective, and get the advice you've been looking for.
TABLE OF CONTENTS
- 10 Harsh Truths About Corporate Websites
- Portfolio Design Study: Design Patterns And Current Practices
- Creating A Successful Online Portfolio
- Better User Experience With Storytelling
- Designing User Interfaces For Business Web Applications
- Progressive Enhancement And Standards Do Not Limit Web Design
- Color Theory For Designers, Part 1: The Meaning Of Color
- Is John The Client Dense Or Are You Failing Him?
- How To Identify And Deal With Different Types Of Clients
- How To Respond Effectively To Design Criticism
- Web Designers Guide To Professional Networking
- Group Interview: Expert Advice For Students and Young Web Designers
TABLE OF CONTENTS
- CSS3 vs. CSS: A Speed Benchmark
- Why We Should Start Using CSS3 And HTML5 Today
- Connecting The Dots With CSS3
- An Introduction To CSS3 Keyframe Animations
- The New Hotness: Using CSS3 Visual Effects
- Adventures In The Third Dimension: CSS 3D Transforms
- How To Use CSS3 Pseudo Classes
- CSS3 Flexible Box Layout Explained
- The Guide To CSS Animation: Principles And Examples
- Beercamp: An Experiment With CSS 3D
- Using CSS3: Older Browsers And Common Considerations
You won’t find any technical jargon, bloated samples, drawn out history lessons or witty stories in this book. What you will find is a CSS reference that is concise, to the point, and highly accessible. The book is packed with useful information and is a must-have for any CSS programmer or Web developer.
In the CSS Quick Syntax Reference, you will find:A concise reference to CSS Short, simple, and focused code examples for presentation semantics A well laid out table of contents and a comprehensive index allowing easy review
TABLE OF CONTENTS
1) The Elements Of The Mobile User Experience
2) Picking A Mobile Support Strategy For Your Website
3) Essential Design Patterns For Mobile Banking
4) Seven Guidelines For Designing High Performance Mobile User Experiences
5) Useful Design Tips For Your iPad App
6) A User Centered Approach To Web Design For Mobile Devices
7) Mobile Auto Suggest on Steroids: Tap Ahead Design Pattern