I am working a contract at Dell in Round Rock, Texas (an Austin border town) for Sogeti. It is OK. Dell paid for me to spend seven weeks in Nashua, New Hampshire and business travel was a first for me. There has also been at least one neat free presentation over Lync too. I saw Tyson Matanich of Microsoft speak over a Lync meeting on accessibility and he asserted that beyond stuff like ARIA, accessibility in web design also means compatibility for mobile devices, tablets, and, yes, smart watches. Tyson recommended using responsive layouts with media queries to accommodate this.
@media screen and (min-width: 680px) {
body {
font-size: 0.8em;
}
}
I made the page below on my desktop in the name of experimentation. If I open it in a browser and then drag the browser wider and then smaller again horizontally, I can see the color of the div change in real time. This sort of accommodation is cornerstone to responsive layout. A change of color is perhaps a silly example though. :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Whatever</title>
<meta charset="utf-8">
<style type="text/css" media="all">
#foo {
background-color: #FFCCCC;
}
@media screen and (min-width: 300px) {
#foo {
background-color: #CCFFCC;
}
}
@media screen and (min-width: 600px) {
#foo {
background-color: #CCCCFF;
}
}
</style>
</head>
<body>
<div id="foo">Whatever</div>
</body>
</html>
The word screen following @media should keep this stuff from having bias on print. Notice in my example that I set a default value for the narrowest possible width and then write exception cases for scaling upwards. Tyson said this is good practice. Write for mobile FIRST! He gave the following slide showing off how he adds alterations as a page width grows.
Tyson said the viewport tag is a weak way to accommodate the same sort of stuff that media queries address above.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
This is more gauge-your-environment CSS, but I think it is inferior to media queries too.
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
The layouts Tyson envisions and authors are fluid. Text wraps around images, things float, and there isn't a fixed width, but beyond that they have a responsive web design meaning:
- media queries
- flexible content
Picturefill is an example of flexible content that allows for swapping out pictures of different sizes:
<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>
Icon Fonts were also recommended.
Raj Kaimal, introduced Tyson Matanich and in his introduction, he himself touched on LESS:
@dellColor: Lighten(black, 20%);
.mastHead {
background-color: @dellColor;
}
.myHeading {
color: @dellColor;
}
.myClass {
padding: 5px;
}
.mySecondClass {
margin: 10px;
}
LESS compiles to CSS. The LESS above makes the CSS here:
.mastHead {
background-color: #333333;
}
.myHeading {
color: #333333;
}
.myClass {
padding: 5px;
}
.mySecondClass {
margin: 10px;
}
No comments:
Post a Comment