somegeekintn.com National Electrical Manufacturers Association.
-
Upload
jared-brooks -
Category
Documents
-
view
214 -
download
0
Transcript of somegeekintn.com National Electrical Manufacturers Association.
![Page 1: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/1.jpg)
Don’t break the web
Rey Bango & Tyson MatanichMicrosoft Developer Awesomeness
![Page 2: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/2.jpg)
somegeekintn.com
![Page 3: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/3.jpg)
National Electrical Manufacturers Association
![Page 4: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/4.jpg)
W3CEcma International
IETF
![Page 5: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/5.jpg)
![Page 6: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/6.jpg)
JavaScript
![Page 7: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/7.jpg)
![Page 8: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/8.jpg)
Stable & emerging
![Page 9: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/9.jpg)
• There were no recent additions or changes and no renaming or major changes are expected
• Supported by at least two browsers other than Internet Explorer 10
• Interoperable across all these browsers for the features’ core use cases
• Already used on the Web, including in their unprefixed form
• Reached Candidate Recommendation or are likely to become Candidate Recommendations
Stable standards
![Page 10: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/10.jpg)
Allow the specification to evolve• Without prefixes, web content written for the earliest
implementation(s) could constrain the editor(s) and make useful additions or changes difficult or even impossible.
Segregate experimental implementations• The bugs or choice of draft version of a particular browser have
no impact on other browsers.
Style sheet documentation• The vendor-specific dependencies of a style sheet are explicitly
documented.
Emerging standards
![Page 11: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/11.jpg)
Designated by vendor prefixesEach vendor has its own prefixStyles
• -ms- (Microsoft)
• -moz- (Mozilla)
• -webkit- (Webkit-based browsers like Chrome & Safari)
• -o- (Opera)
Example:
• display: -ms-flexbox;
• display: -webkit-flexbox;
Emerging standards
![Page 12: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/12.jpg)
Platform APIs
• window.requestAnimationFrame()
– window.mozRequestAnimationFrame()
– window.webkitRequestAnimationFrame()
– window.msRequestAnimationFrame()
Emerging standards
![Page 13: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/13.jpg)
![Page 14: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/14.jpg)
Features you can depend on
![Page 15: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/15.jpg)
Minimize breaking changes
![Page 16: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/16.jpg)
CSS Gradients • Introduced in 2008• Working Draft in 2009
background: -webkit-linear-gradient(left, yellow, red);background: -moz-linear-gradient(left, yellow, red);background: -o-linear-gradient(left, yellow, red);background: -ms-linear-gradient(left, yellow, red);
Candidate Recommendation in 2012background: linear-gradient(to right, yellow, red);
Specs change
![Page 17: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/17.jpg)
Examples
Websocket• 2010: Security flaw forced Mozilla & Opera to back out
support
WebGL• 2011: Security flaw identified that could allow low-level
exploits due to access to graphics drivers & hardware• CERT issued a warning on this recommending users disable
WebGL
Specs need time to bake
![Page 18: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/18.jpg)
Browser vendors generally drop their prefix when the corresponding specification
reaches the Candidate Recommendation stage.
![Page 19: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/19.jpg)
-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);transform: rotate(30deg);
![Page 20: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/20.jpg)
-webkit-transform: rotate(30deg);
![Page 21: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/21.jpg)
-webkit-box-reflect:…;
Proprietary, NOT standard
![Page 22: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/22.jpg)
“Best viewed in…..”
![Page 23: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/23.jpg)
Stats via Ars Technica
![Page 24: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/24.jpg)
Think cross-browser!
![Page 25: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/25.jpg)
-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);transform: rotate(30deg);
![Page 26: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/26.jpg)
![Page 27: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/27.jpg)
Is it a standard?
“box-shadow” site:w3.org“box-reflect” site:w3.org
![Page 28: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/28.jpg)
Browser fragmentation
![Page 29: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/29.jpg)
![Page 30: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/30.jpg)
Varying Levels of Support
• Across browsers
• Across browser versions
• New versions released constantly
Browser detection doesn’t work
• Fixes based on assumptions
• Full-time job tracking changes
Fragmentation
![Page 31: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/31.jpg)
Solutions?
![Page 32: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/32.jpg)
Feature detection
![Page 33: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/33.jpg)
Act based on what browsers support, not their versions
Check for the feature you want to use
• Object
• Method
• Property
• Behavior
Dynamically load custom code to mimic missing features
Detect for standards-based features first
• Browsers often support both standards and legacy
• Standards are your most stable ground to build upon
Feature detection
![Page 34: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/34.jpg)
Why not check for a browser?
![Page 35: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/35.jpg)
// If not IE then use addEventListener…if (navigator.userAgent.indexOf("MSIE") == -1) {
window.addEventListener( “load”, popMessage, false );
} else if (window.attachEvent) {
window.attachEvent( “onload”, popMessage);
}
Bad
![Page 36: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/36.jpg)
if (window.addEventListener) {
window.addEventListener( “load”, popMessage, false );
} else if (window.attachEvent) {
window.attachEvent( “onload”, popMessage);
}
Good
![Page 37: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/37.jpg)
What happens when feature detection looks
like this?
![Page 38: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/38.jpg)
function(){
var sheet, bool, head = docHead || docElement, style = document.createElement("style"), impl = document.implementation || { hasFeature: function() { return false; } }; style.type = 'text/css'; head.insertBefore(style, head.firstChild); sheet = style.sheet || style.styleSheet;
var supportAtRule = impl.hasFeature('CSS2', '') ? function(rule) { if (!(sheet && rule)) return false; var result = false; try { sheet.insertRule(rule, 0); result = (/src/i).test(sheet.cssRules[0].cssText); sheet.deleteRule(sheet.cssRules.length - 1); } catch(e) { } return result; } : function(rule) { if (!(sheet && rule)) return false; sheet.cssText = rule; return sheet.cssText.length !== 0 && (/src/i).test(sheet.cssText) && sheet.cssText .replace(/\r+|\n+/g, '') .indexOf(rule.split(' ')[0]) === 0; }; bool = supportAtRule('@font-face { font-family: "font"; src: url(data:,); }'); head.removeChild(style); return bool; };
Yuck!
![Page 39: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/39.jpg)
![Page 40: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/40.jpg)
Best feature detection support
Detects:• All major HTML5 features
• All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
• Twitter, National Football League, Burger King, and many more…
Constantly updated
![Page 41: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/41.jpg)
1,031 Responses
• jQuery: 89%
• Modernizr: 51%
• Git: 47%
• HTML5 Boilerplate: 43%
• Sass: 25%
• LESS: 23%
• Compass:18%
Widely used
![Page 42: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/42.jpg)
![Page 43: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/43.jpg)
Test for @font-face
![Page 44: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/44.jpg)
function(){
var sheet, bool, head = docHead || docElement, style = document.createElement("style"), impl = document.implementation || { hasFeature: function() { return false; } }; style.type = 'text/css'; head.insertBefore(style, head.firstChild); sheet = style.sheet || style.styleSheet;
var supportAtRule = impl.hasFeature('CSS2', '') ? function(rule) { if (!(sheet && rule)) return false; var result = false; try { sheet.insertRule(rule, 0); result = (/src/i).test(sheet.cssRules[0].cssText); sheet.deleteRule(sheet.cssRules.length - 1); } catch(e) { } return result; } : function(rule) { if (!(sheet && rule)) return false; sheet.cssText = rule; return sheet.cssText.length !== 0 && (/src/i).test(sheet.cssText) && sheet.cssText .replace(/\r+|\n+/g, '') .indexOf(rule.split(' ')[0]) === 0; }; bool = supportAtRule('@font-face { font-family: "font"; src: url(data:,); }'); head.removeChild(style); return bool; };
You can do this
![Page 45: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/45.jpg)
if (Modernizr.fontface){…}
Or this…
![Page 46: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/46.jpg)
Polyfills & shims
![Page 47: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/47.jpg)
What are they?• Typically JavaScript, HTML, & CSS code
What do they do?• Provides the technology that you, the developer, expect the
browser to provide natively
• Provides support for missing features
When do you use them?• Use them to fall back gracefully or mimic functionality
Polyfills & shims
![Page 48: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/48.jpg)
Polyfill• Replicates the real, standard feature API
• You can develop for the future
Shims• Provides own API to a missing feature
• Doesn’t adhere to a specification but fills the gap
• Generally provides more features
What’s the difference?
![Page 49: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/49.jpg)
Stylesheet:article { -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px;-o-border-radius:10px;border-radius:10px;
}
JavaScript code for non-modern browser:if (!Modernizr.borderradius) {
// Load a shim to mimic the rounded corners...
$.getScript("js/jquery.corner.js", function () {
$("article").corner();
});
}
![Page 50: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/50.jpg)
Considerations• You need to vet the code
– Does it work as expected?
– Cross-browser?
• You may need to support it in the future
– Developer abandons work
– Do you have the skills to maintain it?
• API Consistency
– Will you need to rewrite your code later?
Consider this
![Page 51: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/51.jpg)
Focus on STABLE standards
• Specs can change and you want to be ready
• Experimentation is perfectly fine
Cross-browser matters
• Do you want to go back to the “Best Viewed in” days?
• Detect for standards first
• Use Modernizr – http://modernizr.com
Takeaway
![Page 52: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/52.jpg)
Polyfills and shims
• Opt for code that mimics a standard API to avoid a rewrite
• You may have to support the code going forward
Test your sites across all major browsers
• Lots of options for all operating systems
• Browserstack.com stands out for ease of use and availability
Takeaway
![Page 53: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/53.jpg)
Microsoft.com
![Page 54: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/54.jpg)
There is no standard screen resolution
![Page 55: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/55.jpg)
This is not the standard
image by Nic’s events’
![Page 56: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/56.jpg)
More modern,but not the standard
image by Hire London
![Page 57: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/57.jpg)
Smaller,but not the standard
image by Randolf Jorberg
![Page 58: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/58.jpg)
Separate web sites
Lets build one site for “normal” computers and another one for phones.
The “normal” site can be ____px wide and the mobile one can be ____px wide.
![Page 59: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/59.jpg)
Old “normal” site and mobile site
Previous Microsoft.com
www.microsoft.com
m.microsoft.com
![Page 60: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/60.jpg)
Responsive web design
Any screen / browser sizeFluid layoutSame markupSame CSSSame URL
Responsive designs should not just be fluid but also be thoughtful
![Page 61: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/61.jpg)
New Microsoft.com
![Page 62: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/62.jpg)
It was almost ok to forget about 800 x 600 and now any size goes
Viewport
![Page 63: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/63.jpg)
Viewport
<!-- Not a standard -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
/* W3C Working Draft */
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
![Page 64: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/64.jpg)
@media screen and (min-width: 680px) {
body {
font-size: 0.8em;
}
}
“…media queries optimize the design for different viewing contexts…” - Ethan Marcotte
Media queries
![Page 65: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/65.jpg)
Breakpoint timeline
![Page 66: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/66.jpg)
Sizing content into full width, halves, thirds, and quarters
Proportional grid
![Page 67: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/67.jpg)
Cross-browser support
Simple?
![Page 68: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/68.jpg)
PCMac
iPhoneiPad
IE 10IE 9IE 8IE 7IE 6
IE Mobile 10IE Mobile 9IE Mobile 8
Xbox
PC TabletPhone
PC Kindle FirePC
Build for your users
…not quite so simplewe test on 25+ browser, OS, device combinations
![Page 69: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/69.jpg)
Older browsers
Use a JavaScript library to add supportLock the layout to specific width
Older browsers don’t support media queries
![Page 70: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/70.jpg)
Decide whether different is ok
IE 6 IE 10
![Page 71: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/71.jpg)
Pixel perfect isn't always required
IE 6 IE 10
![Page 72: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/72.jpg)
User-agent vs. feature detection
User-agent detection requires maintenanceFeature detection is future friendlySometimes user-agent detection is required
Use the right tool for the job
![Page 73: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/73.jpg)
User-agent detection
When we use itContent targetingLegacy browser supportVideoLocal web fonts
We have to update lists of regular expressions as new browsers are released
![Page 74: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/74.jpg)
Feature detection
When we use itEventsCSS3 AnimationsVideoWeb fonts
Doesn’t require ongoing maintenance
![Page 75: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/75.jpg)
HD images
Quality vs. file sizeUseful when displaying text in images or logos
Not all users have fast, unlimited bandwidth
![Page 76: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/76.jpg)
Microsoft logo
1x on iPad = 861 bytes 2x on iPad = 1.5 KB
![Page 77: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/77.jpg)
<div data-picture data-alt="Microsoft">
<div data-src="lg-1x.png"></div>
<div data-src="lg-2x.png" data-media="(min-device-pixel-ratio: 2.0)"></div>
<div data-src="sm-1x.png" data-media="(max-width: 539px)"></div>
<div data-src="sm-2x.png" data-media="(max-width: 539px) and
(min-device-pixel-ratio: 2.0)"></div>
<noscript><img src="lg-1x.png" alt="Microsoft" /></noscript>
</div>
Microsoft logo unresolved
![Page 78: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/78.jpg)
Microsoft logo resolved
<div data-picture data-alt="Microsoft" data-resolved="true">
<div data-src="lg-1x.png"></div>
<div data-src="lg-2x.png" data-media="(min-device-pixel-ratio: 2.0)"></div>
<div data-src="sm-1x.png" data-media="(max-width: 539px)"></div>
<div data-src="sm-2x.png" data-media="(max-width: 539px) and
(min-device-pixel-ratio: 2.0)"></div>
<noscript><img src="lg-1x.png" alt="Microsoft" /></noscript>
<img alt="Microsoft" src="lg-2x.png" data-source-index="1" />
</div>
![Page 79: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/79.jpg)
<div data-picture data-alt="Alt text" data-disable-swap-below data-defer>
<div data-src="1600x540.jpg"></div>
<div data-src="1024x346.jpg" data-media="(max-device-pixel-width:1024px)"></div>
<div data-src="600x203.jpg" data-media="(max-device-pixel-width:600px)"></div>
<div data-src="480x162.jpg" data-media="(max-device-pixel-width:480px)"></div>
<noscript><img src="1600x540.jpg" alt="Alt text" /></noscript>
</div>
Hero image unresolved
![Page 80: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/80.jpg)
Hero image resolved
<div data-picture data-alt="Alt text" data-disable-swap-below data-defer data-resolved="true">
<div data-src="1600x540.jpg"></div>
<div data-src="1024x346.jpg" data-media="(max-device-pixel-width:1024px)"></div>
<div data-src="600x203.jpg" data-media="(max-device-pixel-width:600px)"></div>
<div data-src="480x162.jpg" data-media="(max-device-pixel-width:480px)"></div>
<noscript><img src="1600x540.jpg" alt="Alt text" /></noscript>
<img alt="Alt text" src="1600x540.jpg" data-source-index="0" />
</div>
![Page 81: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/81.jpg)
Web fonts
Basic support in all major browsers - even IE 6Graceful degradation to local fonts *
Be careful of file sizesCreate font packs with only required charactersSome locales require too many glyphs
“Type design is going to change a lot as we do less for print and more specifically for the screen” - Jeff Veen
![Page 82: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/82.jpg)
Segoe UI LightSegoe UI
Web fonts on Microsoft.com
Tahoma
![Page 83: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/83.jpg)
Defining the web font
@font-face {
font-family: 'wf_SegoeUI';
src: url('font.eot');
src: local('Segoe UI'), local('Segoe'), local('Segoe WP'),
url('font.eot?#iefix') format('embedded-opentype'),
url('font.woff') format('woff'),
url(font.ttf') format('truetype'),
url('font.svg#web') format('svg');
font-weight: normal;
font-style: normal;
}
![Page 84: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/84.jpg)
Using the web font
body {
font-family: 'wf_SegoeUI', 'Segoe UI', 'Segoe', 'Segoe WP',
'Tahoma', 'Verdana', 'Arial', 'sans-serif';
}
![Page 85: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/85.jpg)
Icon fonts
ProsVector – no need for 2x imagesCan change color with CSSFewer HTTP requests – similar to image spriting
ConsDoesn't work in all browsers
Can increase clarity and decrease page weight
![Page 86: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/86.jpg)
Eight vector graphics combined into one font file
Icon font used on Microsoft.com
![Page 87: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/87.jpg)
@font-face {
font-family: 'MSHPIconsRegular';
src: url('icons.eot');
src: url('icons.eot?#iefix') format('embedded-opentype'),
url('icons.woff') format('woff'),
url('icons.ttf') format('truetype'),
url('icons.svg#web') format('svg');
font-weight: normal;
font-style: normal;
}
Defining the icon font
![Page 88: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/88.jpg)
Using the icon font
.icon-menu, .icon-search {
font-family: 'MSHPIconsRegular';
color: #1570A6;
}
.fontface .icon-menu:after {
content: '\e003';
}
.fontface .icon-search:after {
content: '\e004';
}
![Page 89: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/89.jpg)
.nofontface .icon-menu, .nofontface .icon-search {
background-position: center center;
background-repeat: no-repeat;
height:16px;
width:16px;
}
.nofontface .icon-menu {
background-image: url('menu.png');
}
.nofontface .icon-search {
background-image: url('search.png');
}
Backward compatibility for icon fonts
![Page 90: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/90.jpg)
Considerations when going responsive
Thoughtfully considerBreakpoint timelineGrid systemCMS integrationImage sizesBrowser supportTest plansBe all in
“Is responsive web design right for my web site?”
![Page 91: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/91.jpg)
![Page 92: somegeekintn.com National Electrical Manufacturers Association.](https://reader036.fdocuments.in/reader036/viewer/2022062518/56649eda5503460f94be9018/html5/thumbnails/92.jpg)
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.