Farewell Expression Web–Microsoft You Lost Me

by cdwise 21. December 2012 10:30

Today Microsoft announced that it was making Expression Web and Expression Design “free” and the “free” versions would be without support. As for those who have purchased Expression Web in the past it is on “support lifecycle” which means the programs will no longer be developed. There is an implication that features from Expression Web will eventually appear in Visual Studio but what or when is unknown. Microsoft is no longer going to have a presence in the web design world. Web application development, perhaps but that isn’t the same thing. For 20 years I’ve been creating websites. I’ve used Microsoft web tools for more than a dozen years but I’m a front-end not .NET developer so I will not move to Visual Studio, you’ve lost me and those who create websites not “applications”.

I just finished reading Morton’s commentary on today’s announcement. His blog post reflects many of my own thoughts. Like Morton I’ve been involved with Expression Web since the first beta of Expression Web 1. I’ve written books and tutorials on it over the years and been involved in conferences and user group presentations. I’d like to say RIP but frankly, I’m too disappointed with Microsoft to do so.

Many of you know that from 2002 to 2010 I was a recipient of the Microsoft MVP (Most Valuable Professional) award. What you may not have known is that I asked Microsoft not to consider me for an award in 2011. I did so for a couple of reasons. One was I didn’t like the closed culture that was developing at Microsoft. Microsoft seemed to be changing course, moving towards the same sort of closed eco structure of the Apple/iOS model. I believe that is a mistake. Microsoft’s strength has always been how open its platform has been reaching out to those who want to build upon it.

DEVELOPER, DEVELOPER, DEVELOPER – NOT!!!

Has long been the trademark of Steve Ballmer, with the release of the Expression Studio products it seemed like Microsoft was embracing all developers not just the Windows desktop developer or the .NET developer but all, including the front-end developers.

In 2005-2006 UX/UI was a new watchword at Microsoft.  Microsoft had seen the light and realized that no matter how good your code was if people couldn’t use it because it was poorly designed and not discoverable you could not succeed. Microsoft realized that sitting on its arse after it won the browser war with Netscape had seen the rise of stronger competitors as the internet matured. So Microsoft was playing catch-up again and doing what it needed to do to become relevant in the modern era of the web with support for web standards. I thought “maybe Microsoft is ‘getting it’ when it comes to design and web standards after having lost their way for a few years.

Then I saw the beta of Expression Web and went “aahh, they are”, finally a product that as a professional I can use for as a daily production tool. At the time of its release Expression Web had the best CSS tools available. Its ease of use and ability to help people transition from the old style table based layouts with html attributes for presentation made it a joy to use. Here was a program that not only supported .NET but also PHP. Okay, its support for neither was enough for a primarily back-end server side coder but it was enough for someone who was primarily a front-end designer/developer. Over the next three versions Expression Web only got stronger and stronger as a professional tool. Something that amazed people who had always castigated Microsoft for failure to support web standards when I’d show it at conferences, user groups and other speaking engagements. I could take a FrontPage or other WYSIWYG user and have them creating a web standards separation of content from presentation website in a few hours instead of an impossible to maintain mess of hard coded html attributes and deprecated elements. What an important step forward when even a non-pro could turn out quality websites.

By the time Expression Web 4 came out with its new extensibility model it was to quote Morton, “a shining light of what Microsoft could be – an open application focused on real life work regardless of platform or product affinity”.

Today’s announcement signaled the end of any hope of commitment to front-end website designers/developers. The announcement says:

The proliferation of rich interactive web applications across the cloud and mobile devices continues to create new opportunities for creative design and development. As these technologies evolve, Microsoft is committed to providing best-in-class tools for building modern applications. In support of these industry trends Microsoft is consolidating our lead design and development offerings — Expression and Visual Studio — to offer all of our customers a unified solution that brings together the best of Web and modern development patterns.

Not every website is or should be a “rich interactive web application”. Many websites provide information and is not an “application” much less “rich interactive”. With the cost of cellular bandwidth I don’t want high bandwidth applications or websites when all I want to do is check location/address, a telephone number, or do a quick fact check during a conversation or other task.

Sorry Microsoft but you are missing a large segment of the web that is information/brochure oriented. You are also missing that simple is often better than than complex. Your forums are an example of overly complex bloated sites that fail miserably when it comes to usability and function. This isn’t the first time I’ve mentioned problems with your Expression forums, Answer forum, TechNet and MSDN forums. When I visit those forums there is a significant bandwidth hit and they frankly don’t work very well. Simpler forum applications like those used by Modern Vespa or our own ExpressionWebForums.com download quickly, respond to clicks quickly and work across a variety of browsers and platforms without random “unexpected errors”. As a result I don’t visit Microsoft forums when I’m using cellular data or when I’m on devices instead of real computers and no, I don’t want nor will I use an “app” to access forums.

APPS ARE OVER-RATED

Unlike Microsoft I don’t see “the web” as “dead” and that the future is in device/platform specific “apps”. I’ve heard people from Microsoft say that today’s web has reverted to the “old days” of competing standards and incompatible browsers as a reason for abandoning Expression Web and focusing solely on Visual Studio.

Funny, that isn’t my experience.

While it is true that not all browser support every HTML 5 or CSS 3 proposed specification I can write code once and have it work well on Internet Explorer 8+, Firefox, Safari, Opera, Chrome and various device browsers. Visitors might not get the exact same experience but they will all have a usable experience on an attractive functional site. Even those using antique by web terms browsers like Internet Explorer 6 will have a usable functional site without having to load device specific applications. There will certainly be less differences between modern browsers than if using device specific apps.

Like many others I don’t want apps for something that a website does well. Apps give you only what the app developer thinks important from the website. That usually means less features than on the actual website.

Netflix is a good example of this. Devices we watch Netflix on include: iPad, Android based tablet, Win 8 RT app, WII game console, xBox console, Roku, Samsung Blue Ray DVD player. Not one of the device apps gives us access to all the features available at netflix.com. The ability to select and managing our DVD queue and account are available only on  computers using a web browser not an app. Frankly, this sort of fragmentation is one of the reasons that I find myself disliking the app approach more and more.

I’m not the only one, over the last 18 months I’ve been seeing and hearing a backlash against apps from people having individual apps pushed on them when they visit websites. Heck, I even hear mutterings at Starbucks from people going “no I don’t want your damned app, just let me see the website” as they stab with their finger at a “no thanks” button on the modal window announcing the “app version”, and “are you really sure you don’t want our app” in response to their first stab trying to close the modal window.

Who really wants to have an app for every website they’ve chosen to visit? True there are some things that an app will always be a better choice such as GPS navigation or many games but for many things a website is simply a better approach AND is platform agnostic. Do you really want an app for every website you’ve visited in the last week? I sure as hell don’t.

Goodbye Cross-Browser Testing with SuperPreview

Yep, that’s another blow to cross browser site development. Effective June 2013 SuperPreview will go away so there will be no cloud service for previewing your site in different versions of Internet Explorer or other platforms like Safari on Macs. Thank goodness for Adobe, pity they will no longer have competition to spur them on to even better tools.

Tags:

Expression Web

On Fonts and High Resolution Displays

by cdwise 16. December 2012 21:33

I was looking at a site someone posted asking for display assistance this morning. While the issue they were having wasn't related to fonts I noticed a few things that I felt needed to be addressed when it came to their use of fonts. As I was writing my reply it occured to me that the font issue that I saw was a fairly common one, especially with people who have been creating sites for some time and do so primarily as a hobby. They have used a program they are comfortable with and may or may not have upgraded to newer versions over the years but have kept the same basic method designing their sites.

Back around 2000 or so many well respected designers were recommending that designers use pixels because of how different browsers rendered fonts at keyword and number sizing and the issue of computers not always having the same PPI settings. Back in the "old" days Macs were 72ppi and resolution was dependent on physical screen size. That was so you could hold a printer's ruler up and measure the type on the screen for printing. Windows computers were 96ppi and resolution was independent from screen size so you could have a 15" monitor that was either 800x600 or 1024x768. So in order to get a consistent look and feel people would either resort to pixels or would use a math forumula to set the base font size to a number that resulted in the the same display size then scale text based on that (.67% base font then body text would be something like 115% to make it the equivilent of 10pt type for example.) Since it was simplier folks who aimed for that "pixel perfect" cross browser/OS site would simply use pixels.

These habits were formed when most computers had a screen resolution of 1024 on a 15" monitor or 1280 on a 17" monitor. In the last few years and particularly in the last 18 months there has been a major change in screen resolution comparable to the change when people moved from CRT screen to LED screens and laptops became affordable. The last 4 years or so we've seen the proliferation of small portable devices like the iPad, various Android based tablets and now Windows RT not to mention cellphones for web browsing. All of these have as high or higher screen resolutions than the traditional desktop or even laptop computer.

The new Sony Duo I just picked up has a pixel density is 209 to the physical inch. A 15" MacBook Pro with Retina display is 220ppi. Heck, even a computer I have here that is 6 years old has a ppi of 148. The iPad 3+ has 264ppi.

Microsoft and Apple set the default ppi on their operating systems to 96pp per inch. However, newer high resolution displays don't use the default "normal" setting. On my new Sony it was set to 120% or 20ppi which I have bumped up a bit to 135ppi so I don't have to use reading glasses.

Internet Explorer will not scale either points or pixels which means that the only option for people using those high resolution screens would be to zoom the entire page which would pixelate your images badly.

The page I was looking at had the font size specified in pixels not points, ems or percentages. With today's high density screens pixels are simply a bad idea. Let me give you a few examples:

Size Text
1 12pt Now is the time for all good men.
2 12px Now is the time for all good men.
3 1em at your OS settings Now is the time for all good men.
4 1em OS normal fonts Now is the time for all good men.
5 1em OS large fonts Now is the time for all good men.

If 1,3 and 4 are the same size then your computer is using system defaults in Internet Explorer. Since Firefox doesn't honor OS ppi settings and I had to convert "normal" and "large" fonts to their pixel equivilents for this demonstartion to work in a browser note that Firefox wshoul show 1, 4 and 5 all the same size.

To see what the effect of changing text size is you should test it for yourself. You can do that by either changing the text size only in your browser and looking at the text above or copying it to a separate page in your web editor of choice and loading it in the browsers you wish to test. To change text size instead of zooming:

Internet Explorer go to View > Text Size and select anything other than your current setting
Firefox go to View > Zoom > Text Size Only

I'm not on a computer with Safari or Chrome installed to give you those instructions right now so you'll have to find it in those yourself.

Font Choices

The other text issue that I saw and is possibly even more common is having only one font family set - Verdana. Verdana is only available on Windows machines and Macs with Office installed. Verdana is a font designed for the web and has a larger x/y ratio than any other font that I know of. If the visitor doesn't have Verdana available the default system font will be used which is typically either Times or Arial. Let me show you what that means in terms of relative font size. The first is Vedana as I saw specified followed by Times then Arial. The last is what I recommend instead of using Verdana.

Now is the time for all good men.
Now is the time for all good men.
Now is the time for all good men.
Now is the time for all good men.

See the difference? One reason that many people use a smaller font size setting than the OS default is because Verdana is so much larger than other fonts. So they set it to 10pt instead of the default 12pt equivilent which means that if someome doesn't have Verdana their text may be too small to read comfortably. Let me show you what happens when someone sets a small font size because they are using Verdana when Verdana isn't present. Pay particular attention to what happens to the Times/Times New Roman font.

Now is the time for all good men.
Now is the time for all good men.
Now is the time for all good men.
Now is the time for all good men.
Now is the time for all good men.

The first line is OS default for the font family group I typically use of  "font-family: "Tahoma, Geneva, sans-serif;"  Tahoma like Verdana is a font designed to be used on the web and is included in Office. Geneva is the closet Mac native font for those that don't have Office installed and sans-serif will at least get you the OS default for that generic family, usually Arial. The x/y ratio of Tahoma isn't that much of a dep

I'd suggest you change your font sizes to ems or percentages. As a general rule converting from older screen resolutions to modern high definition screens you would use 16px = 12pt. That would be the system default for both Windows and Macs at "normal" settings which is the appropriate comparision. When I was computer shopping I discovered that all of the high resolution computers I looked hat came were set to 120ppi instead of the Windows default of 96ppi. So folks buying htem may not even know that their ppi is different, all they notice is that their text is crisper than it was on their older computer. Others may still change their ppi settings to something even higher. For example my new system is set to 135ppi instead of 120 or 96 so I can use it without reading glasses.

Conclusion

With the rise in mobile devices and laptops with high resolution screens in ever smaller form factors the use of pixels for specifying font sizes time has past. Now that people are accessing the web using everything from a smart phone with retina (Apple) or other high pixel density screens to "smart" TVs and set top devices (Samsung, Roku, others), game consoles (xBox, wii, Playstation), tablet pcs (from low end 800x600 android devices to HD screens running Android or Windows 8 or iPads with or without retina displays) to Ultrabooks/laptops to desktop PCs you need to font family groups with scalable fonts.

The most common style I use is:

body { margin: 0; padding: 0; font-family: Tahoma, Geneva, sans-serif; }

Tags:

Microsoft Surface RT

by cdwise 28. October 2012 20:48

Most of you know I haven't been impressed by Win 8 and I'm still not but at a local Win 8 launch event on Friday I got a chance to see the new MS Surface RT. I'll have to admit to being impressed. I'm not quite sure why I was so surprised at how elegant it want since on the few occasions when I've used MS hardware it has been well thought out and well designed. Keyboards, game controllers and mice (in particular the Arc mouse) come to mind.

One of my biggest frustrations with Win 8 has been the size of the onscreen keyboard. In landscape, the only sensible way to browse the web given the shallow width in portrait means half the screen is taken up by the keyboard when you are trying to fill in forms. The click on keyboard that was designed as a matched set solves that problem and the kickout support puts it at a very good angle for reading at a table or whatever. It also has a front facing camera designed to work with that angle for conferencing. It is amazingly light even with the keyboard cover attached. The keyboard cover has something I haven't seen on any of the third party Apple keyboards and that is a texture difference on the keys so even though they are flat you "feel" them if that makes any sense. I found it extremely easy to type on. Note, I did not see or try the hard keyboard but from what I can tell it is very much like the Logitech one I have for iPad. The aluminum Logitech is the best keyboard I've tried or used for the iPad so that should be a good option for those who want a more traditional keyboard type feel.

The pictures you see on the web or in print doesn't do the Surface justice. The back sweep angle from the edge makes it pleasant to hold and comfortable in the hand. I had figured that I could do all the testing I wanted to do using Win 8 on the Motion CL900 I've been using for testing Win 8 Pro and IE 10. Though I always go to the desktop implementation of Internet Explorer 10 which is somewhat different at least in layout to the “app” version. I really should use the App version for testing as well but it seems a bit difficult to get back to that interface once you’ve launched it from the desktop.

So I had no intention of buying a Microsoft Surface. After seeing the hardware I've changed my mind and there will be a Surface RT in my future, my near future. Our course it doesn't hurt that my husband won a $100 gift card to the Microsoft Store at the event which I plan on "appropriating". After all the RT version of Office must be somewhat different than the full version on a Windows 7 computer or Windows 8 Pro, right?

BTW, if you ware wondering what this has to do with web design, Expression Web or other topics normally covered on this site. Browser testing – you really do need to test your website in commonly used browser and IE 10 will be a common browser, more so than mobile Safari in my opinion. I still don’t plan to move my primary computer from Windows 7 to Windows 8 nor has Internet Explorer 10 been released for any system other than the Win 8 OS. Betas, Previews, Release Candidates are all not final versions which is all that is available for Windows 7 or below. The only way to test properly in IE 10 is with a Windows 8 OS. You can either run it in a VM or directly on the hardware. The Surface is such lovely elegant hardware that it actually puts my iPad 3 behind it in style and design (not to mention that with the Surface I don’t have to use a dongle to connect to a monitor (mini HDMI connector) and it has a full size USB connector, though I wish it had a full size not micro SD card slot so I could take the cards from camera directly to the computer instead of using a standard usb adapter. Did I mention that it also comes with Office 13 Home and Student? True it is just the preview edition right now but once Office 13 ships in a month it will automatically update to the full version.

I will say that for use totally without a keyboard I still prefer the iPad form factor height/width but with the keyboard cover the Surface seems to me more suited for producing not just consuming content. So despite what I’ve been saying for months I do now see a Surface in my future.

 

Tags:

Hardware | Web Browsers | Windows

Windows 8 May 31 Preview

by cdwise 12. June 2012 20:51

Downloaded the new release of Windows 8 and installed it on my Motion C900. First thing I find out is that according to the “compatibility” checker my touch screen is not “windows 8 compatible”. So only “basic” function will be available. I figure I can live with that and sooner or later a correct driver will be available as it was with the March preview.

So I proceed with the install only to find that I have to use a Microsoft ID to complete the install. If I provide an email address that isn’t a MS “Live” address it will create one using that ID. No thank you, if I do that no access to our intranet resources. I need a local user account to do that because cloud connectivity is restricted in our company. However, I provided my MSN credentials to complete the install. First, course of action after launching Win 8 is to go to the Control Panel and under User try to figure out how to change to a local account. Not as straight forward as it should be since the most obvious choice  of credential management didn’t do what I needed to do (not a Windows domain). I did find that you could change to a local account in your personal settings. There I was warned that my systems would not sync information and that I might have to actually log into apps to use them. Fine by me since cloud apps are something we can use in my work environment.

I thought I was doing an upgrade install only to discover that everything was deleted except the new apps and somehow the Epson printer is still work. Plus it left behind a windows.old folder that does nothing but take up space since it appears you cannot revert to it. Not a happy camper with this experience.

So for now this computer is incapable of doing any productive work since Office is no longer there and the bundled apps are not anything I can actually use for real work.

From what I see they keyboard and pen input hasn’t changed since the previous CTP, which means that it still taking up over half of my screen and doesn’t even have punctuation and numbers without changing to the other keyboard view. The option to have the full 101 keyboard seems to have been removed. This renders it useless as a tablet for inputing information into web forms in landscape orientation since over half of the screen is hidden by the keyboard.

For an OS touted to be a modern mobile computing platform for tablet devices this is unacceptable.

Off to search for drivers that will at least get me a screen resolution that does not distort the text to the point is it almost unreadable.

Tags:

Taking Advantage of CSS Inheritance

by cdwise 19. December 2011 21:45

I've been seeing a lot of posts asking for help with link styles on several of the mail lists and forums I belong to and thought I'd mention the benefits of using inheritance to slim down your CSS and make it a little easier to manage.

What I've been seeing is things like:

#menu a:link {
color: #CC0000;
text-decoration: none;
font: .85em Geneva, Tahoma, sans-serif bold;
}
#menu a:visited {
color: #808080;
text-decoration: none;
font: .85em Geneva, Tahoma, sans-serif bold;
}
#menu a:active {
color: #800000;
text-decoration: none;
font: .85em Geneva, Tahoma, sans-serif bold;
}
#menu a:hover {
color: #CC0000;
text-decoration: underline;
font: .85em Geneva, Tahoma, sans-serif bold;
}

Notice that you are repeating a lot of the same style property/definitions in each pseudo class when in most cases only one of the style definitions change. You can simplify this and make it easier to spot what changes in each pseudo class by using:

#menu a {
color: #CC0000;
text-decoration: none;
font: .85em Geneva, Tahoma, sans-serif bold;
}
#menu a:visited {
color: #808080;
}
#menu a:active {
color: #800000;
}
#menu a:hover {
text-decoration: underline;
}

By using the a instead of the a:link all of the properties you define are inherited by all pseudo classes so that you only need to change the properties that vary in the state you are defining. This cuts down on your CSS code AND has the added benefit of making it far easier to see what the differences are in that state from the default link.

Tags:

CSS

Online TV



Outstanding Hosting