Author Archives: Josey

About Josey

Josey is a Sr. SharePoint Developer with ICC in Columbus, OH. He has been working with Web technologies since 1998 and with SharePoint since 2010. He is an avid fisherman and loves all things technology.

Media Queries: Part 3

This is the final part of the 3 part series on media queries. In this section, we will talk about some specifics of using these handy little things.

Device Specific Media Rules

Some devices allow you to even further target specific browsers by adding the browser specific extension in front of the rule; such as:

@media only screen and (-webkit-min-device-pixel-ratio: 2)               and (min-width: 320px),      only screen and (min–device-pixel-ratio: 2)               and (min-width: 320px),      only screen and (-o-min-device-pixel-ratio: 2/1)               and (min-width: 320px),      only screen and (min-device-pixel-ratio: 2)               and (min-width: 320px) {                              /* small screen styles go here */               }

Media Query Downside

There are some in the community who pose a good argument against using media queries. Their argument rests on the fact that adding more code to address mobile responsiveness makes the page load slower (more code = bigger file size) which affects the speed at which a site loads on a mobile device.

Along this same vein is the downside to using relative media sizing techniques, such as dynamic cropping of photos or photo scaling. To use this technique, you typically load the full version of the image and scale it back using relative sizing. But the problem again with this approach is that you’re loading a full version of the image on mobile devices which translates into more bandwidth and more latency on mobile devices which typically have less hardware capabilities and bandwidth.

Both points are valid. The only thing I can say is that it really depends on your project. Some clients don’t mind the extra couple milliseconds of load time while others are sticklers. Regardless, if you’re doing very complex calculations already on your site, the queries may just push the latency over its tipping point. I suggest looking at minimizing size where and whenever possible, but be mindful of reality.

Testing

There is a right way to test and a wrong way to test media queries (or more specifically, a responsive site in general). Let’s start with the wrong way.

The wrong way is to resize the browser window on a laptop in hopes of duplicating the smaller display. This is a bad approach because the responsive frameworks that drive the responsive actions of the site typically are dependent on device width to dictate which media queries to call. But when you resize the browser window, you’re merely changing the width and not device width. This isn’t a problem so long as you call out the width and device width both in the media feature test of your media query. But it is problematic when you or your chosen framework or grid system only test against one feature and not both.

That was the wrong way, now what is the right way to test a responsiveness? The most obvious way is test the site on all the various devices. But if your budget doesn’t allow for such eloquent testing, don’t’ fret b/c you have other options.

One is to use the built-in capabilities that come with newer versions of browsers. One example is the Responsive View button in Firebug in Firefox. While this feature does allow you to resize the data as if viewing it from another device, the problem with this approach is that you’re still only testing a specific user agent. So while it might look fine in Firebug, it might be broken on an iPad. Here’s a screenshot of where to find the Responsive View button in Firebug.

Another option is to use some of the responsive apps and emulators on the web. A good one is ProtoFluid. However, the drawback I often come across with these is that if your site has SSL (https://), or if you don’t have anonymous access enabled (authentication required), these often won’t work.

I find that a combination of all three testing methods works best for me. I start with Firebug, then test in all the browsers, then on all the mobile devices I have, and then when I’m out of local options, I resort to trying the emulators.

Media Query Tips

One common mistake people make is to neglect to include the meta tag in their HTML head. This tag looks like this:

<meta name=”viewport” content=”width=device-width” />

This tag needs to exist somewhere in your head tag or things will get wacky. Your content would not behave responsively and you’ll get a ‘zoomed out’ version of the content instead of a responsively redesigned page. What this tag does is sets the viewport to be the device-width instead of page width. So when you use relative sizing on images or other scalable content, it will be based on the width of the screen on the device your viewing the site through (viewport) instead of the page width. If you were to neglect doing this, your relative sizing wouldn’t work as intended.

Another ‘bug’ to watch out for is when it comes to CSS 2.0 browsers. To get the responsive actions in IE8 and older browsers, you can use JavaScript to fix the shortcomings of CSS3. A good library for this retrofit is the CSS3-mediaqueries-js library found here: https://code.google.com/p/css3-mediaqueries-js/ .

This file just requires you referencing it in your header and using media queries as you do with CSS3. Works like a charm for IE5 and up, Firefox 1 and up, and Safari 2 and up. If for some reason you come across something that this library doesn’t cover, you can always look up the support options for the query in question at www.caniuse.com .

Another interesting tip when it comes to verifying if media queries are supported comes from Brad Czerniak in the comments of this article: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/. Here, Brad is suggesting to register to a media query that always evaluates to true, such as:

@media screen and (max-width:7000px){#hours thead{width:5px;}}

After you have your always true media query (assuming their screen size isn’t bigger than 7000px), you can use JavaScript to test the width of the class you set in the media query as such:

If($(window).width() <= 640 && $(“#hours thead”).css(“width”) == “5px”){}

If the if statement passes, you know your device supports media queries. If it doesn’t, you can register an else clause and apply whatever fixes you need to.

Mobile First Approach

One final note to wrap up this blog series is a sort of rehash of an earlier statement. When designing a responsive site, always start with mobile first. This means to apply styles for mobile devices in your core CSS code and then use media queries for all devices bigger than your smallest. This route also makes controlling the cascading effect of CSS easier to work with. Trust me from experience that cascading

More Resources

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

https://aralbalkan.com/3331/

http://stuffandnonsense.co.uk/blog/about/proportional_leading_with_css3_media_queries

http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Good one => http://stephen.io/mediaqueries/

Media Queries: Part 2

In the  post in this series, we talked about different ways to fire a media query. First, you could fire an entire style sheet based on features of your device and handle things that way. Or, you could put your media queries right at the end of your existing CSS to reduce latency, albeit slightly. This section digs a little deeper into the CSS direct method.

Breakdown of a Media Query

Here’s a couple examples of how media queries can be written in your CSS:

@media (max-width: 300px) {      //styles go here }

@media screen and (max-width: 300px) {      //styles go here }

@media only screen and (max-device-width: 300px) {      //styles go here }

If we look at these, we see that each query has a simple structure consisting of two parts: the media type and the media feature.

The media query starts with the “@media” signifier. This is just to let the parser know that you’re initiating a media query.

The next section is the media type. The “screen” in the examples above is the type. The type is essentially a high level keyword that looks at the user agents of the device your looking through.

The last part (in parentheses) is the feature test that must evaluate to true for the styles in the braces to be applied. This includes browser height/width, device height/width, resolution, and landscape/portrait.

All this is then followed by your targeted the CSS you want to apply inside the curly braces.

All Together Meow

When you put all the pieces together,  Basically, if the viewing device type aligns with that media query type, and if the feature statement evaluates to true, the styles in the braces are applied. That’s it. Pretty simple, right?

When we start to look under the hood, we can see that the entire first statement essentially works like an ‘if’ statement in code. If the statement evaluates to true, then the styles contained in it are applied.

Keywords

The keyword ‘and’ can also be used between features to make the media query read as an “&&” would in JavaScript; meaning that both rules have to be true for the statement to be executed.

If you want to different sets of media queries to be executed, you can separate them with a comma which is akin to a “or” statement as such:

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px){      // styles go here }

Media Types

If you’re curious what all the types are you can use in your media query, here’s a full breakdown of all the types in CSS 3.0 along with a quick synopsis:

Media Types Description
All Indicates that the style or style sheet should be applied to all media types
Aural *Note: Device-Aspect-Ratio only applies to visual devices so this feature will always evaluate to false on aural types*
Braille Used for braille devices
Handheld As the name implies, it’s for handheld (mobile) devices
Print For printed media, which includes web browsers showing a ‘print preview’
Projection For projectors
Screen For color PC screens
Tty For teletypes, terminals, and other devices w/ limited display capabilities
Tv For TVs
Embossed For braille printers

 

You can see you are able to target a lot of different device types. But, in my opinion, this list is still in its infancy. With the “Internet of Things” as well as “wearables” picking up traction, the average screen size continues to get smaller and smaller. Therefore, you can expect the W3C to continue to build on this list as more and more devices need a better experience on their internet connected screens. Just imagine in a few years when a website not only has to work on laptops, phones, and tablets, but also watches, glasses, and appliances.

Media Features

After the media types in the media query is the media feature test. Here is a breakdown of all the features you can test against in the media feature area:

Media Features Description
Width Width of the browser or renderer
Min-width A minimum width
Max-width A maximum width
Height Height of the browser or rendering display
Min-height A minimum height
Max-height A maximum height
Device-width Width of the viewport
Min-device-width Minimum width of the viewport
Max-device-width Maximum width of the viewport
Device-height Height of the viewport
Min-device-height Minimum height of the viewport
Max-device-height Maximum height of the viewport
Aspect-ratio Describes the proportional relationship of height and width of the browser or rendering display (ex: 16:9 or 4:3)
Min-aspect-ratio A minimum aspect-ratio
Max-aspect-ratio A maximum aspect-ratio
Device-aspect-ratio The aspect-ratio of the device
Min-device-aspect-ratio The minimum aspect-ratio of the device
Max-device-aspect-ratio The maximum aspect-ratio of the device
Color Checks the number of bits per color of the device, with 0 being false
Min-color Checks color against a minimum value of bits per color; a min-color: 1 will apply to all colors
Max-color Checks color against a maximum value of bits per color
Color-index checks the number of entries in the color lookup table of the device, with 0 being false
Min-color-index Checks the minimum color-index
Max-color-index Checks the maximum color-index
Monochrome checks the number of bits per pixel in a monochrome frame buffer, with 0 being false; If device is not monochrome, the output device value will be 0
Min-monochrome Checks the minimum monochrome bits per pixel
Max-monochrome Checks the maximum monochrome bits per pixel
Resolution Dots Per Inch (DPI), or Dots Per Centimeter (DPCM); Basically checks the resolution of the output device
Min-resolution Checks against minimum resolution
Max-resolution Checks against maximum resolution
Scan a display type that targets televisions that use progressive scanning
Grid matches Teletype displays or devices that only show a single fixed font
Orientation portrait or landscape

 Wrap-Up

In this post we took a deep look at all the media features and media types you can test against. Hopefully you can use this page as a reference when building your own media queries. In the next and final post in this series, we will look at the downside of media queries, the right way to test a media query, and some other general tips on usage of them.

Media Queries: Part 1

This is part one of a 3-part blog series focusing on one aspect of responsive design: Media Queries. Although this series sits firmly on the SharePoint Shelf website, media queries aren’t particular to SharePoint. In fact, in the context discussed here, they can be applied to Web development in general.

Responsive What?

If you’ve been living under a rock and don’t know what responsive design is, let me spell it out for you. In a nutshell, responsive design/development is an approach to web design that makes your site elements adjust various styles on the fly based on what device you’re viewing the site on. So if you’re rocking a brand new Windows phone, the site will look differently than if you’re looking at it on a laptop.

“Why” you ask? The purpose of a responsive site is to improve the user experience and legibility of a site on a mobile device. The repositioning and scaling of containers and content makes the mobile experience better as you don’t have to do all the clunky pinch and spread finger actions to click that tiny little link embedded under the ‘here’ in “Click Here”. Instead, the link would appear bigger and more prominent. This type of design methodology is becoming increasingly more important in the business landscape due to modern advancements like the “Internet of Things”, “Bring-Your-Own-Device” initiatives, and the explosion of mobile use.

Responsive Meat and Potatoes

Responsive design/development boils down to three main elements: flexible content, a grid system, and media queries. Flexible content refers to using proportional sizing in your CSS on containers and content (percentage, ems, etc) so that your content scales properly. A grid system is a series of style classes (usually packaged in a framework or library) that dynamically repositions elements based on viewport size , are style rules that are dynamically applied based on what viewport you’re using to view the site.

There are many frameworks available that handle responsiveness in terms of grid systems for you but, even with these frameworks, you’ll often want to add your own custom functionality. That’s where media queries come in. This blog series focuses on these media queries and hopefully will leave you feeling a refreshed sense of adequacy when working with them.

What is a Media Query

CSS 2.0 introduced media queries but did so very subtly by giving us only the option of screen or print. This came in the form of the “media” CSS registration attribute as such:

<link rel=”stylesheet” type=”text/css” href=”screenStyles.css” media=”screen” />

<link rel=”stylesheet” type=”text/css” href=”printStyles.css” media=”print” />

These two examples above are essentially saying “If this site is being viewed on a screen, load the ‘screenStyles.css’ file. But if they are about to print, use the printStyle.css file.” Not many developers made use of the media queries in CSS 2.0 browsers except maybe to load a style sheet for a print view of the item. Media queries allow you to apply CSS rules based on the features of the device your viewing the site from and that’s exactly what this attribute in CSS 2.0 is doing. However, it has since been updated to include a lot more types in CSS 3.0. These checks include looking for data on:

  • Browser window width
  • Browser window height
  • Device width
  • Device height
  • Landscape versus portrait orientation
  • Screen resolution

One side note, if you plan on using CSS 3 features,

Kicking Off a Media Query

So the above examples showcased a simple way to fire a style sheet based on the media you’re viewing the site on. But you can also fire them in a couple other ways.

To fire it through XML, you use this format:

<?xml-stylesheet media=”all and (color)” rel=”stylesheet” href=”/style.css” ?>

And like the CSS 2 example above, you can register an entire file for certain device types using the following syntax:

<link rel=”stylesheet” type=”text/css” media=”all and (color)” href=”/style.css”/>

You could also fire it like this:

@import url(“/style.css”) all and (color);

Finally, you could also use CSS @media rules directly in your style sheets as such:

@media all and (color) { /*styles go here */}

Where to Put It

CSS stands for cascading style sheets which infers how the styles are applied; via a cascading flow downhill. This means that for media queries to be most effective, they should be applied to the end of the CSS file. But…

a best practice, is when it comes to responsive development, take a ‘mobile first’ approach. This means you should start your design and development at the phone level first, style the site to look right on that device, and then fit your media queries in by stepping up to larger and larger devices. So after the phone landscape and portrait views look good, you would move to tablets. Then after tablets, move to laptops and bigger monitors.

One CSS or Multiple

If you want or need to put your media query styles in a separate file due to size or legibility concerns, then you can do so by putting the media attribute on an HTML link tag as such:

<link rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width: 480px)” href=”phone.css” />

All the same formatting you can do on the inline method with media works inside this attribute as well (assuming you have CSS3 support).

Wrap-Up

This article explained some very basic implementation methods to apply media queries as well as a high level on what they are. In the next article, we’ll be digging deeper into the media query to understand what the syntax means and what options and media types are available.

Learn about SharePoint for the Web on May 15, 2014

As a SharePoint Internet developer, I was very excited about the release of  SharePoint 2013. Now that I’ve had the chance to work on it for more than a year – and have learned a lot of tools and tricks of the trade – I’m going to be sharing them at the upcoming Heartland SharePoint Conference 2014 that’s sponsored by my company.

This conference will not only feature tracks of interest to web developers, it will also provide information and advice related to other aspects of SharePoint 2013, with emphasis on:

  • Social
  • Mobile
  • Analytics
  • The Cloud

We’ve just announced that the keynote speaker for the event will be Steve Caravajal, Director of Digital Strategy and Architecture at Microsoft Corporation.  If you’re like me, you won’t want to miss Steve’s presentation.

Please remember that because this is a free event, limited attendance is available onto to qualified IT and business professionals. Those who join us will receive a complimentary breakfast and lunch.

I encourage all my blog readers to send in your request as soon as we post information on ICC’s web site.  Hope to see you there!

View Raw XML in IE8

I was tired of searching for this tidbit time and time again so I thought I’d store how to change your browser settings in Internet Explorer 8 to view raw XML instead of feed reading. This is helpful when developing against the REST api so you can see what XML is available to grab. 

Tools > Internet Options > Content tab > Feeds and Web Slices’ Settings button > uncheck “Turn on feed reading view”