Scott Hanselman

Fallback HTML5 audio tags for a simple MP3 podcast are harder than you'd think

March 26, '13 Comments [33] Posted in HTML5 | Javascript
Sponsored By

I've been spending the evenings and weekends lately redesigning the blog and the Hanselminutes podcast site. I hadn't realized how cheesy looking the podcast site was all these years. I'd like to get the show expanded to a wider audience as I feel that listenership has kind of flattened lately. I am in the process of adding faces for ALL 360+ shows going back 6 years.

A big thanks to Lynsey Smith from Portland Girl Geek Dinners, by the way, for her hard work in finding pics for me!

I also wanted a nicer in-browser audio experience so I assumed I'd just drop in the audio tag and be done, right?

The HTML5 Audio tag is wonderful, right? Just works. This is the dream:

<audio id="audioplayer" preload="metadata" type="audio/mp3" >
<source src="http://s3.amazonaws.com/hanselminutes/hanselminutes_0363.mp3" type="audio/mp3"/>
Your browser doesn't support the HTML audio tag. Be sad.
</audio>

You can try that live at http://jsfiddle.net/CdxbX/ if you like.

Except it's not nearly that easy.

Here's what you'll see on IE9+:

image

Here's Chrome:

image

Here's Firefox, version 19:

Ya, Firefox currently doesn't support MP3 audio so it just flashes once then disappears. Firefox will support MP3s in audio soon though by using the underlying operating system to play the stream rather than its own embedded code.

In Firefox 20 (the beta channel) on Windows 7 and above, you can test MP3 Audio support by turning on the preference media.windows-media-foundation.enabled in about:config.

The part I was disappointed in was more of an HTML5 specification issue. Notice that while I have fallback text present, I don't see it in Firefox. That's because fallback elements are only used if your browser doesn't support the audio tag at all.

It doesn't do what I would expect at all. What I want is "Can you support any of these audio sources? No? Fallback." This seems intuitive to me.

I talked to Chris Double via Christian Heilmann at Mozilla and he said "You'd need to raise the issue with WHATWG/W3C. It's been debated before in the past. " Indeed it has. From Oct 2009, more people saying that it's not intuitive to fall back in this way:

I expected (incorrectly, in this case) that if I only produced one source element (an MP4), Firefox would drop down to use the fallback content, as it does if I include an object element for a format not supported (for example, if I include a QuickTime object and QT is not installed, the user sees fallback content). As far as I can see, the only option in this situation is to rely on Javascript and the video element's canPlayType() function. - Kit Grose

This lack of an intuitive fallback means that I can't make an audio player that works everywhere using just HTML. I have to use JavaScript, which is a bummer for such a fundamental scenario.

Getting HTML5 audio to fall back correctly in all browsers

Instead you have to make an audio tag dynamically, then interrogate the tag. This applies to both audio and video tags. I ended up using some code from my friend Matt Coneybeare.

<audio id="audioplayer" preload controls loop>
<source src="audio.mp3">
</audio>
<script type="text/javascript">
var audioTag = document.createElement('audio');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
AudioPlayer.embed("audioplayer", {soundFile: "audio.mp3"});
}
</script>

The AudioPlayer.embed at the end there is the WordPress AudioPlayer in standalone form. This way on Firefox I get the flash player since it answered false to canPlayType.

Flash audio player in Firefox

A Responsive and Touch-Friendly Audio Player in HTML5

However, the default audio player made by the <audio> tag is kind of lame, and I'd like it to better support touch, look great on tablets, etc. For this, I'll turn to Osvaldas Valutis's AudioPlayer. It's a nice little jQuery plugin that replaces the <audio> element with a lovely chunk of HTML. Since you can't actually style the HTML5 <audio> element, people just hide it, recreate it, then broker calls over to the hidden-but-still-working audio element.

This plugin, along with a little CSS styling of its default colors gives me a nice audio player that looks the same and works everywhere. Except Firefox 19/20 until the next version Firefox answers true to "canPlayType" and then it should just start working! Until then, it's the Flash fallback player, which works nicely as well.

image

The other problem is the QuickTime plugin that most Firefox users have installed. When styling with the Osvaldas' AudioPlayer, the JavaScript interrogation would cause Firefox will prompt folks to install it in some cases if it's not there, and it still doesn't work if it is installed.

I ended up modifying Matt's detection a little to work with this Osvaldas' styling. I realize the code could be more dynamic with less elements, but this was easier for me to read.

  • First, try the audio tag. Works? Great, style it with audioPlayer();
  • Can't do MP3 audio? Dynamically make a Flash player with that P. Hide the audio player (likely not needed.)

Unfortunately for readability, there's the ".audioPlayer" jQuery plugin that styles the HTML and there's the "AudioPlayer" flash embed. They are different but named the same. I didn't change them. ;)

<audio id="audioplayer" preload="auto" controls style="width:100%;" >
<source src="your.mp3" type="audio/mp3">
Your browser doesn't support the HTML audio tag. You can still download the show, though!
</audio>
<p id="audioplayer_1"></p>
<script type="text/javascript">
var audioTag = document.createElement('audio');
/* Do we not support MP3 audio? If not, dynamically made a Flash SWF player. */
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
AudioPlayer.embed("audioplayer_1", {soundFile: "your.mp3", transparentpagebg: "yes"});
$( '#audioplayer').hide();
}
else /* Ok, we do support MP3 audio, style the audio tag into a touch-friendly player */
{
/* If we didn't do the "if mp3 supported" check above, this call would prompt Firefox install quicktime! */
$( '#audioplayer' ).audioPlayer();
}
</script>

All in all, it works pretty well so far.

ODD BUG: Chrome does seem to have some kind of hang where this audio player is getting blocked while the comments load on my site. Any JavaScript experts want to weight in? If you load a page - like this one - and hit play before the page is loaded, the audio doesn't play. This only happens in Chrome. Thoughts?

While you're here, check out the new http://hanselminutes.com and consider subscribing! It's "Fresh Air for Developers."

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Our first year. A new web conference - <anglebrackets>

March 8, '13 Comments [22] Posted in HTML5 | Programming | Speaking | Web Services
Sponsored By

anglebrackets conferenceThere's a new web conference happening in Vegas next month and you should join us. John Papa, myself and our friends pulled in the speakers from a combination of invitations and submitted talks. It's called anglebrackets.org and I hope to see you there.

My friends and I miss the old Mix conference and the great fun of web conferences in Vegas generally. So we talked to Richard Campbell and some friends and made our own show. (This is not a Microsoft show, to be clear)

This is the first year of anglebrackets and it's going to be a small conference and we have no money. Because of this, we are co-located with a larger conference* and attendees can move between the two conferences.

You'll be able to enjoy web-focused, back-end non-specific web sessions from amazing web people like:

  • Lea Verou - Developer Relations at the @W3C
  • Christian Heilmann - Mozilla
  • Jonathan Snook - SMACSS.com Author
  • Elijah Manor - jQuery expert
  • Jim Cowart - appendTo()
  • Denise Jacobs - Creativity Evangelist
  • Phil Haack - GitHub
  • Scott Hanselman (me) - Web guy
  • and more!

We've got killer sessions like:

  • The Vanilla Web Diet
  • Modern JavaScript Development
  • Hands On Responsive Design with Twitter Bootstrap
  • Rich Data HTML Apps with Breeze
  • Getting Started with Require.js
  • TML5 Canvas and Kinetic.js
  • Eventing and Messaging in JavaScript
  • plus talks on SignalR, ASP.NET, PHP, Backbone, CSS, JavaScript Patterns, Gamifying your work, and lots more.

AUqYiSFK3v_1_1303867939All this and a special keynote from Mozilla Web Guy Christian Heilmann!

This conference will be a great way for you to get up to date on the modern web but also check out some of the DevIntersection talks on ASP.NET, Architecture, Elastic Scale in the cloud and more.

We're lean and mean and independent and we hope you join our first year.

If you register for the show package or complete package you'll also get your choice of a Google Nexus 7 or a Microsoft Surface RT.

There's also some excellent pre- and post-conference workshops you should consider enrolling in:

  • April 8th
    • Day of Single Page Applications - John Papa, SPA and JavaScript expert
    • On the Metal: Essential HTML5, CSS3 and JavaScript for All Developers (Bring your laptop!) - Todd Anglin, Telerik
    • Hacking the Creative Brain: Work Better, Produce More - Denise Jacobs, a TEDx speaker, Creativity Evangelist, and author of CSS Detective
    • Nimble and fast web apps for the mobile web - Christian Heilmann, Mozilla
  • April 12th
    • Building Applications with ASP.NET MVC 4 - K. Scott Allen, Author, Trainer and Consultant
    • User Experience Design for Non-Designers: An Interactive, Immersive Workshop - Billy Hollis, UX and App expert

The Complete Package includes TWO workshops plus the tablet, and the Show Package includes one workshop and the tablet, or just come to the main conference itself.

See you there!

* Yes, we took a little artistic license with the <tag/>, or <tag />, or <tag> if you are super pedantic. It is valid syntax although HTML5's opinion is different than XHTML's. The fact that you even noticed and want to argue is proof you should come to this conference. See what I did there?

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

RELEASED - Download Internet Explorer 10 for Windows 7

February 26, '13 Comments [58] Posted in ASP.NET | HTML5 | Win7
Sponsored By

IE10 for Windows 7Just about a month ago the IEBlog published a post to allow business to manage the update schedule for Internet Explorer 10. It says "this approach lets organizations control when they are ready to deploy IE10 to their Windows 7 users." I took from this that IE10 on Windows 7 was imminent.

Today it's out. You can download IE10 for Windows 7 now. The details are over at the IE blog.

In the next few weeks and months Windows 7 machines will get automatically upgraded to IE10. For Web Developers like me, that means that between Windows 8 which already has IE10 and all these Windows 7 users who will now have IE10, that more people will have a modern browser than ever before.

IE10 was faster on my machine than IE9, and they say it is smarter about battery life. It also has IE10's upgraded JavaScript engine and includes spell check with auto-correct (finally!). Benchmarks are benchmarks but SunSpider implies about 40% faster than IE9, while PeaceKeeper looks like 25%. The V8 benchmark looks more like 100% faster. Point is, it's faster. How much faster? Depends on who you ask. Your mileage and machines will vary.

Once you've upgraded to IE10, go check out some of these sites. Be sure to view the source!

  • http://ie10bethethief.com - Robert Kirkman from Image Comics (You know him from The Walking Dead) also has a great comic I get each month on Comixology called Thief of Thieves.
    • This new site for Thief of Thieves not only has some great art (lots of SVG!) but also is a good example of using touch and the W3C Pointer Events standard. According to the IE blog, it also uses:
      • CSS3 animations for some of the larger scene transitions on the site
      • MSGesture API for handling more advanced pointer interactions like the safe cracking exercise
      • pageVisibility API to detect when an open page isn’t being actively used so we can control audio appropriately
      • setImmediate API to improve performance and power consumption on tablet devices. SetImmediate, like setInterval and setTimeout, is a timing API and requests the CPU to process the instruction as soon as it’s possible to.
  • Atari Arcade - Lots of classic Atari games, remade using HTML5 and Touch on the web.
  • Pulse - Very cool news aggregator done entirely in HTML5 with support for swipes and multi-finger gestures. Also works nice on mobile phones with responsive design.
  • Contre Jour - The 2011 iPad game of the year is now written in HTML5/JavaScript and CSS3. It works really well on touch systems like my Ultrabook. This originally came out in October but they've just added 20 new levels and it's free!

Developers

Enjoy!


Sponsor: Free eBook - 50 ASP. NET & SQL Server performance tips from the dev community, to help you avoid, find, and fix performance issues in your ASP.NET app. Download it from http://red-gate.com/50ways

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

If malware authors ever learn how to spell we're all screwed - the coming HTML5 malware apocalypse

June 29, '12 Comments [84] Posted in HTML5 | Musings
Sponsored By

Forgive the lousy screenshot and transparency in the title bar, but I just got this fake virus popup while searching for an image. I admit for a single moment my heart jumped.

A very scary fake virus popup

Then I thought after a few seconds as a techie (and note that all these observations just happened all at once in my head in no order):

  • The dialog is perfectly centered in the browser. I'm not sure why this was my #1 tipoff, but for me, it was the first thing I noticed.
  • This "popup" was as a result of a browser navigation. If it were legit I'd expect it to happen a little more asynchronously.
  • The word "migth" misspelling in the popup.
  • The fonts in the column headers are anti-aliased with one technique and the rest of the text doesn't  use ClearType while my machine does.
  • Poorly phrased English: "You need to clean your computer immediately to prevent the system crash."
  • There's no option other than "Clean computer." No ignore, repair, quarantine.
  • The word "computer" at the end of the first line goes too far to the right of the grid's right margin. It should have wrapped to the next line. Yes, I'm a UI nerd.
  • Their Aero theme color is GRAY and mine is BLUE.
  • Ctrl-Scroll ZOOMs the image. ;)
  • The URL is obvious nonsense.
  • Adware.Win32.Fraud? Seriously?

It's scary just to look at floating in your webpage there isn't it?

A scary fake virus popup

How is my Mom supposed to defend against this? Windows OR Mac (or tablets) the bad guys are out there, and one day they will finally learn English and put a little work and attention to detail into these things.

One day these things won't be "selectable" to prove to us that they are HTML:

I selected the virus to make it invert its colors to prove it's fake

As we enable HTML5 with local storage, geolocation, possibly native code and  and other features the bad guys will start doing the same with their malware. If you can write Doom in HTML5 there's nothing (except the skill and the will) to keep you from writing adware/scareware/malware in JavaScript. Not just the standard CSRF/XSS type JS - which is bad, I know, I used to be in banking - but sophisticated duplicates of trusted software accurately recreated entirely in HTML5/CSS3 and today's modern JS.

Google Offline Mail and extensions run in the background in my browser now, what's to say some future malware won't? Should we digitally sign HTML5 apps? Do more Extended Validation SSL Certificates? How do you defend against this?

What do you think, Dear Reader?

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Create a great mobile experience for your website today. Please.

April 23, '12 Comments [32] Posted in ASP.NET | HTML5 | Mobile
Sponsored By

People are fascinating with making mobile web sites. It's amazing that we're not impressed with the fact we carry tiny supercomputers in our pockets but we're amazed when a website looks decent on our phones.

There's a few directions you can go when going mobile for your site, and the key is finding balance. You can:

  • Do nothing. Your site will probably work on a mobile device but each day it will look worse and worse to a discerning public with increasing expectations.
  • Use Adaptive/Responsive Design. This is my favorite option. If your site is read-mostly (rather than a data-entry application) you can get a great experience on all devices by adaptively rendering your site based on screen-size. If you're focused on performance you can add a server-side component and resize image for mobile as well. Visit http://mediaqueri.es for inspiration.
  • Use a mobile framework. There's lots great frameworks like Sencha, Kendo, jQuery Mobile and others. These frameworks can get you near-native looking applications using HTML5 techniques.
  • Write a native app. For the time-being while it's cool to try to get native experiences using non-native tools, it's hard. The best native experience on a mobile device will remain a native-built application. This requires the most work with arguably the best experience. However, you CAN get 90-95% of the experience with less than 90% of the effort if you use some of these other techniques. Plus, you'll anger fewer users by not forcing them to download a crappy mobile app by just making a lovely mobile website.

image

If you take a moment and visit my site (this site) on your phone, or just resize the browser to a smaller size, you'll see that this blog is using a "responsive design" by designer Jeremy Kratz. The blog will change it's look based on if it's on a large monitor, an iPad or medium tablet, or a narrow phone. Watch the navigation bar turn into a drop down as the browser gets really narrow, for example.

My site's responsive design, as featured on the MediaQueri.es site

This was a relatively small - although thoughtful - change that instantly made my blog more accessible to the 8% of people who visit my site from a mobile device.

For larger data-focused sites, or sites that are "almost applications" you will want to consider a custom mobile version of your site. This is often done with the help of a mobile framework as mentioned above. I'll use jQuery Mobile as an example here. Let's say I have a conference browser application that looks like this on the desktop. I can navigate by date, speaker, tag, as well as view session details.

My site looks lousy on an iPhone

If I look at this same page on a mobile browser or something like the Electric Plum Mobile Simulator, it looks like crap.

Electric Mobile Simulator

I could use a mobile custom stylesheet just for phones, or I could use a CSS3 media query to make my existing stylesheet more mobile friendly...for example:

@media only screen and (max-width: 1024px) and (max-height: 768px)
{
/* do something, hide something, move something */
}

Or I could use a mobile framework along with a display mode in ASP.NET MVC to render a different view while still using the same controller logic. For example, I could have a _Layout.cshtml (that's like a "master page") and then a _Layout.Mobile.cshtml for mobile devices.

A Views folder with optional *.mobile.cshtml files for each mobile view

Mobile is just a included "display mode." You can create your own however you like. Here's one for Windows Phone. You could theoretically have ones like "tablet" or "nokia." I think you should have as few as you can get away with. Try to avoid complexity. This is just an example.

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("WP7") {
ContextCondition = ctx => ctx.GetOverriddenUserAgent().Contains("Windows Phone OS")
});

That "WP7" string is what you put in place of * in filename.*.cshtml. So that's _Layout.WP7.cshtml, or Index.WP7.cshtml, etc. For my example I'll just make a _Layout.Mobile.cshtml that will automatically be used when most mobile browsers like Mobile Safari, Blackberry or Windows Phone hit my new site.

Here is a new _Layout.Mobile.cshtml as a starting point for my conference browser mobile site. Remember that you can just File | New Project in Visual Studio with ASP.NET MVC 4 and select Mobile Site to get started on your own.

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.0.min.css")" />
<link rel="stylesheet" href="@Url.Content("~/Content/Site.Mobile.css")" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
// jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page), especially when going back, hence disabling it.
$.mobile.ajaxEnabled = false;
});
</script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.mobile-1.0.min.js")"></script>
</head>
<body>

<div data-role="page" data-theme="a">
@Html.Partial("_ViewSwitcher")

<div data-role="header">
<h1>@ViewBag.Title</h1>
</div>

<div data-role="content">
@RenderSection("featured", false)
@RenderBody()
</div>

</div>
</body>
</html>

Now that I have a custom _Layout.mobile.cshtml for mobile, THIS file will be used when I hit the site on a mobile device rather than the main _Layout.cshtml.

OK, here my application is using the mobile layout, but the existing session HTML which looks, again, like crap. I'm using a mobile layout with a desktop view.

Electric Mobile Simulator Sessions

The desktop view for a session uses a table (and that's OK you tableless-CSS people because it's a table of information):

<table>
<thead>
<tr><th>Title</th><th>Speaker(s)</th><th>Date</th><th>Room</th><th>Tags</th></tr>
</thead>
<tbody>
@foreach(var session in Model) {
<tr>
<td>@Html.ActionLink(session.Title, "Session", new { session.Code })</td>
<td>@Html.Partial("_SpeakersLinks", session)</td>
<td>@session.DateText</td>
<td>@session.Room</td>
<td>@Html.Partial("_TagsLinks", session)</td>
</tr>
}
</tbody>
</table>

But I need a cleaner mobile layout that respects a smaller screen size. I'll copy my SessionsTable.cshtml and make a SessionsTable.Mobile.cshtml with contents like this:

@using ConferenceSessionsBrowserMvc4.Models
@model IEnumerable<Session>

<h2>@ViewBag.Title</h2>

<ul data-role="listview">
@foreach(var session in Model) {
<li>
<a href="@Url.Action("Session", new { session.Code })">
<h3>@session.Title</h3>
<p><strong>@string.Join(", ", session.Speakers)</strong></p>
<p>@session.DateText</p>
</a>
</li>
}
</ul>

There are a few things to note in this HTML. First, I like that it's not littered with CSS that describes the look and feel of the site, but rather it uses the data- attributes from HTML5 to express the "role" of an element. The UL uses data-role="listview" that tells me it's a listview but doesn't dictate what it looks like.

Within the UL I've got some LIs that use standard semantic tags like A, H3, and P along with STRONG and along with the default theme it looks nice on mobile.

A nice mobile view using jQuery Mobile

ASIDE: See the the "Displaying mobile view" link at the top of the image there? With ASP.NET MVC 4 you can make a View Switcher easily with a partial View like this:

@if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
<div class="view-switcher ui-bar-a">
@if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
{
@: Displaying mobile view
@Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
}
else
{
@: Displaying desktop view
@Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
}
</div>
}

And a ViewSwitcherController to change the "overridden" browser when you click the link. This is all in the jQuery.Mobile.MVC NuGet package that we will update for the final release.

public class ViewSwitcherController : Controller
{
public RedirectResult SwitchView(bool mobile, string returnUrl) {
if (Request.Browser.IsMobileDevice == mobile)
HttpContext.ClearOverriddenBrowser();
else
HttpContext.SetOverriddenBrowser(mobile ? BrowserOverride.Mobile : BrowserOverride.Desktop);

return Redirect(returnUrl);
}
}
OK, back to the Dates view. I can apply the same data- jQuery Mobile techniques to other screens, like the list of dates. I've got a data-role="listview" and a data-role="list-divider" as the dates change.
@model IEnumerable<DateTime>

@{
ViewBag.Title = "All dates";
DateTime lastDay = default(DateTime);
}
<ul data-role="listview">
@foreach(var date in Model) {
if (date.Date != lastDay) {
lastDay = date.Date;
<li data-role="list-divider">@date.Date.ToString("ddd, MMM dd")</li>
}
<li>@Html.ActionLink(date.ToString("h:mm tt"), "SessionsByDate", new { date })</li>
}
</ul>

And get a nice result like this:

jQuery mobile applied to a ListView of dates

You can even get cool data filtering "as you type" features for jQuery Mobile list views by using data-filter="true" on a listview.

data-filter=true in jQuery Mobile

Because these templates are all mobile specific they don't affect the way the site looks on the desktop. Also because these are simply new views for existing URLs and Controllers, I don't need write any new business logic.

It is worth reminding you that it won't always be the case that an application will have its controllers and URLs map neatly such that one desktop view = one mobile view. Sometimes you may need to split up a complex single page desktop interaction into multiple mobile views. This conference application ended up with six views for desktop and six for mobile (Index, Dates, tags, Session(Detail), SessionsTable, and Speakers.) It's conceivable if the application included data entry that I would need to break up some views as well as create some custom methods just for mobile, although with some planning around User Experience you can usually keep this to a minimum.

If the default browser sniffing that decides what's mobile and what's not isn't enough for your project, consider using a 3rd party database of mobile devices like the one provided by 51degrees.mobi. Their 51degrees.mobi mobile framework will help your site adapt to support all mobile devices as they include a database of devices as well as their capabilities. They can even compress images and improve low-bandwidth performance.

They have a NuGet package I can install like this:

51degrees.mobile mobile framework for ASP.NET

51Degrees and libraries like it will add new capabilities to the Request.Browser object. These are just a few examples, there's dozens.

Screen Width: <% =Request.Browser.ScreenPixelsWidth %></li>
Screen Height: <% =Request.Browser.ScreenPixelsHeight %></li>
LayoutEngine: <% =Request.Browser["LayoutEngine"] %></li>
AnimationTiming: <% =Request.Browser["AnimationTiming"] %></li>
BlobBuilder: <% =Request.Browser["BlobBuilder"] %></li>
CssBackground: <% =Request.Browser["CssBackground"] %></li>
CssBorderImage: <% =Request.Browser["CssBorderImage"] %></li>
CssCanvas: <% =Request.Browser["CssCanvas"] %></li>
CssColor: <% =Request.Browser["CssColor"] %></li>
CssColumn: <% =Request.Browser["CssColumn"] %></li>
CssFlexbox: <% =Request.Browser["CssFlexbox"] %></li>
CssFont: <% =Request.Browser["CssFont"] %></li>
CssMediaQueries: <% =Request.Browser["CssMediaQueries"] %></li>

You can use this information on the server side to augment these other techniques. For example, if the requesting device supports CssMediaQueries, great, you should use them, but it not, perhaps you need to fall back to another technique. If you know the screen-size on the server and it's below a certain size you can resize the image before you send it.

Thanks to Jon Galloway, Damian Edwards and Erik Porter for their brainstorming and Steve Sanderson for the sample application.


Sponsor: I want to thank my friends at DevExpress for sponsoring this week's feed. Do take a moment and check out a free trial of CodeRush, one of my favorite products!  Introducing CodeRush by DevExpress. The Visual Studio add-in that helps you create more reliable applications. Tools to build & maintain your code without getting in the way of your IDE.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Page 1 of 4 in the HTML5 category Next Page

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.