responsive web design
makes your web page look good and have the same user experience on all devices
RWD uses only
HTML and CSS to resize, hide, shrink, enlarge, or move the content to make a web page look good
RWD is a ______ alternative to ______
cost-effective, developing mobile applications separately
3 RWD solutions
viewport, css media queries, grid systems
viewport
user’s visible area of a web page
viewport varies depending on
size of the device screen
by including the <meta></meta> viewport element in your web page,
the browser will automatically set the width of the page to the screen-width of the device
meta viewport element
<meta></meta>
potential problems that may cause bad UX
- an element can be wider than the viewport
- no guarantee that content will look good on all screens
CSS media queries
allow you to decide what a page should look like depending on the media type being used to display the page
a media type can be
screen, print, handheld, braille, and speech
css styles that apply to all media types is declared by
@media all
disadvantages of css media queries
- lengthy code
- can’t enumerate all possible devices
example of css @ media all
<style>
@media all
{
body{}
h1{}
}</style>grid system
layout methodology where rows and columns are defined using relative units such as percentages, rather than fixed units like pixels
bootstrap grid system divides a row into
12 equal columns
columns can be grouped together to create
wider columns
columns can be grouped differently depending on the
width of the container
bootstrap
open-source frontend web framework, also known as UI toolkit, for designing web applications
grid systems are ____ and are most commonly used in ______
fluid, RWD
t/f: columns re-arrange automatically depending on screen size
true
