Scott Hanselman

I'm still using my iPhone 4s mostly but a Nokia Lumia 800 showed up in the mail last week. I'm looking forward to the Nokia Lumia 900 as well. Turns out that Nokia was giving away new Lumias to folks that had written Windows Phone 7 applications in the month of January as a part of their "WPNewYear" promotion. Since I wrote Lost Phone Screen - The customizable Windows Phone 7 lock-screen I qualified for a free phone. Now I've got a Samsung Focus and a Lumia 800. This isn't a review of the Lumia 800 (I'll do that later) but I will say initially that this is a nice piece of hardware. It's got heft, it's got a crazy bright screen, good glass, 8 meg camera, glass lens, it's fast. It feels right. Better than the Focus. The Lumia 800 can stand up against the iPhone for most users. It's only major lacking is a front facing camera.

The thing that keeps me from switching over to some other phone always comes down to apps. Apps apps apps. Everyone's got that app or apps that they just "can't live without." The general belief is that Windows Phone doesn't have the essential apps with the big name services.

I took some time and listed out all the apps and social services that I use on my iPhone and found them for my Windows Phone 7. This is the "I can't switch even think about switching phones without these apps" list.

While l realize the irony of being on the "mobile apps update treadmill" and would prefer a world without apps, this is the world we have today so here are the apps to navigate it.

Basics

Get these obvious apps first. Facebook, YouTube, Acrobat, XBox Live Extras, and Vimeo. Also NetFlix if you have it.

Foursquare

There is a standard first-party Foursquare app on Windows Phone, but the BEST app for Foursquare is called 4th & Mayor. It's a gorgeous and meticulously well-designed application that is arguably the best example of an excellent Windows Phone 7 app there is today. If you are writing an app and are wondering how to do something in the UX, just refer to 4th & Mayor. It also takes excellent advantage of the WP7's Live Tile concept. I've pinned a "Check In Now" tile to my home screen which makes Foursquare check-ins just two clicks.

Twitter and Facebook

Twitter and Facebook sharing and contact management is built into Windows Phone 7's People Hub. You connect accounts together (this happens automatically) so if your friend Bob is on Facebook, Gmail, Outlook, Twitter and LinkedIn, rather than opening separate apps. Rather than app-focused it's people-focused. I use this for Family and Co-workers. It's nice to just see a Person and what's up with them.

You can see in the screenshot at the right that one person is automatically associated with four services and all their updates are under What's New. Same with pictures, I see their Facebook, etc, all in one place.

For power Twitter use though, I use an app. There's an official Twitter app which is fine for regular folks. For the more hardcore tweeters, I recommend Rowi. There's a free ad-supported one and a paid-for version. It has notifications, toast, tile updates, photo uploader and more. I've used the 2.0 beta (coming soon) and the future is bright as Rowi is actively developed.

Weather

The Weather Channel app is excellent, includes an updating animated Live Tile, radar maps, forecast and all the usual stuff - and more - you'd want from a Weather app.

Movies

There are two great movie apps and I move between them, but Flixster is pinned to the home screen. Flixster's LIve Tile is a current movie's poster, which is a nice touch. It supports fast app switching on Mango, has all the showtimes, favorite theatres, but most importantly Rotten Tomatoes movie scores. Fandango is also nice if you want to buy tickets, and they now support Pinning your ticket confirmation for easy access when you get to the theater. Also grab the IMDb application so you can argue a bout who That Guy is in the movie.

TripIt Travel with My Trips

TripIt is the greatest thing to happen to travel since Expedia. I blogged about it in my 10 Guerilla Airline Travel Tips for the Geek-Minded Person and I still recommend it today. On Windows Phone 7, use My Trips for access to all your travel, ticket, gate and flight status info on the go.

News

I've just got room for a few good news apps in my life, so on Windows Phone I go with the same apps I have on my iPhone.

BBC News Mobile is an excellent 3rd part BBC news reader. Clean, fresh, looks good, supports Mango and has Live Tile support so I can get news headlines pushed to my home screen without launching the app. I also have NBC Nightly News because it includes the full show.

Engadget, well, is Engadget. It's tech news, gadgets and consumer electronics. Nice Live Tile with pictures pushed to it and fast, good-looking application.

I recommend AP Mobile with a caveat. It's a great looking app, one of the first with a Live Tile. It pushes a new daily photo to the tile, which is nice. It's got lots of great AP photography and has worked fine for months. However, in the last few weeks the photo quality has gone down the toilet. The photos are freakishly JPEGed and there's not a peep from AP about it. Something is clearly being proxied and double compressed ,  perhaps in an attempt to save bandwidth. I hope they fix it soon because it was/is a great app.

News Reader/RSS Reader/Google Reader

Pulse is a lovely aggregating reader that sits somewhere between regular RSS reader, magazine, and News App. Looks great on my Windows Phone as it did on my iPhone.

Wonder Reader synchronizes with my Google Reader account. It's got lots of cool features and uses of LiveTiles and allows you to pin feeds, categories, and favorite blogs. It's also got a nice collection of pre-loaded categories for jump starting. It's not Reeder for iPhone, but it is the best Google Reader client on Windows Phone. Even better, it has Instapaper support!

Instapaper

I am a heavy Instapaper user and recommend it highly. I've blogged about it in my Two Must-Have Tools for a More Readable Web. I pay Marco at Instapaper happily, and was thrilled when I found Stacks for Instapaper. If you are a hardcore Instapaper person, you'll agree that having Instapaper on your phone is required. This is a "first page app" for my iPhone and an "above the scroll" app for my Windows Phone.

Nerd Social

What is a phone without Reddit? Baconit is a Reddit app for Windows Phone. It supports Live Tile pinning of subreddits and a clean UI.

Perhaps you prefer Hacker News? That's available now too with the Hacker News Reader.

Music - Spotify and Vevo

Windows Phone 7 has deep integration with Zune and the Zune subscription music service (you pay $9 for all the music you can listen to...you're leasing music rather than buying) but I am a Spotify user. I've got Spotify on four other devices and my PC so I need it on my phone too. Finally, it's here. It plays music in the background and under the lock screen and it integrates with the existing Music Hub so it doesn't feel like a 3rd class citizen.

Vevo is like Hulu or YouTube for Music Videos. When I get tired of Spotify, sometimes I'll just let videos play with Vevo playlists. It also has a nice Live Tile. There is also Last.fm and IHeartRadio.

Photography - InstaCam and Pictures Lab

Pictures Lab is a nice effects and editing application (if not THE BEST editing app) for Windows Phone. All the functionality is there and cleanly integrated with the Photos Hub. Crop, Rotate, Effects, etc. It's a must-have if you are doing any photography on your phone.

Say what you will about using a supercomputersmartphonewith8megapixels to take crappy Polaroid pictures but I'm a big Instagram fan. It is a fun social network and I use InstaCam on Windows Phone to explore it. Unfortunately it doesn't appear that Instagram (the company) is interested in fostering a 3rd party client application ecosystem because their API is effectively crippled with no upload support. Seems odd. It's also odd that you can visit a photo of mine on Instagram, but can't follow me from there OR see my  other photos!

Also consider Flickr if you use that service.

Cloud Storage - Dropbox and SkyDrive

I'm a paying Dropbox user and a big fan. There's a few Dropbox clients on Windows Phone but I use BoxFiles for DropBox and so far it's worked just fine. I can pin Dropbox folders to the start screen and email links to files in my Dropbox.

I've got a few files on SkyDrive including some photos and OneNote files, so there's an official SkyDrive client as well. This app particularly shines when editing Word and Excel documents from the cloud on your phone.

Communication - Skype and GroupMe

Yes, Skype, baby. It's beta as of the time of this writng, so you can't search for it, you need to go get Skype for Windows Phone from this link or read their help page on Skype for Windows Phone. I'm less interested in the Video part, although that's cool, and more in the audio calls part. Whenever I'm overseas I always make Skype calls to my family from the hotel Wi-Fi. It's completely cut out international long-distance from my life, and I still get to talk on my same phone.

GroupMe might not seem obvious or essential at first, but my team uses it all the time. It's a grouped IM service, except it will use the app OR SMS to communicate with the group. That means you can put together a group of family members and start a chat without paying for SMS costs, and everyone can talk to everyone at the time time across platforms. I create GroupMe Rooms for conferences that I attend so my friends/co-workers can have a private backchannel. It's fantastically useful, especially if you want to include non-smartphone-using Dad or Mom on the social.

Amazon

Ya, they get their own category. I've got both the Amazon Mobile shopping app (a best-of-breed app on Windows Phone) and the Amazon Kindle app. Both apps are of exceedingly high quality. The Amazon Mobile app has UPC scanning as well as the ability to pin a scanning tile to you rhome screen so you can scan with one click.

The Kindle app is as you'd expect. It has a very nice theme but then turns into a clean reader when you are in the book with options for fonts and colors. Best part, it syncs you pages between all your Kindle devices.

As an honorary mention to the Amazon section, check out Craigslist Mobile. A very attractive and polished app (more than the CL website!) that lets you query and shop on Craigslist.

Also  useful because my wife uses it is Groupon. I was impressed they had a native app.

Must Have Utilities

There are a couple of Utilities I've discovered for Windows Phone that GREATLY enhance the experience.  They are almost so useful that they should be built into the OS. (That's when I know a utility is work my time...when it just belongs.)

Ok, I'll cheat, the first one is mine. It's http://lostphonescreen.com/ and it's a customized Lockscreen for Windows Phone. I always think it's silly to get a fancy phone with a GPS to track it when it's lost. Why not just put your phone number on the wallpaper?

ConnectivityShortcuts gives you Live Tile links to stuff like Airplane mode, Wi-Fi and Bluetooth. Absolutely essential.

Wiztiles Pro is a little hard to understand but if you use the phone for more than a day you'll immediately want what it has to offer. It's essentially a shortcut creation kit. For example, I added custom shortcuts to my browser with a custom downloaded theme icon, added a directly link to Share Status. You can customize anything you like, even break large pictures up into tiles. You can customize the phone's tiles in ways you didn't think possible. It's really amazing.

Food

If you want Recipes, it's all about BigOven and AllRecipes. I use both regularly.

Conclusion

If you've considered making an application of your own for the Windows Phone, here's a write-up on how I wrote my first app's first version in about 6 hours. I also have some podcasts you might be interested in:

• Monotouch and Mono for Android
• Your First PhoneGap application

Hope you enjoyed this list. I was pleasantly surprised how many apps that I already use were available. My wishes for the future are, 360Panorama from Occipital, Eye-Fi, Comixology (They already have a DC Comics viewer, so the hard work is done), Mint, and Hulu.

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.

About   Newsletter

Hosting By

A while back I picked up an HP TouchPad for $99 during the great "HP Tribulations of 2011." It was a fire sale and I was lucky enough to grab one on Amazon. I really like the HP WebOS and I enjoyed overclocking the TouchPad to get more performance out of it. For $99 it's an insane little piece of hardware. I wanted to see if taking over the hardware and putting Android's Ice Cream Sandwich would make the TouchPad even more useful. Plus, it's a hacker's dream, so why not.

The folks making Ice Create Sandwich work is the Cyanogen team. Here's the main link to their HP Touchpad page, although they do lots more.

Here's the process. This one assume you're starting from an HP TouchPad that has TouchOS on it or one that already has a built of Android on it but you don't mind messing it up.

• You'll need a Windows machine with Java. Ah, Java.
• Make a folder somewhere like "TouchPad" and start putting stuff into it, like:
• The Palm Novacom Drivers.
• Get ACMEInstaller 2
• Go read the thread on Android 4.0.3 ICS Cyanogen Mod 9 Alpha 2. You should trust their download links not mine. These are the ones I used for CM9A2. Go download:
• Alpha 2 CM9 for Touchpad
• Moboot - It's a boot manager that will let you dual boot
• Clockwork Recovery - It's something you boot into that lets you install zips like the Google Apps one below.
• You might also get the Google Apps (gApps) package for CyanogenMod 9 also.

When you have Java installed you can now double click on the UniversalNovacomInstaller.jar file.

Say yes and Download the Drivers, and wait.

When it is done, you'll be left at the Install button again. Just close the app.

The Novacom stuff is installed to C:\Program Files\Palm, Inc. You'll want to copy your ACMEInstaller2 file into that folder where novacom.exe is located. Also copy the gapps zip file into the root of the HP TouchPad's drive.

Plugin your HP TouchPad to you PC's USB while in Web OS. Select USB Drive mode. You should get a USB Symbol on your TouchPad. Open the new drive for your TouchPad in Windows Explorer and make a folder "cminstall". Copy moboot, clockwork, and the main CM update zip into that new folder.

From the Settings Menu in TouchOS select Settings | Device Info | Restart. When the screen goes black, hold down the Volume Up button until a USB Symbol appears again. This one will be white with no border.

Now, while your TouchPad is connected to your PC and showing the USB symbol, go back to your Windows machine and open a Command Prompt. Go to C:\Program Files\Palm, Inc type novacom.exe boot mem:// < ACMEInstaller2 like this:

C:\Program Files\Palm, Inc>novacom.exe boot mem:// < ACMEInstaller2

After you hit Enter a lot of text will appear on your TouchPad.  This it's working. When your TouchPad reboots into Ice Cream Sandwich, go through the setup.

If you want to install the extra Google Apps stuff, reboot. From the mooboot 0.3.5 menu you can launch ClockworkMod and install Google Apps from that zip file.

It's very very early, but it's pretty cool that it works this well at all. I'm looking forward to seeing if they can get it completely working and reasonably supported on the HP TouchPad. I think for browsing and goofing around HP Web OS is fine, but if you have a TouchPad and you are already invested in Google Apps and the Android Marketplace, you should be keeping an eye on this project.

I have already had dozens of crashes (it's an Alpha) so I wouldn't recommend making this your primary tablet. I also can't get my Google Apps (Gmail, etc) to synchronize as I'm using 2 factor auth and there's some subtle bug. I'm also unable to get Google Chrome for Android to work because it's version check doesn't seen this build of Ice Cream Sandwich as a legit version that's > 4.0. There is a fix for Chrome on the HP TouchPad if you really need it, though.

However, Browsing, Flash, many apps and Video works fairly well. Plus, I can always reboot back into HP Web OS so I can't really hurt the tablet.

If you're really hardcore, there are now CM9 Nighty Builds. You can follow the nightly builds on Twitter and read more on their thread and also in the unofficial thread in the forums. Have fun!

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.

About   Newsletter

Hosting By

ASP.NET MVC 4 Beta came out last week. It's got lots of new features as well as some surprises that move us closer to the "One ASP.NET" idea. I talked about this a little in this week's MSDN Flash email newsletter (you can subscribe to MSDN Flash here; it's reasonably high signal, low noise). Here's part of what I said:

Don't think of ASP.NET as an island. It's a citizen of the larger community. More and more of ASP.NET is open source, and we push hard every day to stay open and be open. We want to make ASP.NET more pluggable, more open, more fun. We've got big things planned - some that will surprise you. I hope you'll join the conversation and the community.

Here's some of the stuff that's been improved in MVC 4.

New Features in the Beta

• ASP.NET Web API
• Refreshed and modernized default project templates
• New mobile project template
• Many new features to support mobile apps
• Recipes to customize code generation
• Enhanced support for asynchronous methods
• Read the full feature list in the release notes

You may have heard me talking about LEGO in the past, and showing how you can fit things together better with NuGet. I've mentioned One ASP.NET in the context of the new features in Web Forms as well. Here's a diagram I've shown internally a few times. We'll keep adding more information about how these fit together and what you can build with them on http://asp.net/vnext.

In fact, in the interest of focusing on One ASP.NET, the "WCF Web API" is now ASP.NET Web API and it comes with ASP.NET MVC now. Even though it ships with MVC 4 Beta today, don't let that take away from the One ASP.NET vision. You can use Web API in ASP.NET Web Forms no problem. That's kind of the point. ;)

Why do you want a Web API?

If your app - your business's data model - has an API, then suddenly your Web API is opened up to native apps, iPhone apps, Windows 8 apps, whatever, apps. It's Web Services. Remember those?

I can use XML or JSON or something else with my API. JSON is nice for mobile apps with slow connections, for example. You can call an API from jQuery and better utilize the client's machine and browser. You can make a Gmail type single page, or a hybrid; it's up to you.

How it all fits into One ASP.NET

The idea behind One ASP.NET is that I want folks to be able to make apps that have real-time components with SignalR, clean, simple APIs with Web API, all in one pages with KnockoutJS, pages with MVC, Web Forms or Web Pages, as well as existing ASP.NET systems like OData, ASMX, and more. I want open source projects like JSON.NET, KnockoutJS, SignalR, Backbone, MongoDB, Scaffolding, NHIbernate, Ninject (and the list goes on) to all play in the same ASP.NET LEGO sandbox. We'll put all these subcomponents on NuGet and they'll live alongside community components and you'll be able to build ASP.NET applications starting from some base template and add just the pieces you want. We are getting there. I want folks to use the parts they want, and swap out the parts they don't. Everything should work together. I've always said I want to open source everything we can as fast as Microsoft can take it, and I'll keep pushing if it kills me my boss.

NotTwitter

Lemme make a NotTwitter app real quick. Here's a quick model:

public class NotATweet
{
    public int ID { get; set; }
    public string Username { get; set; }
    public string Text { get; set; }
    public DateTime Published { get; set; }
}

I'll use the default scaffolding to get the UI, but then I'll install the MvcScaffolding extra NuGet package and scaffold it using a Repository pattern.

PS>Scaffold -ModelType NotATweet -DbContext NotTwitterContext -Scaffolder Repository -Force 

Then I'll scaffold a controller that uses this Repo (you can do this from the UI or from the NuGet package console):

Scaffold -Controller NotATwitter -ModelType NotATweet -DbContext NotTwitterContext -Scaffolder MvcScaffolding.Controller -Repository

And here's the resulting Scaffolded UI.

The controller for my pages is standard fare. Now I'll add one via Add Controller to make an API for my NotTwitter application.

I'll change my route to make /api go to my app's API controller;

routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{id}",
    defaults: new { controller = "NotATwitterAPI", id = RouteParameter.Optional }
);

Here's my Web API controller code. A few things to notice. I'm talking to the same IRepository that the page controller uses. I'm returning HTTP Status Codes that are appropriate for each response. See how after the Create (where I POST a JSON representation of NotATweet) that I return HttpStatusCode.Created 201 and set the header's location to include the location of the new resource?

public class NotATwitterAPIController : ApiController
{
    private readonly INotATweetRepository notatweetRepository;

    public NotATwitterAPIController(INotATweetRepository notatweetRepository)
    {
        this.notatweetRepository = notatweetRepository;
    }

    // GET /api/notatwitterapi
    public IQueryable<NotATweet> Get()
    {
        return notatweetRepository.All;
    }

    // GET /api/notatwitterapi/5
    public NotATweet Get(int id)
    {
        var notatweet = notatweetRepository.Find(id);
        if (notatweet == null)
            throw new HttpResponseException(HttpStatusCode.NotFound);
        return notatweet;
    }

    // POST /api/notatwitterapi
    public HttpResponseMessage<NotATweet> Post(NotATweet value)
    {
        if (ModelState.IsValid)
        {
            notatweetRepository.InsertOrUpdate(value);
            notatweetRepository.Save();

            //Created!
            var response = new HttpResponseMessage<NotATweet>(value, HttpStatusCode.Created);

            //Let them know where the new NotATweet is
            string uri = Url.Route(null, new { id = value.ID });
            response.Headers.Location = new Uri(Request.RequestUri, uri);

            return response;

        }
        throw new HttpResponseException(HttpStatusCode.BadRequest);
    }

    // PUT /api/notatwitterapi/5
    public HttpResponseMessage Put(int id, NotATweet value)
    {
        if (ModelState.IsValid)
        {
            notatweetRepository.InsertOrUpdate(value);
            notatweetRepository.Save();
            return new HttpResponseMessage(HttpStatusCode.NoContent);
        }
        throw new HttpResponseException(HttpStatusCode.BadRequest);
    }

    // DELETE /api/notatwitterapi/5
    public void Delete(int id)
    {
        var notatweet = notatweetRepository.Find(id);
        if (notatweet == null)
            throw new HttpResponseException(HttpStatusCode.NotFound);

        notatweetRepository.Delete(id);
    }
}

Then I'll hit /api with Fiddler. Notice how JSON popped out the other end?

I'll change the accept header to Accept: application/xml and xml pops out. You can plug in your own and make Web API spit out iCal or whatever you like. You can make media formatters or even plug in others for the defaults. For example, here's a JSON.NET Formatter for Web API.

Now can we make NotTweets? You can use tools like the JSON Formatter to handcraft JSON for testing. Now I'll POST a Json serialized NotTweet:

Notice that the result is an HTTP 201 Created. If I then GET /api, I can see it's there:

I can also affect things with the URL and query strings like this GET /api?$orderby=Username HTTP/1.1 so I can so query composition without totally buying into OData-style URLs if I don't want to.

As I mentioned, I can use XML or JSON or something else with my API. JSON is good for mobile apps with slow connections, for example. You can call this API from jQuery and better utilize the client's machine and browser.

There's also the "calling" side of this, which is HttpClient. You can call out to other APIs like Twitter and authenticate using OAuth. Other people might call your API from the client side using jQuery and Javascript or from the server side using HttpClient.

Web API has many more possibilities than this example. Spend some time on Henrik's blog (he helped invent HTTP! Listen to him on his episode of the Hanselminutes Podcast)

We've got a new section up on the ASP.NET site http://asp.net/web-api with a lot of info. Here's some resources for easily adding an API to your app. You can even self-host your own Web API without IIS in a service or other application!

Related Links

• ASP.NET MVC 4 Beta for Visual Studio 2010:
  • ASP.NET MVC 4 Web Platform Installer for Visual Studio 2010
  • Download the standalone ASP.NET MVC 4 Beta installer executable
  • Jon Galloway on ASP.NET MVC 4 Beta
• Henrik's blog
  • Async Streaming in ASP.NET Web API
  • Using ASP.NET Web API with ASP.NET Web Forms (see how it all plugs in together!)
  • Using MongoDB with ASP.NET Web API (yes, Mongo)
• ASP.NET MVC 4 Developer Preview for Visual Studio 11 Developer Preview:
  • ASP.NET MVC 4 Developer Preview Web Platform Installer for Visual Studio 11 Developer Preview
  • Download the installer executable
• ASP.NET Web API and HttpClient Available on NuGet
  • NuGet Packages
    • Web API hosted in ASP.NET: AspNetWebApi
    • Self-hosted Web API: AspNetWebApi.Selfhost
    • HttpClient including XML and JSON formatters: System.Net.Http.Formatting
    • JsonValue for navigating and manipulating JSON: System.Json
• Videos: Getting Started with Web API
• Tutorial: Your First Web API
• Video: Your First Web API
• Building HTTP services with ASP.NET Web API in MVC 4 Beta
• Creating a Web API that Supports CRUD Operations

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.

About   Newsletter

Hosting By

DISCLAIMER: This is my opinion. I don't work for the Visual Studio Team. If you write an article about this and quote me as "The Principal Program Manager for Something Major" then you are a silly person.

The next version of Visual Studio is being worked on and the Beta is coming out soon that we'll all get to download. The Visual Studio design team put a post out today called "Introducing the New Developer Experience" and many of the comments are negative. Some folks are freaking out about the colors and the icons.

Because the first blog post from Visual Studio was on the new look and feel (and because everyone is Metro-styling everything) the public perception is that no work has been happening except the icons and colors have changed.

This is my blog, not hosted, run, organized or written by anyone but me. My post, my blog, my opinions. My initial reaction to the redesign was who moved my cheese? Why are we making everything gray? But I've been running this for a few weeks and I have some perspective even though I'm not on the Visual Studio team (I work on the web team).

There's basically three issues here as I see it.

• First, the new look of Visual Studio.
• Second, look side, what actual new features are in the new Visual Studio.
• Last, what this new look means to Windows applications and app design in general

The New Look

It's dramatic. It's initially gray. There is a light theme and a dark theme. Here's the VS11 next to VS10. It's still Visual Studio, so that's something, but the skin has changed.

The dark theme in Visual Studio 11 looks a lot like my current Text Editor of Choice (and the new hotness everyone is talking about) Sublime Text 2. Here are the two side by side. They are pretty similar. There's only so many ways you can make a minimal UI with a text editor, line numbers, a find dialog and a scrollbar. I actually blogged about simplifying your Visual Studio 2010 a while back. Just turn the toolbars off. You don't need them. In fact, the Web Team (the team I'm on) has a simplified Code View that we've had available since VS 2010.

See how Visual Studio looks very different below than it does above? It's customizable so you can get a number of weird looks. I also blogged about how to change your themes and make VS 2010 look like 2008 here. Also, did you know about http://studiostyl.es? It's a growing list of themes for Visual Studio. There's hundreds. I called some out in my Visual Studio Programmer Theme Gallery.

In VS10, today, you can switch your IDE to Web Development (Code Only) from Tools | Export Settings | Reset and you'll get this dialog.  That will hide all your tools windows, and extra stuff in the Visual Studio you already have. This feature has been there for years because folks asked for it. This is the same list that you are offered the very first time you launch Visual Studio. It's a nice way to "tidy up" Visual Studio today. Of course you can change the colors and generally mess about as you like.

Here's VS11 and VS10 next to each other. VS11 shows a preview of images if you hover over it.

Personally, I don't like the ALL CAPS much. I'm sure they have heard that feedback from a lot of people. That's just one man's opinion but I'm not too worried about it. I know the Visual Studio design team is collecting everyone's on their blog and I encourage you to comment there so they see it.

The colorful Visual Studio icons were changed to glyphs. Glyphs are apparently a designer term for icons that are not colorful. You can see a lot of glyphs at http://thenounproject.com and I used a lot in my recent Windows Phone 7 application. We're used to seeing glyphs in Windows already, like in the "tray" by the clock. (Yes I know it's not called The Tray.)

I'd like a little color in my icons, but I don't think they all need to be full color. Just include a splash so I can tell them apart. For example, here's my copy of Adobe Audition next to Photoshop, both from my same machine. Notice that there's some color in important buttons in Audition and very very minimal color in Photoshop, but mostly grays. There's still room for splashes of color in black and white glyph style icons. The idea is to make the icon get out of the way, but also be "scannable" so that I can remember not only where it is, but if it moves still scan and get to it quickly.

In Photoshop I'm editing color photos and in Audition I'm editing a colorful waveform. In both editors the UI is getting out of the way of the thing I'm editing. I like the idea of my editor being less important than the thing I'm editing.

New Features

There are a pile of non-UI/UX features in Visual Studio 11 that are broad and systemic changes that aren't just changing colors. I’m finding it easier to locate the commands and options I need due to the new search features and toolbar reductions I mentioned above.  I find myself exploring relationships in my code with the new Solution Explorer without having to switch tool windows like I use to. I also find that unlike in the past when the files I needed to focus on kept getting crowded out by lots of open stuff I didn’t need now I keep looking up at my open tabs and seeing only the stuff I care about. It's hard to express this without spending hours inside the IDE. There's bug fixes, speed fixes and memory fixes.

Non-theme-related work that the UX guys are doing cleans up the UI and improve it's functionality without removing features. When you consider only the more commonly used toolbars (Standard, Debug, Text Editor, Work Item Tracking, Test Tools), they've removed 60% of the clutter and globally there's 35% fewer commands in the toolbar in VS11, but all the features are still available. The stuff that has value is up front and easier to find and the obscure stuff I can search for with one hotkey. Don't let talk of icon colors (or lack of) detract from actual thought that's been put into a developer's (in my case, a web developer's) daily workflow.

My team (the angle brackets folks) has talked about the features and fixes in ASP.NET, IIS and related tech on videos and tutorials up on http://asp.net/vnext and will keep updating that mini-site. All the editors have been updated with features like goto definition in JavaScript, color pictures and vendor prefixes and piles more. All added features, but done in a clean way that gives you useful functionality without adding more windows and widgets.

You'll get your hands on the Beta very soon. It's not too late to get or give feedback. All the teams are listening and I'm making sure that your voice (and mine) are going to the right people. To dismiss all the CLR work, the BCL work, the speed and meory footprint work over some icons is premature. Does it work?

Is this Metro-style?

As far as the design, I think that there's a lot more interesting work going on in Windows application design now in everyone's applications. No, not everything is or has to be "Metro-style." It does need to be thoughtfully designed, though. We've seen that in phones and on desktops. We're starting to see applications with design at their heart.

I'm enjoying seeing what's coming next. There's a lot of interesting conversations around the web right now about what all design thought means for Windows, for Office, and for applications in general. Ars Technica has an interesting blurb that talks about an "elegant fusion of ribbon and Metro."

Is Visual Studio a metro-style application now? No. Is Zune or Sublime or iTunes or Photoshop? Of course not. I think the larger more interesting discussion is an increased use of whitespace, of design languages, of "content over chrome," of fewer lines, fewer wasted pixels and clearer spaces, of form meeting function. For now, Visual Studio is Beta, and it will look likely different when it's released. But it is being designed.

The Verge has some screenshots of some early builds of Office 15 and how it might look. I like our they to use color purposefully within the design. It's early to pass judgment on any of these applications, but I think I understand what all these designers are trying to accomplish. They don't (and I don't) want color and bling and flash in the outside application chrome if it doesn't provide information about my content. It's like what Tufte says, make those pixels work for you. Sure, one can blindly "Metro-style all things" but I would rather think of it as a applying design principles like clean lines, appropriate use of whitespace and focus on the the content (in this case, code). This beta is a step in that direction. I'm sure it will improve as feedback comes in.

VS and Me

There's style and there's functionality. So far I've been very happy with the functionality of VS11 and have been writing all my code in it. It opens VS2010 projects without converting and I can round-trip between VS11 and VS10SP1. I can create and target .NET 4.5 apps as well as.NET 2.0 apps. So far VS11 has been faster on my machines than VS10, and since I have more than one processor, I get multi-processor builds automatically.  The editor is fast and the builds are fast.

It's far too early to panic. Sure, my cheese has been moved, but I can always change the colors or toolbars. I just want a faster, cleaner, more productive system that focuses on the code.

My advice to you? Go follow the updates on the Visual Studio blog. Keep adding your comments, and check out their new Visual Studio posts each day including the one they just posted today about the Solution Explorer hub. But above all, download it on launch day, use it for a while and see what you think.

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.

About   Newsletter

Hosting By

I'm loving responsive design and am slowly updating all my websites to support mobile browsers as well as tablets. Currently Hanselman.com (this site), Hanselminutes.com (my weekly podcast), SpeakingHacks.com (a video I sell on how to be a better presenter) as well as LostPhoneScreen.com (where I sell my Windows Phone 7 application.)

All of this "mobilization" has stemmed from my frustration with other folks' sites that look lousy on my phone. It's SO frustrating to reach a site that could take 10 minutes and make its mobile experience 100% better.

Now that I've updated my main sites I'm tidying up a few things that continue to bug me. On my iPhone 4S with a DPI of 326 dpi, the logo on my site and a few other graphics look lousy. Why?

Well, for example, the image for the logo is a PNG that is literally 100px by 100px. This is a foreground image (not a CSS background image on an elements, yes, people still use those) and it has its height and width both set to 100px. The size of the image and the img tag are both really 100x100.

You can see that not only is the logo blurry but the search magnifying glass and social icons are as well. That's because the browser has scaled up the images to manage the super high-res display of this device. Better that they scale it up than make it too tiny. The overall size of all the other elements on the page are scaled up as well so the fonts and form elements like the dropdown are crystal clear.

There's a few ways to fix this.

Support (High DPI) Retina Display with CSS Background Images

Since I am already using CSS Media Queries to change my site's CSS for smaller screens like this already:

@media screen and (max-width:720px)
{

}

I can certainly do the same and detect high resolution displays. It's not just the iPhone. A lot of the newer Nokias and HTCs have displays over 200dpi.

I could create a media query like this:

@media screen and (min-device-pixel-ratio: 2) {

}

Or do conditional inclusion like this (or -webkit-min-device-pixel-ratio):

Do your testing and be aware you likely need to use both the webkit prefix and one without:

only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
}

You may decide that 1.5 is a better ratio for you.

The WebKit folks are thinking about this and I could use background-size like this:

div {
  background: url(logo-low.png);
  background: url(logo-high.png) 0px 0px / 100px 100px;
}

Handling Foreground Images (with the IMG tag)

Ideally I should be using SVG (Scalable Vector Graphics) for my images like the magnifying glass and they'll scale everywhere. Until that day (and until I'm willing to redo all my images), I can take advantage of the way the IMG tag has always worked. We know that nothing is sadder than a small image that has been scaled up by incorrect width= and height= tags.

Since my image is only 4k, I decided to make a high-res 200x200 image and mark the width and height attributes to 100px. Stated differently, I'm sending more pixels than needed and scaling them down. The result is that it looks clear on high res displays and the same as it did before on regular displays. Here is a screenshot with the retina Logo file.

It is true that I'm sending more data than I need to here. I am sending a 4kb image when the 100x100 original is 2kb. I can solve this by  swichign to a background image and using the conditional CSS options outlined above.

In this case it's a reasonable tradeoff and I'm happy with the result. It's a good solution for small images like this. For the social images I will likely want to sprite them and create both regular and "@2x.png" versions of the sprite.

Small, Medium, Large, FullSized

The problem isn't just with high-res images, it's also that we want to send the minimum number of bytes across the 3G wire while still offering the mobile user the chance to download the full sized images if they want.

I really wish that LowSrc still worked. I was talking to Jeremy Keith about this last week and he mentioned he just blogged the same thing! This was how we did things when we were all still on dialup. (And as Jeremy points out, we also often used ALL CAPS and omitted quotes! ;) )

It seems that LOWSRC just died, however. Ironically LOWSRC only works in OLD browsers. This is a shame as it was/is useful.

Mat at AListApart mentions another side of this idea using a fullsrc attribute, except with data- for HTML5 compliance with an idea from Scott Jehl.

It's unfortunate that there isn't a clear and comprehensive technique yet to handle both the low-res, fullsrc and highdpi solution. Today you can achieve them all with some CSS3 and some jQuery/JavaScript.

A correct image tag should take into consideration:

• Connection speed (detected as well as user-overridden)
• Screen DPI (pixel density)
• Responsive design image resizing

I think a solution clearly needs to be baked into HTML5 with a solution like the ones that Mat Marquis outlines. The question before us is do we update the IMG tag or are we talking about a new tag?

Related Links

• Hire and Pay a Designer and Be Happy
• Easy steps to a mobile-friendly responsive design with an embedded YouTube video and a fluid resize
• Skip Intro - CSS3 is the new Flash

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.

About   Newsletter

Hosting By