I put together the first template (besides the Muse example) that has a separate display for small screen devices and uploaded it today. Check it out Team Clueless Rally

I used a scooter rally for “Team Clueless” which is a bit of an inside joke related to the Scooter Cannonball held bi-annually where folks are  challenged to ride scooters coast to coast with vintage scoots being ride of choice by the organizers. Because of the handicap system new and particularly larger displacement scoots would have an extremely difficult time winning so an alternate no handicap, no winner alternative had been playfully suggested.

The result was “Team Clueless” so I thought I’d use that premise for the latest template. It was also inspired by the distances some folks travel to events like Amerivespa and other rallys whether they are a scooter, motorcycle or car rally.

By swapping out the images and text you can use this template for any event whether it is a one day or multi-day activity.

Web Fonts

@fontface with Google web fonts provides the display font for the masthead in order to allow for a fancier type without having to worry about what fonts are installed on the visitor’s system.

CSS 3

CSS 3 rounded corner and box shadows are used in various places which will give a bit more life the site in modern browsers while still displaying with square corners and no shadows in older browser.

A CSS class was used to make the images scalable on small screen.

Media queries serve an additional stylesheet to phones and other small screen devices. Higher resolution/larger screen tablets get the same experience as a desktop user. To accomplish this with the registration form a little extra trickery had to be in the head section of the page which is documented on the register.html page in the site itself.

Let us know what you think of this new template. Available for download from our Template page.

I Since you are reading thing I’m sure you must have realized that this site has undergone a major change. If you thought it was bright before well its even more so now.

It has needed some serious updating for a long time. The last major change was when we moved off of Community Server – same basic platform Microsoft is using for their MSDN forums (enough said?) to BlogEngine.NET. For our purposes Community Server was not only far more than we’d ever need it was also cumbersome to modify. Okay, if you are a Visual Studio devote who thinks that C# is the cat’s meow you probably feel different. Like most front-end folks I don’t want to have to fool with the backend of the site anymore than I have to. Okay, I could have created a traditional site but since I thought it might be nice to let people comment on posts (what was I thinking?) it seemed some sort of blog or CMS would be appropriate.

So I originally settled on Community Server for a couple of reasons. First, they had a “free” community edition and the generous folks at telligent offered an upgrade to Microsoft MVPs. So I took them up on it. Unfortunately, while Community Server is a very good enterprise level system I’m not an enterprise sort of person. It took the good folks at orcsweb to get it installed on their hosting service to get it up and running with all the correct permissions.  I kept using it for a couple of years through at least one upgraded version before deciding that Community Server was not only overkill for my needs but since this is a volunteer “in my spare time” sort of site I didn’t have the time to master the skills necessary to make it do what I wanted how I wanted it.

So since I was getting a special offer to Microsoft MVPs from orcsweb I went looking for another asp.net based solution. That’s where I found BlogEngine.NET.  A much, much simpler solution that used XML files instead of a full fledged MS-SQL database. Ah, something I could work with to customize in Expression Web. A much better fit for me than an application that required Visual Studio to successfully modify. The folks at orcsweb helped with database back-up so I could extract content already published through Community Server.  That was sometime in 2008. The site hadn’t a redesign since. Sure I had downloaded and worked locally with newer versions of BlogEngine.NET but somehow I never got around to migrating site content to a newer version.

Over the years some of the links had moved and video tutorials were hosted elsewhere due to bandwidth constraints. Which caused some issues with content being “lost” and links broken. Still, a bandaid was put on and “updating” this site was still on the back burner. When considering New Year’s Resolutions I decided to move a new site design to the front of the list. Not just because it was well past time to do so but also because I had resigned as a Microsoft MVP and as a result knew I should move off OrcsWeb.  Something I would have preferred not to do since they are without doubt the best web host I’ve ever used in the 20 years I’ve been creating websites. However, with Microsoft announcing end of life for Expression Web and my no longer being an MVP it seemed to be the best thing to do.

That brought on a whole new round of what should I use for Expression Web. I thought about migrating over to WordPress since that is the platform I use most often. I even exported this site’s content and imported it into a more or less generic default WordPress site. Then out of curiosity I took at look to see where BlogEngine.NET was in its development. After all one of its big attractions initially was how easy it was to work with. Guess what? It’s still easy to work with and  while I’ll probably find some bugs I figured I’d give it a go for a bit. If it doesn’t work out I can always move over to WordPress.

I want to reiterate my thanks to the folks at orcsweb for the help and support they  have provided over the last 7-8 years. I cannot recommend them highly enough. If you need a web host with superb support, one that needs the ability to scale, or your website is mission critical you cannot ask for a better company to do business with.

I’m in the process of creating a new set of tutorials for Expression Web 4 because now that it has become a free program from Microsoft there is an influx of people who have never migrated from FrontPage (discontinued as of version FrontPage 2003)  as well as other people who are using a professional web editor.

While there will be a video on building this website:

I start a new tutorial series by creating scripts for each video. Since it may take some time to get them all recorded and edited I will be creating text based tutorials using each script and screenshots. This series will start with configuring Expression Web and creating a local site. The first 3-4 should be posted within the next day or two since they are almost ready to go.

Some folks are attributing Microsoft’s decision to drop Expression Web in favor of “apps” created using Visual Studio and some future “design” integration  is based upon statistics like these: http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201111-201211 While I agree that in the future many folks will use tablets and other devices for much of the web browsing they currently do on a desktop thinking that traditional websites will no longer be of value is wrong. Think about how many people you see using laptops at places like Starbucks, on airplanes and other “mobile” locations? The folks you see with the high end laptop/ultrabook are likely to be the same people who have a tablet or two (different platforms) and they do not want crippled sites just because they are using a tablet instead of their laptop. However, they do appreciate some of the things associated with “mobile” sites – lower bandwidth and faster loading. Create your website for ease of use and speed will make all of your users happy.

Mobile and tablet doesn't necessarily mean the visitor is using a phone or "app". I've seen a backlash against serving "mobile" sites and pushing apps from tablet users. Just to give you a few links in response:

http://googlewebmastercentral.blogspot.com/2012/11/giving-tablet-users-full-sized-web.html

When considering your site’s visitors using tablets, it’s important to think about both the devices and what users expect. Compared to smartphones, tablets have larger touch screens and are typically used on Wi-Fi connections. Tablets offer a browsing experience that can be as rich as any desktop or laptop machine, in a more mobile, lightweight, and generally more convenient package. This means that, unless you offer tablet-optimized content, users expect to see your desktop site rather than your site’s smartphone site.

 

If apps and mobile sites were the way to go you wouldn't see articles like http://howto.cnet.com/8301-11310_39-57435951-285/how-to-view-desktop-versions-of-web-sites-on-firefox-for-android/

Linked In User Experience Group post:

Give tablet users your desktop site! Not your mobile site!

Give tablet users your desktop site! Not your mobile site! Bruce Clay's SEO newsletter this week has a great little piece in it that corresponds with a burning issue I've been having since buying a 10-inch Android tablet. More than 50% of the websites I visit using my tablet redirect me to a mobile site, or want me to download their mobile app. I HATE IT! Do you get it? Should I say it louder? I H A T E I T ! ! ! And I think most tablet users would agree. You see a 10-inch tablet can happily display most desktop-oriented websites comfortably, especially if they are using responsive design. It is irritating to open a website designed for 1600 pixel screens, but they don't usually have mobile sites anyway. What is much more irritating is to keep getting forced back into the mobile rendering, even when I request the desktop version. Are you guilty of this? Do you think specifically about tablet-based users of your websites? How do you present your site to them? Banking sites are probably the worst offenders, followed closely by airlines and flight booking sites, eBay (which is rendered absolutely useless on my tablet), major newspaper websites, but it's a very, very long list. You don't want to get me started on this. So come on all you UX designers out there, tell me why you're not thinking about tablet users when the European Travel Commission has identified that there are already 11.5 million tablet users in the US alone, predicted to rise to 90.8 million by 2015.

Bruce Clay's SEO newsletter this week has a great little piece in it that corresponds with a burning issue I've been having since buying a 10-inch Android tablet. More than 50% of the websites I visit using my tablet redirect me to a mobile site, or want me to download their mobile app. I HATE IT! Do you get it? Should I say it louder? I H A T E I T ! ! ! And I think most tablet users would agree.

You see a 10-inch tablet can happily display most desktop-oriented websites comfortably, especially if they are using responsive design. It is irritating to open a website designed for 1600 pixel screens, but they don't usually have mobile sites anyway. What is much more irritating is to keep getting forced back into the mobile rendering, even when I request the desktop version.

Are you guilty of this? Do you think specifically about tablet-based users of your websites? How do you present your site to them?

Banking sites are probably the worst offenders, followed closely by airlines and flight booking sites, eBay (which is rendered absolutely useless on my tablet), major newspaper websites, but it's a very, very long list. You don't want to get me started on this.

So come on all you UX designers out there, tell me why you're not thinking about tablet users when the European Travel Commission has identified that there are already 11.5 million tablet users in the US alone, predicted to rise to 90.8 million by 2015.

This is why I think Microsoft has made a big mistake. The future of the web is not device specific apps nor is it a low quality site. That's the whole premise behind responsive design

3 Ways to Approach Website Optimization for Tablet Visitors3

While some marketers may feel that they can implement the same strategies on both smartphones and tablets to increase conversion, the evidence suggests that this is the wrong approach.

It's important to understand that mobile phones and tablets are two separate channels. While it's easy to group them together, the tablet needs to be looked at as its own channel that deserves an individual and unique user experience.

These are but a fraction of the backlash I'm seeing against sending mobile sites to tablets whether they are running iOS, Android or Win 8 RT. Frankly, what makes a good tablet website is also what makes a good usable website in any modern browser. Nothing frustrates me more than getting a stripped down narrow mobile site when I'm on my iPad or having an app pushed down my throat. I've been to more than one site that before it will even load I have to decline their "app" and sometimes more than once with an "are you really sure you don't want app" before I get to the actual website. Even then I've had it send me to mobile versions at which point I usually find some other place to do what I was trying to do on that website.

Personally, I don't like having a different usually far more limited experience because I've been forced into using an app. Let me give you an example using Netflix. There is only one way I can manage everything on my Netflix account and that is by using a full featured web browser. We have a bunch of different devices all of which can be used with Netflix. Some of them only let me play what is already in my on demand queue such as the wii game console device. Others will let me search or let me browser, occasinally both - Roku and Samsung DVD player with Netflix app. iOS lets me play and search but none of the apps mentioned let me manage my account. For that I have to use a real web browser. Okay, I can use Safari on my iPad but then I can't watch the videos there because of Apple's limitation of Flash and Silverlight used by Netflix for DRM but at least by using a combination of the website and app I can get all the features of Netflix on my iPad. I haven't really explored the Win 8 Netflix app nor have I used the xBox app on my son's xBox but I suspect it will be closer to the feature limited versions of the other "devices" vs the experience on my Mac or PC.

Apps are better for some things than a website. You want to have your Office tools installed whether in an app or a program. Additional security protocols like banks need I have no problem using an app with (unlike the gentleman quoted above) but I don't want specific apps for every danged website I visit. Think about it if you needed an app for every site you have visited in the last week. How would you ever keep track of them? I've already installed a start menu replacement on my Win 8 Pro machines because I can't deal with the over 100 icons that my full set of installed programs adds to the "start screen" since every bit of every program gets its own tile

I don't hate or despise Visual Studio, ASP.NET, IIS, Azure or any of the other products no matter what my comments in yesterday’s post may seem to imply. Nor do I think they suck. I think that Visual Studio is an excellent IDE for DEVELOPERS. You can create very good applications that do extremely complex tasks well with ASP.NET and Visual Studio but that isn't my space. Sure I can write real code but frankly, I've never enjoyed doing so not even back when I had my very first programming class in Basic back in 1974-5. Classic ASP did everything I needed and was easy to use. PHP fulfills that function for me now but I'm digressing.

There are a few developers who can produce a useable functional website with good user experience but they are few and far between just like there are some designers who can create elegant clean server side code. They are the exceptions. I know enough code not to screw up what a developer does and even rewrite some of it so that it better suits the ux/usability/accessibility needs. That actually makes me more skilled than most who work on design. I'm a member of a private community, invitation only of professional web designers/front-end developers. Less than 10-15% can or want to do more than integrate a form or address output from server side processing. That is pretty typical of the small design businesses demographics from what I've seen.

I had really high hopes that Microsoft had "got it" with the Expression toolset but even Microsoft’s choice of words confirms that I was wrong. There is a real need for web tools that are not "web development" in the sense that Microsoft has used it. The words are design, UX - User eXperience, UI - User Interface and even IA - Information Architecture. Those are what make people comfortable and able to effectively find/use the information in websites and web applications. I got into this field because back in the 90s I was a member of a group of women who all had babies about the same time. Prodigy Internet had a "beta" internet web program going on that included subscriber websites. I took all the stuff that had been circulating between our group in a envelope mailed from person to person with the latest baby pictures and scanned the photos. Then I created a site and published it to the beta hosting. Over the years I used several different programs to maintain it including AOLPress, which was the only decent piece of software that came from AOL.

I was creating sites for others by 1998 and commercially shortly thereafter using Dreamweaver. My introduction to FrontPage came because a client used it and wanted me to remake their site with it so they could maintain it. FrontPage wasn't ever as bad as many made it out to be but it was never as good as it should have been. Given its target market of information workers it was a decent enough product but always require care in using it if you were concerned about not Microsoft browsers.

Visual Interdev was a joke, Visual Studio is its successor and much better but it is still  a developer’s tool.

I joined HAL-PC when I found out they were starting a "Web Technolgies SIG" somewhere around 1999. The SIG leader had over 200 people show up for the first meeting. He started it because he wanted to learn more about creating database driven websites. He was an Access developer and was using Visual Interdev. Now Visual Interdev created truly horrible code with no usability at all using as it did the the worst bits of FrontPage “no need to know” anything about what you are tying to do canned themes and up/down, next/back navigation. The one thing he did do right was have a speaker at each session on CSS but he didn't use it himself. He relied 100% on the themes and navigation available in Visual Interdev. It was so bad I ended up creating a parallel site with a UI that would let visitors find the very useful code examples and FAQs the leader created as well as tutorials and articles contributed by various presenters. Eventually, I ended up taking over the site and as leader when he lost interest in writing code for the web.

Over the years I've tried, really tried to use Visual Studio but it doesn't make sense for what I do. It has a steep learning curve for someone who isn't a serious back-end developer. Its complexity and methodology is a good thing for programmers. It is not a good thing for whatever it is you want to call people who are design oriented. Drop a programmer into Photoshop or even Fireworks and tell them to use curves to correct white balance, use Bezier curves and do a comp with 256 layers then output with cmyk separation for the prepress and rgb optimized for the web or to css3 gradients and they will feel just as lost as your front-end designer/developer when they open Visual Studio.

EW was a breath of fresh air. Something that did a better job in many respects than any other available program. No longer did I need to use TopStyle for my CSS, Dreamweaver my HTML but there was one tool that I could use from start to finish.

When I criticize Visual Studio and/or any other of Microsoft's development tools it isn't because I think they are bad. They aren't, and some of them are extremely good but they are not design tools and never will be.