Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Design > Adaptive Design and Progressive Enhancement > Flashcards

Adaptive Design and Progressive Enhancement Flashcards

1
Q

How many media queries do you need?

A

Personally, I add a media query when my site breaks an I need one. I also validate against client needs. If my client is on an iPhone 4, I’ll make sure it works on that device.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

However, here are a few best practice breakpoints based on the Bootstrap framework:

A 
/* Extra small devices (phones, less than 768px) */
/* Small devices (tablets, 768px and up) */
/* Medium devices (desktops, 992px and up) */
/* Large devices (large desktops, 1200px and up) */

The pure framework uses:
@media screen and (min-width: 35.5em) ≥ 568px
@media screen and (min-width: 48em) ≥ 768px
@media screen and (min-width: 64em) ≥ 1024px
@media screen and (min-width: 80em) ≥ 1280px

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Different browsers have different default styles. A reset CSS _________ the differences so that all elements are initially styled the same way. This allows developers to start from ________ ground across __________.

A

Different browsers have different defualt styles. A reset CSS normalizes the differences so that all elements are initially styled the same way. This allows developers to start from common ground across browsers.

http://meyerweb.com/eric/tools/css/reset/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

__________ _________ are used to apply ________ code (including stylesheets) for different browsers. You can conditionally load ________ files in the same manner.

A

Conditional comments are used to apply different code (including stylesheets) for different browsers. You can conditionally load JavaScript files in the same manner.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Give an example of conditional comments:

A 
//applpies only to IE8
 //applies to IE7 and less. Properties trickle down to IE6

http://html5boilerplate.com/ makes use of these quite effectively. See http://www.youtube.com/watch?v=qyM37XKkmKQ for more on HTML5 boilerplate.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

CSS is read and applied from _____ to _______. Styles applied at the top would be read and applied _____. If less ________ styles are applied last, modern browsers would use it. Older browsers would not and your CSS code would be more organized.

Older browsers may completely ignore ______ it does not understand and if there is valid ______ after, that may be ignored as well.

A

CSS is read and applied from top to bottom. Styles applied at the top would be read and applied first. If less standard styles are applied last, modern browsers would use it. Older browsers would not and your CSS code would be more organized.

Older browsers may completely ignore CSS it does not understand and if there is valid CSS after, that may be ignored as well.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Apply standard styles first code:

A 
/* <= IE 6 */ body {
   margin: 0;
   text-align: center;
   background: #600 none;
 }
/* IE 7, Mozilla, Safari, Opera */ 
body[id=css-zen-garden] {
   margin: 100px 0 0;
   padding: 0;
   text-align: center;
   background: transparent url(squidback.gif);
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

JavaScript can check the ______ ______, somewhat unreliably, to determine the _______ being used. Based on that knowledge, classes can be _____, ______, or _______ dynamically. As mentioned the ______ _________ ids not a foolproof way of checking what browser is being used.

A

JavaScript can check the User Agent, somewhat unreliably, to determine the browser being used. Based on that knowledge, classes can be added, removed, or changed dynamically. As mentioned the User Agent ids not a foolproof way of checking what browser is being used.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Some browsers have specific ______ properties that may be applied.

A

Some browsers have specific CSS properties that may be applied

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Hacks are ______ and ____ recommended but they do exist.

A

Hacks are ugly and not recommended but they do exist.

See more at:

http: //css-tricks.com/snippets/css/browser-specific-hacks/
http: //browserhacks.com/

Here are some examples.

/*Works for Firefox */
@-moz-document url-prefix() {
      #my-id {
           font-size: 100%;
      }
  }
/* IE7, IE8 */ 
#veinte { color/*\**/: blue\9; }
/*YUCK...*/
JavaScript
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Different ________ and ________ allow for different JavaScript ________. In fact, some users who access your page (including non-human readers) may not have JavaScript enabled. Developers should establish a baseline to ensure that the most basic device/browser accessing the page is served the required content.

A

Different devices and browsers allow for different JavaScript functionality. In fact, some users who access your page (including non-human readers) may not have JavaScript enabled. Developers should establish a baseline to ensure that the most basic device/browser accessing the page is served the required content.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

window.matchMedia can be used for _______ _______ _______ the same way that media queries fork CSS rules.

matchMedia uses the same _____ of the actual media query.

A

window.matchMedia can be used for fork JavaScript functionality the same way that media queries fork CSS rules.

matchMedia uses the same syntax of the actual media query.

https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Use JavaScript’s _______.________() when you want to execute different JavaScript based on media queries.
You’re not replacing CSS media queries.
CSS is for ______ and ______. JavaScript is for ________.

A

Use JavaScript’s window.matchMedia() when you want to execute different JavaScript based on media queries.
You’re not replacing CSS media queries.
CSS is for design and layout. JavaScript is for functionality

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

The aim of _________ JavaScript is to clearly separate functionality from ________ and ______/______.

For starters, that means that all scripts should, as much as possible, be held in _________ files. No _______ _______ handlers or _______ _______ elements.

If your JavaScript modifies style, it is best to add or remove classes instead of updating style properties.

A

The aim of Unobtrusive JavaScript is to clearly separate functionality from content and design/layout.

For starters, that means that all scripts should, as much as possible, be held in external files. No inline event handlers or embedded script elements.

If your JavaScript modifies style, it is best to add or remove classes instead of updating style properties.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Some _______ and _______ are different and may not support your app’s needs (partially or entirely). TEST on your devices/browsers.

In the case of the browser’s capabilities, check to see if target ________ and ________ exist. If they do not, you also have the option of handling that case gracefully.

________ _______ is recommended over browser detection.

A

Some devices and browser are different and may not support your app’s needs (partially or entirely). TEST on your devices/browsers.

In the case of the browser’s capabilities, check to see if target objects and functions exist. If they do not, you also have the option of handling that case gracefully.

Capability detection is recommended over browser detection.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Capability Detection Code:

A 
if( document.getElementById &amp;&amp; document.getElementsByTagName ){
   //execute code that uses document.getElementById or document.getElementsByTagName 
   if( document.getElementById( 'imagegallery' ) ){
      //execute code that uses an element with id="imagegallery"
  }
}
17
Q

Aim to keep effects ________ of the mouse.

Ensure that the same content is available to all users. Sometimes developers may have to fall back to a _______-side solution.

Sometimes, different browsers perform the same task but use a different _____ _____ or ________. Sometimes they may just work a little differently.

A

Aim to keep effects independent of the mouse.

Ensure that the same content is available to all users. Sometimes developers may have to fall back to a server-side solution.

Sometimes, different browsers perform the same task but use a different function name or parameters. Sometimes they may just work a little differently.

18
Q

An example of how to simplify event handling.

The code below checks for available functions and then executes code based on availability. The author has also created his own consistent function name to simplify his own code.

A 
function addEvent(obj, evType, fn){ 
 if (obj.addEventListener){ //standard
   obj.addEventListener(evType, fn, false); 
   return true; 
 } else if (obj.attachEvent){ //IE8 and below
   var r = obj.attachEvent("on"+evType, fn); 
   return r;
 } else { 
   return false; //neither addEventListener() or attachEvent() is available
 } 
}
addEvent(window, 'load', foo);
19
Q

To use hijax (1): build an old-fashioned website that uses _______ and _______ to pass information to the server. The server returns whole new _______ with each request.

A

First, build an old-fashioned website that uses hyperlinks and forms to pass information to the server. The server returns whole new pages with each request.

20
Q

To use hijax (2): Use JavaScript to _______ those links and form submissions and pass the information via _________ instead. You can then _______ which parts of the page need to be updated instead of updating the whole page.

A

Now, use JavaScript to intercept those links and form submissions and pass the information via XMLHttpRequest instead. You can then select which parts of the page need to be updated instead of updating the whole page.

More here: http://domscripting.com/blog/display/41/

http://www.ibm.com/developerworks/library/wa-aj-unobtrusive/

21
Q

Modernizr is a small _______ _______ that detects the availability of _______ implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications.

Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the_______ _______ has this feature _______ __________ or not.

A

Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications.

Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

22
Q

How to implement Modernizr:

A

As per Modernizr documentation:

Add your detects on this page: https://modernizr.com/download?setclasses

Use the following code to check:

if (Modernizr.awesomeNewFeature) {
   showOffAwesomeNewFeature();
} else {
   getTheOldLameExperience();
}

replace “awesomeNewFeature” using the table found on Modernizr’s documentation page:https://modernizr.com/docs/
See: Features detected by Modernizr

There are numerous ways to load polyfills. Here is a bonus resource on how to properly load polyfills.

https://philipwalton.com/articles/loading-polyfills-only-when-needed/

For each polyfill, you will need to read their documentation on usage and caveats.

It has support for shims, polyfills and fallbacks.

http://modernizr.com/

23
Q

________ are piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide ________. Polyfills try to maintain the same ____ for consistency.

A

Polyfills are piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Polyfills try to maintain the same API for consistency.

24
Q

An HTML5 _____ is a piece of code that allows old browsers to ______ and ____ modern HTML5 elements in older browsers

A

An HTML5 shim is a piece of code that allows old browsers to recognize and treat modern HTML5 elements in older browsers

25
Q

Fallbacks are _______ replacements for modern functionality.

A

Fallbacks are functional replacements for modern functionality.

http://modernizr.com/resources/

26
Q

Server languages can use HTTP ______ ______ headers to detect ______ and, by ________, device _______. Unfortunately, it is not _______% reliable.

A

Server languages can use HTTP User Agent headers to detect devices and, by extensions, device capabilities. Unfortunately, it is not 100% reliable.

27
Q

Developers can save a _______ using _______, then read that ________ in _______ (it also works the other way). Therefore, _______ can detect client _______ then save those capabilities with PHP.

A

Developers can save a cookie using JavaScript, then read that cookie in PHP (it also works the other way). Therefore, JavaScript can detect client capabilities then save those capabilities with PHP.

These techniques are used by Modernizr Server and WURFL.

With this knowledge, PHP can tailor its output accordingly.
http://www.creativebloq.com/responsive-web-design/getting-started-ress-5122956

28
Q

The combination of _______ ________ and __________ on the server is known as RESS (Responsive design and server side components).

A

The combination of responsive design and preprocessing on the server is known as RESS (Responsive design and server side components).

Web Design (15 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions