INFO 30005
Web Information Technologies
Front end design/dev
Responsive Design
Copyright By PowCoder代写 加微信 powcoder
What is Responsive Design?
What is Responsive Design?
simply shrinking the desktop page is not enough
What is Responsive Design?
Page design adapts to screen size.
Your users have many different devices. Support them with one code-base.
Two familiar websites that use responsive design: Notice how the page changes …
viewed on a desktop
viewed on a phone
How to code it?
Try your web page on different screens. Find break-points where it stops working
Using relative size units can achieve a lot with little code:
For everything else, use Media Queries to change CSS at different screen sizes:
How should pages respond?
aim for higher contrast on small screens
TYPOGRAPHY:
simpler smaller fonts, wider lines on small screens
less side-by-side, more vertical on small screens
vertical layout and hidden on small screens
FORMS and TABLES:
maybe vertical layout on small screens
bigger display, maybe lower resolution on small screens
Firefox “responsive design mode”
Many websites use a white background to maximise text contrast Alternatively, some websites use a colour that matches the palette If so, consider changing to ‘white’ on small screens
Food Buddy example:
Typography
On small screens, consider using:
• simpler typefaces (consider headings and body text)
• longer lines (smaller margins, single column)
• smaller fonts (could specify in vw instead of px)
Food Buddy example:
• font is simpler, smaller, centred on small screens
• text is one-column on small screens, two on big screens
Most responsive design work concerns layout.
Small screens should have less side-by-side, more vertical layout.
Food Buddy changes the layout of both pages:
• food-list page has 1, 2, 3 or 4 columns (column-count)
• detail page has 1 or 2 columns (flexbox)
Responsive Layout
• use MultiCol, Flexbox and/or Grid to lay out elements on the page
• set up column-widths to adapt to screen sizes (fr, column-width)
• choose break points where you want your layout to change
pictures: https://responsivedesign.is/news/2019/07/multi-column-manipulation/
Responsive with Multi-Column
• offers a simple way to change layout of text and lists
• column-width = minimum acceptable width of a column
• column-count = maximum acceptable number of columns
Responsive Design with Flexbox
• Use Flexbox to swap between horizontal and vertical layouts
• Food Buddy food-detail page:
Responsive Grid + FlexBox
• This example is grid.html , provided on Canvas
• On large screens, elements are arranged as a GRID (with fr units).
• On small screens, a vertical FLEXBOX.
• Media-query switches between the two.
Many websites change the menu layout for different screen widths. My staff page is an example:
Forms, Tables
Check that special content like forms and tables work at different sizes. Food Buddy makes a small change in the search form:
Pictures need to take up most of a small screen, less of a big screen. Use % or vw units to achieve this simply.
Can set up a maximum size using: img { max-width: 100%;}
Food Buddy places img inside a parent Section, with: img {width: 80%;}
Responsive Design is rapidly evolving and is much talked about.
The textbook ‘Learning Web Design’ has a great chapter on this topic.
MDN: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design Collection of patterns at http://bradfrost.github.io/this-is-responsive/patterns.html
(2011) https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com