TOPIC 1 (PRE-FINALS) Flashcards
makes your web page look good on all devices
Responsive web design
uses only HTML and CSSResponsive web design
Responsive web design
is not a program or a JavaScript
Responsive web design
Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device:
Designing for the best experience
Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and easy to use, regardless of the device. Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device
Desktop-First Design
Advantages of Desktop First Design
- Rich Features: Designing for desktops allows for the inclusion of more complex features and functionalities
- Familiarity: Many designers are more accustomed to this approach, having designed for desktops for years.
Challenges of Desktop First Design
- Performances Issues on Mobile: A site designed for desktops might not perform as well on mobile devices
- Possible Over-Complexity: Theres a risk of adding too many features, which might not be necessary for mobile users.
is a strategy where designers create as website or application for mobile devices first and then scale it up for larger screens. This approach emerged as a response to the rapid growth of mobile device usage.
Mobile first design
Advantages of Mobile First Design
- Optimized User Experience: Mobile-first ensures that the design is tailored for smaller screens, leading to a smoother user experience.
- Performance Boost: Mobile devices often have processing power and bandwidth limitations. Designing for mobile first ensures that the site is optimized for these constraints
Challenges of Mobile First Design
- Scaling Up: Sometimes, scaling up from a mobile design to a desktop can be challenging, especially if certain elements don’t translate well to larger screens
- Limited Features: Due to the constraints of mobile devices, some features might be omitted or simplified.
HTML5 introduced a method to let web designers take control over the viewport, through the <meta></meta> tag. You should include the following <meta></meta> viewport element in all your web pages.
Viewport
This gives the browser instructions on how to control the page’s dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Viewport
in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.
Media queries
Using _________ are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).
Media queries
CSS media types
All
Print
Screen
Used for all media type devices
ALL
Used for print preview mode
Used for computer screens, tablets, smart-phones etc.
SCREEN
Orientation of the viewport. Landscape or portrait
Orientation
Maximum height of the viewport
max-height
Minimum height of the viewport
min-height
Height of the viewport (including scrollbar)
height
height
Maximum width of the viewport
max-width
Minimum width of the viewport
min-width
Width of the viewport (including scrollbar)
width
Consists of a media type and can contain one or more media features, which resolve to either true or false
MEDIA QUERY SYNTAX
This keyword inverts the meaning of an entire media query
not
This keyword prevents older browsers that do not support media queries from applying the specified styles. It has no effect on modern browsers
only
This keyword combines a media type and one or more media features
and
