Responsive Design Flashcards
What screen size should you start with? Why?
It’s best to start with mobile screen size when building an application.
It is easier to scale up than it is to scale down. It also forces you to decided what is necessary and unnecessary to include because you have limited space. Some effects may also load slower on mobile, which could impact your decision to include it.
Based on Webflow’s breakpoints, between what pixel widths define a desktop view? Tablet? Mobile landscape? Mobile? Large desktop and above?
Desktop: 992px — 1439px
Tablet: 766px — 991px
Mobile Landscape: 479px — 767px
Mobile: 320px — 478px (may get away with 360px on the low end. 320 is itouch range while 360 and above is everything past iPhone 5.)
Large Desktop: 1440px — 1919px
Anything bigger is 1920px and above
What should you plan for when designing for mobile?
Don’t make things difficult since it’s more difficult to navigate a website on mobile. If you want people to make a purchase on your site, make that option very easily accessible.
Also design for thumb clicks. This means keeping buttons in the center of the screen and closer to the bottom for easy access.
Use a mobile devices capabilities. Credit card scanner, photo sharing, two factor authentication, performing things with voice commands. All these things are convenient in mobile because they come with the phone.
How do you keep your site fluid even when someone is manually adjusting their browser window?
Use percentages rather than fixed values.
Use min/max widths so they don’t go past any limits.
Use SVG images instead of JPG and PNG. SVG images scale up and down without losing quality.
Setting sizes based on viewport width (vw) will also make things grow/shrink with the width of the screen.
What is lazy loading? How do you do it?
