1.4 Responsive Layouts Flashcards
What is responsive website design?
It’s creating websites for different device screen sizes.
What are the 3 parts of responsive website design?
Responsive design consists of fluid grids, fluid images, and media queries
Why is responsive website design preferred over traditional techniques?
It’s more sustainable as devices and screen sizes have changed greatly over the years.
Did early websites take their inspiration from print design?
Yes, much of the web initially was based off of print design.
Has responsive website design shifted towards absolute or relative sizes?
Relative sizing has been preferable given variety of devices.
What are units for relative sizes?
Relative units are like percentages and EMs.
Name 2 percentages for a 2 column layout
75%/25% 50%/50% Any combination that equals 100%
Which container are percentages relative to?
Percentages are relative to parent container size.
What is a media query?
Media queries are CSS rules that include CSS code only when certain conditions are met.
Media queries are a feature of CSS that enable web page content to adapt to different screen sizes and resolutions.
What’s a media feature?
Media features are an expression or set of conditions inside of a media query.
Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device.
When would media features apply?
For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.
What does the media feature of orientation do?
It controls the orientation of the viewport
Vertical or Horizontal to improve viewing experience.
In the lesson, what happened when the
orientation was changed to landscape?
The header size shrank to fit the viewport better.
The aside was visible on the side.
The content required less scrolling to see.
Consider the following media query:
There are expressions before and after the boolean operator and. When will this media query be applied?
The media query will be applied only if
BOTH expressions are true.
What is a logical operator?
Logical operators can be used to compose a complex media query, by defining conditions for CSS code rules.
What are the 3 logical operators most used?
The logical operators not, and, and only can be
used to compose a complex media query.
What does the AND logical operator indicate?
Both conditions need to be met for the rules to apply.
How are commas used in media query declarations?
Commas are used to separate multiple media queries to combine the queries into the same rule. In the spirit of DRY, this is writing concise code.
Why do layouts break?
Breakpoints are widths that no longer works, causing the layout breaks.
What’s a mobile first approach?
- Mobile –>
- Tablet –>
- Desktop
Add layout changes, features, and content
based on the size of the screen
Without media queries what happens to a layout?
It remains static and poorly suited for screen sizes.
What are the signs you need a breakpoint?
Give 2 examples
Line length is too long
Buttons lose proportions
When layout doesn’t work anymore
Should content or devices determine the need for breakpoints?
Breakpoints define a certain threshold where the layout should change, typically defined by the content (and not by devices).
A breakpoint should be created based on the width of popular screen sizes. True or false
FALSE
Why should breakpoints be used in combination with fluid grids?
Elements won’t look good on every screen size.
Example: columns on desktop vs mobile
Layouts break and must be adjusted
What is a breakpoint?
Media Query adjusts the layout based
on a certain width is a breakpoint
What is the practical cost of creating multiple break points?
It takes extra time to design and code websites
by having multiple breakpoints.
What is pagination?
Pagination refers to page order sequence.
What are some advantages of using pagination in UI?
Usability: Easily recognized method,
Engagement: find items quickly,
Performance: page loads faster
What is a flexbox container?
It’s the constraint that places the
exterior boundary on flexbox items.
What’s the purpose of a flexbox container?
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).
What are flexbox items?
These are elements that reside inside of flexbox containers.
What does display flex mean?
Flex stands for flexible.
When set to display flex it enables flex
context for its direct flex children.
What is a navigation breakpoint?
Point at which its best to switch from vertical navigation to horizontal navigation based on space available on the device.
What is flex direction?
It determines in what order and direction
flex items appear inside the container.
What are the 4 possible flex-direction values?
- Column
- Column Reverse
- Row
- Row Reverse
What’s the difference between column and column reverse?
Columns: forward
Column Reverse: backwards
What’s the direction of row?
Row moves from left to right.
Reverse moves from right to left.
In general, how many columns are recommended for a mobile layout?
One column layout for portrait mode on mobile
As it lends itself to scrolling on mobile devices
Consider the following media query:
Will this media query be applied if the width of the browser is 768 pixels across?
Yes. The min-width media feature is inclusive, so a brower width that is equal to the min width will make the media query true.
Which of the following are acceptable values for the media feature orientation?
Landscape
What is flexbox?
Flexbox is a collection of CSS properties for adjusting page layout based on different screensizes.
Why is it important to create breakpoints based on content rather than based on popular device screen sizes?
If breakpoints are based on popular screen sizes then they will not be ready for devices that have not yet been released
In computer programming, two common boolean operators are “and” and “or”. Media queries use the keyword “and”, but how could a media query represent an “or” if there’s no keyword for it?
While there is no or keyword, using a comma is practically equivalent.
