This tutorial was created to show how easy it is to use buttons without using the deprecated FP Hover buttons. You can continue to use the button styles you are currently using but reduce your page code and speed up load time by replacing them with simple css and 3 buttons reused for each menu link. View the finished menu.

First create a hover button using the spacebar for the maximum number of letters you expect to use for your link text.

The person I created this tutorial for used the "glass" style button in blue so I'm also using it.  I generated three states for the button which look like:

Then I created an unordered list of links since lists are the proper mark-up for most menus. By default the menu now looks like:

• Home
• Link 1
• Link 2
• Link 3
• Longer Link

To set these links apart as a menu the first thing I will do is to assign the list in an ID of menu. This allows me to target only those links in the menu for the new link styles.

#menu {
width: 7em;
margin: 0 auto; }

First thing I will do is create a #menu div to center the new menu in the #sidebar and provide a way to target just those links in the menu using descendent selectors and inheritance.

T to remove the list-style-item and remove all default margin and padding applying the following css:

#menu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

Which leaves me with a clean list that looks like:

Next we create the default link style setting the background image to the link state image created above. Before I do that there is a choice I have to make. The traditional one which is to set the sizes for the image in pixels and text also in pixels so that they will match what the old hover buttons did however that will make it impossible to scale the text very well.

The alternative is to scale in ems which means we need to convert the pixel size of the image to ems. To do that you divide the width by 16px. That means that our 100px images above are 6.5em but since that was rounded of a bit I increased the width slightly to 6.75em and centered the image. I also set the line height to 1.25em (20px in the image) so that the text would be vertically aligned properly.  It also means that the image quality will degrade if they are scaled up too high but the text will remain sharp. I'm going for the second approach.

So now my menu link css is:

#menu a {
text-align: center;
line-height: 1.25em;
font-size: .9em;
width: 6.75em;
display: block;
color: #000080;
text-decoration: none;
margin-bottom: .75em;
background: url('images/over.jpg') center no-repeat;
}

Which looks like:

To get our rollover state we need to define the hover pseudo class for the menu which would be:

#menu a:hover {
background-image: url('images/over.jpg');
}

That's all it takes since we are not changing the link text or color. If you wanted to change the text color to say black on rollover you would simply add "color: #000;" to the style definition.

The final step is to create an active class that you would apply to the link for the current page. In this case I'm going to use black as the text color and the active image created earlier. So my active class would look like this:

.active {
background-image: url('images/active.jpg');
color: #000000;
}

To demonstrate its use I have added the "active" class to the link for this page to the menu in the left column. You will notice that it has black text and a darker button.

You now have the look of the buttons without the overhead of multiple states for each link and no JavaScript is required.

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