4.02
CSS Media Query
• CSS media query's can change styles to match the device size, screen type and orientation (portrait and landscape). This feature has given both developers and designers a powerful tool for creating easily accessible websites. • These are small query's or statements with CSS and HTML that specify when to use specific elements styles.
CSS for div
#main-wraps refers to the div id.The id attributes specifies a unique name.
Layouts that work on many devices
- <div> layouts and CSS can create flexible layouts that work on various screen sizes. - Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing , panning, and scrolling—across a wide range of devices.
Fixed Layout
- A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. -The important thing is that the container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors. -Fixed layout in pixels -The container div is 960px - The header div is 880px plus 80 pixels of margins.• -The Content div and sidebar div plus a 20px space equal 880 px
Devices vary in resolution and pixel density
- As hardware changes, resolution and pixel density change - Web layout needs to be flexible and adjust to various mobile devices and new devices - A pixel is an abstract unit of measurement and it does not have a single specific size. -More than one type of Pixel Device pixel :The smallest physical unit in a display. Reference pixel:Reference pixels are based on an optical reference unit and developed by the w3c. CSS pixel: CSS pixel is a unit of measure. Bitmap pixel:The smallest unit of data in a raster image.
Viewport Problems
- Different mobile browsers have slightly different implementations of the viewport meta tag. -The viewport meta tag is an HTML meta tag that lives inside the <head> element of a web page. It was originally created by Apple when they released Mobile Safari for the iPhone and though not an official standard it has since been adopted by many other mobile browsers
Zooming and Browsers
-Zooming is a common action when users find a website too small for comfortable viewing. Or, to put it another way, websites that are designed too small are very common. There is really no "perfect" size, because almost everyone has at least some level of visual impairment, since our eyes inevitably deteriorate with age. -With the increase in touchscreen devices, pinch-to-zoom has become the standard way to enlarge fixed- sized content designed for larger screens (i.e. much of the Web today).
Global Attributes
-id - Specifies a unique id for an element - class - Specifies one or more classnames for an element (refers to a class in a style sheet) -style - Specifies an inline CSS style for an element -lang - Specifies the language of the element's content
Absolute v Relative Font Size
• Absolute size: • Sets the text to a specified size • Does not allow a user to change the text size in all browsers (bad for accessibility reasons) • Absolute size is useful when the physical size of the output is known • Relative size: • Sets the size relative to surrounding elements • Allows a user to change the text size in browsers
What is an em unit?
• An em is a unit of measurement in the field of typography, equal to the currently specified point size. The name of em is related to M. Originally the unit was derived from the width of the capital "M" in the given typeface.
What is SVG?
SVG stands for Scanlable Vector Graphics. Is used to define vector based graphics for the web. Defines Vector Graphic in XML format. Does not lose any quality if they are resized or zoomed in. Every element and attribute in SVG files can be animated. SVG is W3C recommendations.
Responsive Web Design
-Ethan Marcotte coined the term responsive webdesign in an article published online. He took existing techniques involving flexible grid layout, flexible images, and media queries into a unified approach to web design. -Many designers have advocated an approach to design for the smallest viewport first and then work up towards the larger viewpoints. The design and content can be enhanced as you work upward.
WHEN USING BITMAPS
-For modern browsers, add "max-width: 100%" to images so they scale down to fit within their containing element in a fluid layout -Bitmap images are composed of a fixed set of dots, while vector images are composed of a fixed set of shapes. Scaling a bitmap reveals the dots while scaling a vector image preserves the shapes.
Semantic elements
-Many of existing web sites today contains HTML code like this: <div id="nav">, <div class="header">, or <div id="footer">, to indicate navigation links, header, and footer. - HTML5 offers new semantic elements to clearly define different parts of a web page; such as <header>
Fixed-width Layouts
- In fixed-width layouts, the width of the site isbound to a certain number of pixels. - Generally, the measure chosen is 960 pixels. - If a device is less than 960 pixels, the site will not display properly and scrollbars will appear. - If a device is greater than 960 pixels, large amounts of white space will appear on the edges. :Pros of Fixed-Width Layout - Easier to use and easier to customize in terms of design. - Widths are the same for every browser, so there is less hassle with images, forms, video and other content that are fixed- width. -There is no need for min-width or max-width, which isn't supported by every browser anyway. -Even if a website is designed to be compatible with the smallest screen resolution, 800×600, the content will still be wide enough at a larger resolution to be easily legible. :Cons of Fixed-Width Layout -May create excessive white space for users with larger screen resolutions -Smaller screen resolutions may require a horizontal scroll bar, depending on the fixed layout's width. -Seamless textures, patterns and image continuation are needed to accommodate those with larger resolutions. - Fixed-width layouts may create usability issues for mobile users and users with very large screens.
Querying Pixel Density
- Pixel density can be queried usingJavaScript -CSS Media Queries can be used to serve up the appropriately sized assets.
Relative Units
- Relative layouts are accomplished by using a relative unit like the em or the percent ("%"). -The em is basically the height of the font being used on the page. - It is considered relative because a 16 point font has a different height from, say, a 12 point font. -The percent has the normal meaning you are used to from mathematics. That is, if the width of the page is set to 80%, it means 80% of the maximum width it can have. - It's regarded as relative since the maximum width varies depending on how big your browser window is. - The term "em" is a reference to the Letter "M" in written form.
Factors to consider in Layout
- Screen resolution and pixel density - Browser choice -Whether or not the browser is maximized - Extra toolbars open in the browser (History, Bookmarks, etc.) - The operating system and hardware
Why don't web page look the same?
- The screen resolution of the monitor or screen - The operating system - The web browser - Individual user preferences
Web browser Rendering
- Your Web browser uses a rendering engine - The rendering engine will start getting the contents of the requested document from the networking layer. -For better user experience, the rendering engine will try to display contents on the screen as soon as possible.
Em unit
-"Ems" (em):The "em" is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
Bitmap Pixel
-A bitmap pixel is the smallestunit of data in a raster image (PNG, JPG, GIF, etc). Each pixel contains information on how it is to be displayed, including its position in the image's coordinate system and its color. -Some image formats can store additional per-pixel data, such as opacity (which is the alpha channel).
Physical size
-A device pixel (or physical pixel) is the tiniest physical unit in a display. -Screen density or pixel density refers to the number of device pixels on a physical surface. It is often measured in pixels per inch (PPI).
<header> <footer> <nav> are new in html5
-A fairly standard layout consists of a banner near the top, navigation, and your content or display box. These are the backbone to any great website. - In HTML5 there is a <header> element, as well as a <nav>, <footer> that can replace these div tags.
Mobile Browsers
-A mobile browser, also called a microbrowser, minibrowser, or wireless internet browser (WIB), is a web browser designed for use on a mobile device such as a mobile phone or PDA. Mobile browsers are optimized so as to display Web content most effectively for small screens on portable devices. Mobile browser software must be small and efficient to accommodate the low memory capacity and low- bandwidth of wireless handheld devices.
GUIDELINES FOR IMAGES
-Avoid using images with inappropriateresolutions. - Pre-scale images in various resolutions and serve an image appropriate for the viewport. -When images are not scaled appropriately, they will appear blurry when scaled up -Images that are larger than necessary waste battery and cause longer downloads
Images on The web
-Besides its raster resolution, an image on the Web has an abstract size, defined in CSS pixels. The browser squeezes or stretches the image based on its CSS height or width during the rendering process. -CSS defines that raster images (such as photos) are, by default, displayed with one image pixel mapping to 1px.
Pixel and CSS
-CSS offers a number of different units for expressing length. - Some have their history in typography, such as point (pt) and pica (pc). -Others are known from everyday use, such as centimeter (cm) and inch (in). -And there is also a "magic" unit that was invented specifically for CSS: the px. -The CSS px is not defined as a constant length, but as something that depends on the type of device and its typical use.
Fixed to Fluid
-Compute Percentages and change from pixels to percents -The concepts of fixed layout means we want to calculate an equivalent percentage to use inside the wrapper divided. - In a fluid website layout, also referred to as a liquid layout, the majority of the components have percentage widths, and thus adjust to the user's screen resolution.
Responsive Design
-Mobile browsing is expected to overtake desktop browsing within a few years. -Websites are viewed on a variety of devices beyond traditional desktops--from smartphones to tablets to game consoles to large-screen televisions to vehicles. (challenges) - Many of these devices use touch interfaces, game console buttons—things beyond the traditional mouse pointer. - These devices come in a wide variety of screen resolutions and screen sizes. - The size of a pixel varies according to the device. - Mobile networks can be slower and most users have fixed data plans (expense) - Limited memory, processor power and battery A wide variety of browsers are used on mobile devices.
WHAT DO YOU SEE ONLINE?
-Most images on the Web are bitmaps;also known as raster graphics. -Bitmaps can be pre-scaled or resized so an appropriate size is displayed -depending upon the viewport.
Website Layout
-Most websites have organized their content in multiple columns (formatted like a magazine or newspaper). -Multiple columns are created by using <div> or <table> elements. -Cascading Style Sheets are used to position elements, or to create backgrounds or a colorful look for the pages. reminder:Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!
Web Content
-Not all browsers render all web content in exactly the same way. -Web content doesn't need to look exactly the same across every browser and device. -As long as it still provides a good user experience and gives them access to the content and services required by their current browsing experience.
Text Display
-One of the first places this causes problems is in text: More pixels in a smaller space means that fonts sized in pixels will look correspondingly dinky.
Physical Density
-Pixel density is a good indication of how clear the device display will be. - The higher the number, the smaller the size of the pixels, so graphics are perceived as more crisp and less pixelated.
Mobile Devices
-Portable - Always connected - Personal and can be personalized - Location awareness -One-handed device - Can be used as a universal alerting device
WHY SCALABLE IMAGES?
-Regardless of the method used, raster images remain inherently constrained by their bitmap resolution; they were never meant to be infinitely scalable. This is where vector graphics have the advantage, being a future-proof way to "Retinize" your Web graphics. -A single SVG image can be used as a universal asset, scaling infinitely up or down as required. This not only saves precious bandwidth (most SVG files tend to be smaller in size than standard-resolution PNGs), but also makes your graphic assets much easier to maintain.
Resolution
-Resolution is a simple count of the number of pixels across the entire width and height of a device. - The iPhone 5 resolution is 1136 x 640. Compare that to the original iPhone which is 480 x 320.
ADVANTAGES OF USING SVG OVER OTHER IMAGE FORMATS (LIKE JPEG AND GIF)
-SVG images can be created and edited with any text editor. -SVG images can be searched, indexed, scripted, and compressed. - SVG images are scalable -SVG images can be printed with high quality at any resolution. -SVG images are zoomable (and the image can be zoomed without degradation)
<div>
-The <div> tag defines a division or a section in an HTML document. - The <div> tag is used to group block-elements to format them with CSS. -The <div> element is very often used together with CSS, to layout a web page -Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once. <div> tag and attributes - The <div> tag supports the global attributes in HTML - HTML 5 has introduced some new global attributes -Global attributes can be used on any HTML element
Container Elements
-The <header> tag specifies a header for a document or section.The <header> element should be used as a container for introductory content or set of navigational links. -The <footer> tag defines a footer for a document or section. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc. -The <nav> tag defines a set of navigation links. It is only intended for a major block of navigation links.
Viewport
-The viewport is the area a web browser has to display a web page. -The size of that area determines the layout of the page (for example how text flows from line to line) -On desktop browsers the viewport can be resized by dragging the browser window into any size desired. On mobile devices it is controlled using the viewport meta tag.
Reference Pixel
-The w3c (World Wide Web Consortium) currently defines the reference pixel as the standard for all pixel-based measurements. -Instead of every pixel-based measurement being based on a hardware pixel it is based on an optical reference unit that might be twice the size of a hardware pixel. This new pixel should look exactly the same in all viewing situations.
Web Browser Output
-Web browsers do not render pages pixel by pixel. They read the entire code and produce an output depending on your code. There are, however, differences in the code interpretation. Therefore you should check the way your website looks on different browsers and operating systems.
Philosophy of RWD
-Web content should be presented in the most accessible manner for a particular viewport. -The mobile Web experience can be a different experience than its desktop equivalent. -The mobile user requires specific content and functionality based upon the device in use. What is needed for RWD? -An understanding of the various devices and pixel density -How user experience and user needs are different for mobile users -How Web browsers vary in rendering Web pages - HTML expertise - Extensive use of CSS required
Guiding Questions
-What are the challenges of designing for mobile devices? - How big is a pixel? - What is responsive web design? -What is the difference between fixed and fluid layouts? - What are relative and absolute units? -What are media queries and viewports?
Viewing Distance
-While pixel density is an important measure, it is not the only factor in the "crispness" of a display. -Viewing distance can affect the perceived pixel size. A cell phone and a large-screen could have the same pixel density, but the large-screen will appear as more crisp because it is viewed from a longer distance.
Web Designer
EX: -Mozilla Firefox has a built-in tools in its browsers. -Chrome Mobile Emulators -Safari Emulator -Opera Mobile Emulators.
Fluid or Liquid Layouts
• Fluid or liquid layouts define dimensions in percentages rather than pixels. • Percentages alone will not accommodate a wide variety of devices. • To accommodate varying dimensions,layouts need to remain simple. Pros of Fluid Layout • Can be more user-friendly, because it adjusts to the user's set up. • The amount of extra white space is similar between all browsers and screen resolutions, which can be more visually appealing. • If designed well, a fluid layout can eliminate horizontal scroll bars in smaller screen resolutions. Cons of Fluid Layout • Less control over what the user sees • May overlook problems because the layout looks fine on their specific screen resolution. • Images, video and other types of content with set widths may need to be set at multiple widths to accommodate different screen resolutions. • With incredibly large screen resolutions, a lack of content may create excess white space that can diminish aesthetic appeal.
Absolute units
• Pixels (px) • Points (pt) • Picas (pc) • Inches (in) • Millimeters (mm) • Centimeters (cm) Relative Units • em (font size of the element) • ex (x-height of the element's font) • % (percent)
How to Scale Fonts?
• Pixels represent a fixed size in a font. • Em unit and percentages permit scaling of text on devices.
CSS Font-size
• Setting the text size with pixels gives you full control over the text size: • The text can be resized in all browsers using the zoom tool (however, this resizes the entire page, not just the text). Set Font Size with em • To avoid the resizing problem with older versions of Internet Explorer, many developers use em instead of pixels. • The em size unit is recommended by the W3C. • 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. • The size can be calculated from pixels to em using this formula: pixels/16=em
Layout and containers
• The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and other page elements • The first div tag on a page is known as the container div tag.
Font size
• The font-size property sets the size of the text. • Being able to manage the text size is important in web design • Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs. • The font-size value can be an absolute or relative. • If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).
Media Queries
• The main purpose of a media query is to apply different CSS rules in order to obtain different layouts, depending on the width of the display window afforded to your content. • The values in the media queries are expressed in percentages and not pixels. • You can write as many media queries as you like
Font Size with % and Em
• Use a Combination of Percent and Em • The solution that works in all browsers, is to set a default font-size in percent for the <body> element: • Examplebody {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;} • Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text!
