Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

ASP.NET and Mobile

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[♪ Music ♪] [Microsoft] [] Hi, I'm Scott Hanselman, and I work in, Azure, and Web Tools, and I want to talk to you today about and mobile. Where does mobile fit? Where does it fit into this? Is there a mobile framework? Is there a specific thing that has to be done in to support a mobile site? Let's talk about that. You know that there are a billion mobile subscriptions out there. That means there is 1 mobile subscription for every 7 people on the planet, and for a lot of people mobile is becoming that primary way that they're on the Web. There are people who don't have computers. Instead, they do everything mobile, which means if you as a website developer don't have a great mobile experience then your users are going to hate you. They're going to think that your website sucks. A lot of countries now have a majority of people who are mobile only. Places like India and Egypt have 50% or even 70% of the population doing all of their web browsing on a mobile phone. So what can you do? Well, there are 3 things you can do. You can do nothing. You could do nothing. That is a strategy, and you could hope that mobile browsers get better. You could change the client side to adapt, which is what I recommend. You could use responsive or adaptive design techniques, and I'll show you what we're doing in to support that. Or you could target mobile directly. You could actually serve an entirely different site using a mobile framework like maybe jQuery mobile. I'll show you a little bit about that as well. Now, if you do nothing, here's my buddy Phil's website on a mobile device, and it looks okay. But immediately I'm going to want to tap in or zoom in on his content, so I could go and add a viewport, give a little bit of a hint there, one line of HTML, set up a meta tag, and that will allow his site to at least look like this. It can adjust itself width-wise, and the viewport, the amount of the website that I can see, has changed, so that's a really easy thing that you can do in the short term. But what you really want to do is think about responsive design. You want to use CSS3 media queries and say apply these rules if this is the width and that's the height or this is the size of the site. I'll give you an example of what that looks like. If I go into Visual Studio and go into a CSS, I could go and type in "media" and then hit tab, and it will automatically give you a snippet for a media query, and I could say if the width is a max of 1024, maybe I'm going to go and take the rightrail, and I'm going to say "display: none." Maybe don't show the navigation or move an image around or change my site in some way that it's going to look better at that different resolution, so for example, if we take a look at my blog, notice as I resize the browser, menus are changing, graphics get smaller. The site adapts. It looks great on a mobile device. It looks great on a big screen. That's all being done with adaptive techniques, with responsive design. Now, out of the box in we're now using what was formerly called Twitter Bootstrap, which is a CSS framework that sets you up for success. For example, you see these 3 columns down here at the bottom, Getting Started, Get More Libraries, and Web Hosting. As I resize, there is a break point. See that moment right there? There is one break point. There is another. Break points are when responsive design CSS rules pop in and change things. Notice, for example, the menu. This is about the size of a tablet. Then it pops. The menu disappears and goes here. But did the markup change? No, in fact, the markup hasn't changed at all. I could go into my master page here for this layout and change that menu. Here's our menu. We could change this menu here in this action link, and we'll say instead of home, we'll say "Scott." Go back over here and hit refresh, and see Scott appears in the menu here, and it's still here. I changed it in one place. That's because the CSS changes, but the markup does not change, so responsive design in all of your templates. Whether you're using Twitter Bootstrap or something else definitely I would encourage you to think about that. This will also allow you to talk to mobile simulators. This pull-down here, see it says Internet Explorer? I could pull that down, and I've plugged in a third party mobile simulator from a place called Electric Plum. They've got an iPhone, an iPad simulator. I could also potentially plug in a Windows phone simulator or an Opera Mini or a BlackBerry. In this case, I'm going to pick iPhone Simulator and then run that, and that's going to start that up, and now I've got my mobile site with menu inside of my simulator, and I could also look at that on a tablet or something else like this. I could even set this as multiple browsers. Let's actually switch over to another project, and I want to say IE and an iPhone and set those as the default together. Now when I run this, we're going to have my desktop responsive site here. I've got my iPhone over here, and notice that it's got a list of music. Very basic stuff, except the page that's being displayed is very different. We've got a mobile view, so this is a bit of a combination. On the desktop side, we still have responsive design. Notice how that menu changes right there. But we're serving a desktop master page. On the mobile side, we're serving a mobile master page. This is built in to You get this in both MVC and web forms. Notice here in the corner we're using a package called Friendly URLs, and it's automatically picking Site.Mobile.Master for the iPhone and Site.Master for the desktop. This means that I don't have to duplicate my work. Here's my view switcher. This is the bottom part that says mobile view: switch to desktop. And then that content, that main content that represents that list of albums right here comes out of main content. That came straight out of default. I could go and add something, look at it on both the iPhone and the desktop. It works in both places, but I get a very different experience. There is a combination technique where I could reuse part of the content but have a different master page. Or alternatively, I could go and make an entirely new project, and I'm going to select mobile instead. Rather than picking MVC, I'm going to say, "Give me a mobile site," and this is going to use jQuery mobile, which is a framework of JavaScript and CSS that is optimized for the mobile experience. I'm going to fire that up, and I'm going to load that into my Electric Plum mobile simulator. We build that and bring it up. And you'll see right off the bat I get a nice mobile experience with navigation. I've got my login page. Everything has been optimized for mobile. The takeaway here is that it depends. It depends. Are you trying to do a site that has responsive design? Or are you trying to make an app? There is really a difference between a website, which is largely read-only if you're doing a news site or a blog. Something like responsive design would be great. But if you're going to do something that's more complicated that leans towards a lot of controls, you want it to look like a native app, you want it to feel like it was custom designed for mobile, you might look at a technique like jQuery mobile or Sencha or one of those things. Regardless, inside of Visual Studio we've got your back. We've got support for all of the CSS media queries built in to the CSS editor. We've got the ability to run mobile simulators from Visual Studio. You can also take a look at the website at aspnet/mobile. We've got a number of partners that are there. You can actually check out 51 Degrees, which is a third-party open-source project that lets you bring in a database of mobile devices. And you can also take a look at some of the different browser simulators. For example, inside of Visual Studio if I go and pull this down and say "More Emulators," you can choose to download the Electric Plum simulator that I showed as well as BrowserStack, which is a really amazing hosted browser virtualization system, and this would allow you to go and test mobile browsers virtualized, so I could pull this down and say, "I want to see Android on a Samsung Galaxy" and go and test that. All of these features built into Visual Studio with extensible points with things like BrowserStack, which is a browser service that you can get 3 months free on. You can go up at and check that out. You can go to to get Opera Mini, Electric Plum, a Windows 8 emulator. Check those things out, and be sure to think about responsive design in everything that you do. There is a lot of really great mobile work happening in the world right now, and I hope you have fun playing with some of these tools as much as we had fun writing them. Thanks a lot. [Microsoft] []

Video Details

Duration: 11 minutes and 7 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Aug 9, 2013

Scott Hanselman explains how to create mobile websites with ASP.NET

Caption and Translate

    Sign In/Register for Dotsub to translate this video.