Questions and Answers
What term did Ethan Marcotte coin that changed the way we think about web design?
Who gave the foreword in the book 'Responsive Web Design' by Ethan Marcotte?
Jeremy Keith
Web designers have a tangible artifact of their work at the end of the day.
False
The control that designers desire in the web medium is simply a function of the limitations of the printed page. We should design for this ___
Signup and view all the answers
What is responsive web design?
Signup and view all the answers
What are the three core ingredients required to create a responsive design?
Signup and view all the answers
What is the purpose of a typographic grid?
Signup and view all the answers
What is the main difference between a traditional design and a responsive design?
Signup and view all the answers
What is the role of a designer in creating a responsive design?
Signup and view all the answers
What formula is used to express the width of an element in proportional terms?
Signup and view all the answers
What does the formula target ÷ context = result help achieve?
Signup and view all the answers
In the context of setting flexible margins, the context is the width of the element's ____________.
Signup and view all the answers
A negative margin can be expressed as a percentage.
Signup and view all the answers
What does the formula target ÷ context = result represent in the context of typesetting?
Signup and view all the answers
Why is it important to express font sizes in ems relative to their context?
Signup and view all the answers
Rounding off numbers when setting font sizes in ems might affect the accuracy of the design.
Signup and view all the answers
What is the purpose of the formula target ÷ context = result in relation to building a flexible grid?
Signup and view all the answers
What is the first layer of a responsive design according to the content?
Signup and view all the answers
What CSS property creates a nice inset effect for images?
Signup and view all the answers
The 'max-width: 100%' CSS rule ensures images never exceed the width of their containers.
Signup and view all the answers
Match the following elements to the CSS rule 'max-width: 100%':
Signup and view all the answers
What was the first attempt at solving the issue of different style requirements for different media types according to CSS2?
Signup and view all the answers
What are some of the recognized media types according to the W3C?
Signup and view all the answers
Media queries are a more robust mechanism for designing responsive web content compared to media types.
Signup and view all the answers
Media queries allow designers to identify not only types of media but to inspect the ________ of devices and browsers.
Signup and view all the answers
Match the following device features with their definitions:
Signup and view all the answers
What CSS filter can be used to get transparent PNGs working in IE6 and below?
Signup and view all the answers
Which property in AlphaImageLoader determines how the image should be treated if it overflows its container?
Signup and view all the answers
Setting the sizingMethod property to 'scale' in AlphaImageLoader can create the illusion of a flexible image. (True/False)
Signup and view all the answers
Dan Cederholm's technique involves tiling a colored background graphic _________ behind the content to create equal height columns.
Signup and view all the answers
What CSS property can be used to constrain images to a percentage of their container's width?
Signup and view all the answers
Match the following properties with their descriptions:
Signup and view all the answers
Overflow: hidden can be used to clip off excess image data.
Signup and view all the answers
Which approach is generally considered less useful than scaling images with max-width?
Signup and view all the answers
Complex graphics with critical information may require different versions of the same image for different __________ ranges.
Signup and view all the answers
Study Notes
Brief Overview of Responsive Web Design
- The book "Responsive Web Design" by Ethan Marcotte is about designing websites that adapt to different devices and screen sizes
- The term "responsive web design" was coined by Ethan Marcotte, and it has changed the way we think about web design
The Evolving Medium of Web Design
- The web has never felt more in flux, with devices becoming smaller and larger simultaneously
- Web designers need to design for more devices, input types, and resolutions than ever before
- The web has moved beyond the desktop and is not turning back
The Problem with Conventional Web Design
- Designers often establish constraints on their designs, assuming a minimum screen resolution and setting a fixed width
- This approach can be problematic, as it doesn't account for the flexibility of the web
- The web defies easy definition and shrugs off constraints placed upon it
Responsive Architecture
- Responsive architecture is a new design discipline that challenges traditional architectural principles
- It involves designing spaces that can adapt to the needs of their occupants
- Examples include self-adjusting walls, smart glass technology, and surfaces that react to voice commands
The Way Forward
- Web designers need to overcome the constraints they've imposed on the web's innate flexibility
- We need to create designs that are not only more flexible but can also adapt to the media that renders them
- This can be achieved by embedding standards-based technologies in our work and making a slight change in our philosophy toward online design
The Ingredients for Responsive Design
- Three core ingredients are needed for responsive design:
- Flexible, grid-based layout
- Flexible images and media
- Media queries (a module from the CSS3 specification)
Introducing the Robot or Not Website
- A simple website called "Robot or Not" will be used to demonstrate how a responsive site is built
- The website will be developed using flexible grids, flexible images, and media queries over the next few chapters### Flexible Grid Systems in Web Design
- Müller-Brockmann introduced the concept of "creating a typographic space on the page" by tailoring the proportions of the grid to the size of a blank piece of paper.
- In web design, the canvas (browser window) can bend and flex to any shape or size, making it important to create a flexible grid system.
Flexible Type Setting
- To create a flexible grid, designers need to translate a design from Photoshop into a responsive layout.
- A flexible grid starts with a single element in the markup, given a fixed width in the CSS, and centered in the page.
- To become more flexible, designers need to think proportionally, using relative units (ems) instead of pixels.
Calculating Relative Font Sizes
- To calculate relative font sizes, divide the target font size by the context (containing element) font size.
- Formula: target ÷ context = result (e.g., 24px ÷ 16px = 1.5em)
Creating a Flexible Grid
- Apply the same proportional thinking to layout as to relative font sizes.
- Divide the width of each element by its containing element to create a percentage-based grid.
Converting Pixel-Based Layout to Flexible Grid
- Replace pixel values with percentage values to create a flexible grid.
- Example:
#pagewidth changes from 960px to 90% of the browser window.
Main and Other Columns
- Calculate the width of each column as a percentage of the containing element.
- Formula: target ÷ context = result (e.g., 900px ÷ 960px = 93.75%)
Content Columns
- Calculate the width of each content column as a percentage of the containing element.
- Formula: target ÷ context = result (e.g., 566px ÷ 900px = 62.8888889% and 331px ÷ 900px = 36.7777778%)
Flexible Margins and Padding
- Adjust margins and padding to create a more refined and detailed design.
Note: I've reorganized the notes to focus on the main concepts and key facts, and removed redundant information. Let me know if you'd like me to make any changes!### The Flexible Grid
- In a responsive design, a flexible grid is built by expressing padding and margins in relative terms.
- The formula to do this is
target ÷ context = result, where the context is the width of the element's container. - When setting flexible margins on an element, the context is the width of the element's container.
- When setting flexible padding on an element, the context is the width of the element itself.
Creating a Proportional Gutter
- To create a proportional gutter, we set the padding in relative terms using the formula above.
- For example, if we want 48px of padding on the left edge of a headline, and the width of the blog module is 900px, we calculate 48 ÷ 900 = 0.0533333333, which translates to 5.33333333% padding.
Negative Margins
- Negative margins can be used to pull an element out of its container.
- To express a negative margin in relative terms, we use the same formula as before, but with a negative value.
Flexible Images
- To make images flexible, we add
max-width: 100%to the image element. - This ensures that the image will never exceed the width of its container.
- Modern browsers will resize the image proportionally when the container resizes.
Browser-Specific Issues
- Internet Explorer 6 and below do not support
max-width, so we need to usewidth: 100%instead. - However,
width: 100%forces the image to always match the width of its container, which is not suitable for all images. - For smaller images, we need to add more specificity to the CSS rule to prevent up-scaling.
- Windows-based browsers (specifically IE7 and below, and Firefox 2 and below on Windows) have issues with image scaling, resulting in artifacts when resized via CSS.
- This bug is fixed in Windows 7 and modern browsers like Safari, Firefox 3+, and IE8+.
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Description
Test your knowledge on responsive web design concepts discussed in Ethan Marcotte's book. Learn about creating flexible and adaptable websites for various devices.
