Redesign–Day 3

by cdwise 10. March 2014 23:59

Our third site selected is for the The Alamance County Genealogical Society. Visually the biggest issue is the navigation text being part of the header graphic and implemented using mapped co-ordinates. The menu text is very difficult to read, particularly on high resolution screens.  Otherwise with the exception of the majority of the header image it just looks dated.

Let me take a moment to address the header image.

 topborder_4

As we were working on the site several people commented that they loved the collection of heads in the header. How appropriate it was for a genealogy site but they wished it had been of better quality. The biggest reason for the poor quality is that the image (which I agree is conceptually great)  was saved as GIF file instead of a jpg. You should never save anything with lots of different colors or gradients as a gif because at best it will only contain 256 colors. A single gradient can contain more shades.

Behind the Scenes

It is when you look at the code that you see where the real issues with this site occur. First issue is the use of a nonstandard doctype.

<html xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office"
 xmlns="http://www.w3.org/TR/REC-html40">

Which means that Word or possibly Excel was used on the site, probably for content creation. This is a problem because only Internet Explorer has a clue what the doctype means and vml is proprietary and will not run in other browsers.

Also, like our day 1 site there is an over use of styles. All of which are named either “styleXX” or “auto-styleXX” with X being a number. There is also a significant amount of MS HTML attributes that are not part of the normal HTML standard and old style HTML presentation mark-up such as

<td height="1" align="left" valign="bottom" bordercolorlight="#0000FF"
 bordercolordark="#00FFFF" bordercolor="#5C5E8B" bgcolor="#C0C0C0" 
 style="width: 163px">
   <font size="4" color="#000080"><b>Monday Nights</b></font></td>

From the code above only <td> should be used without the attributes and <font> has been deprecated since 1999.  Which tells us this is an old site but an effort has been made to bring it up to current standards by using styles inefficiently. This is actually pretty common for people migrating a site from FrontPage to Expression Web or other standards compliant web editor.  Our Basic Website tutorial and Pat & Tina’s Migrating FrontPage to Expression Web ebook can help you with your transition and understanding how to use web standards and css on your site. Using some of the methods Tina talks about – Find/Replace HTML tab to remove deprecated html elements like <font> and attributes like “bordercolorlight”, “align” and “bgcolor”. Clean up is pretty quick. Next step is to apply HTML elements correctly so that <hx> is used for headers instead of faux headers created using presention attributes so that:

<b>
<P><font size="5">The 1850 and 1870 Census</font>
<font color="#800000"><br>
Go to <a href="alam_cen.html"><span class="style14">
Here</span></a> for this Information</font><blockquote>

Becomes “<h3> The 1850 and 1870 Census</h3> With style definitions for elements like the <a> element created so they would be applied automatically. Should you want to increase the side margin don’t use <blockquote>. That has a semantic meaning that the contents are quoted from some other source. Should you want to move text over create a style with margin defined how you want it. Then name it something meaningful so if you want another block of text to look the same way you can simply apply the existing style instead of creating another stylexx definition.

The final issue is an accessibility one. Fonts are specified in points. Points are a unit of print measurement and do not translate consistently to the web. Different operating system and browser combinations can show the same 12pt as anything from 16px in height to 20px (large fonts) or even up to 30px for those who have changed their OS settings because of poor vision. Internet Explorer for example uses the OS settings to determine how many pixels are used while Firefox does not.  So save points, inches and centimeters for print stylesheets. Use ems or percentages for fonts sizing on websites. An em will always use the operating system settings to determine the size of the text to use when it renders the page.

Design Decisions

Our first design decision after cleaning up the page is what type of layout would work best for the site content. Looking at the content there is a mix of information types. Some of the page content is tabular data and others are lists of links which doesn’t immediately suggest a multi column page layout. Instead, we opted for a single column layout with some sections split into two columns.

Next, as with our last site redesign we looked to the image on the current page for a color scheme. That’s where we ran into our first issue. The current image is too small for the wide screen format most commonly found in monitors now. Plus, the quality of the image wasn’t something that could be rescaled easily but the concept was definitely one we wanted to keep. So using a couple of sites that have out of copyright images (http://totallyfreeimages.com/ and Life Magazine hosted by Google)  from the 1800s we dubbed in some more folks. Another part of the image that struck us as odd was the inclusion of an outline of the state of North Carolina with what we took to be Alamance County colored in. The majority of the people we had looking at the existing site had no clue what that was until we explained it to them so we decided to remove it from the graphic. We also cut out the society logo and text in the image. What we ended up with is:

header

What we would like to see is the whole image redone from the original files to a size at least 950px wide because frankly, the head section they created is much better than what I added in.  By cutting out just this section we accomplished a couple of things. First, we can use the image as a background to the masthead and allow the page to scale down for viewing on small screen devices. Second, the text is now readable by screen readers and search engines and will scale according to the visitor’s settings.

We also felt that the colors in the society logo didn’t work well with the sepias that dominate the heads graphic so that was also cut out and moved to the body of the site. In keeping with the vintage primarily sepia header we used a subdued ecru sort of color instead of pure white for the content background and a light midtone for the page background.

Fonts

I asked the person who nominated this site for our redesign what font was used to create the site title in the image. Unfortunately, she didn’t know what it was and while we could have used the text cut out from the graphic it is a little pixelated. Instead looking at Google Fonts, we found a similar display font Parisiene to use for the headings.  Sort of dresses it up a bit since there aren’t many graphics on the site.

Finishing Touches

Once we had decided on the basic layout the rest was pretty simple with one minor exception. That was that we had a bit of trouble getting the two side by side columns to line up correctly.  The simplest solution was to put each column into a div with the .halfcol class assigned so that top margin/padding would be applied the same way.

Finally, to dress it up a bit more of antique look subtly rounded corners and a drop shadow were applied. Max-width instead of width was used on the container so the page would scale on smaller websites but still keep a readable line length on larger/higher resolution screens. Min-width was added to the .halfcol class so if the page was viewed on a narrow screen the columns would wrap instead of becoming so narrow that contents were hard to read.  The end result is:

SNAGHTML581e307c

http://wizerways.net/acgs/index.html

Tags:

CSS | Review | Web Browsers

Redesign–Day 2

by cdwise 10. March 2014 02:56

Our first site redesign was a busy old school style site with a background image behind the text, scrolling marquee and plenty of colors.

jm-originalFor our second site we choose its polar opposite, a one page resume site for a document engineer.  A screen capture of the original site is to the left.

As you can see being too busy isn’t exactly the issue with the site.  The author wanted something that would load quickly and serve as a place he could point potential clients to for an overview of the services offered.

While those are worthy goals the unconstrained width of the page can lead to long line lengths making it harder to read.

The Goal

For this redesign the object was a professional, fast loading resume. We also decided that since this was the only page and the primary purpose of the page is to get clients a responsive design that would work on a small screen like a phone would be advantageous.

Clean-up

Since the original page is so simple clean up was pretty quick consisting of removing some deprecated formatting and background color.

Layout & Colors

The focus on this site is on words and using text effectively with a fast loading page that works on a wide variety of browsers and devices. This is a site that needs to be effective even on IE 6. So our layout is very simple even though it uses some CSS 3 elements that will not render in IE 6. So we started with a basic two column layout not that much different from the site we did yesterday but without the backgrounds and allowing the MVP logo to drop below the masthead to minimize the size of the header.

This created a vey plain page, perhaps too plain so what could we do to make it pop without becoming cluttered or adding much weight to the page with graphics? The answer was a simple border and drop shadow. The entire CSS for laying out the page and styling the content consists of:

body {
    font-family: Calibri, "Segoe UI", Tahoma, Geneva, sans-serif;
    margin: 0 0 1em 0;
    padding: 0;
    background-color: #ccc;
    background: linear-gradient(to bottom, #ccc , #fff); 
} #container { width: 950px; margin: 0 auto; background-color: #fff; box-shadow: 10px 10px 5px #bbb; border: 1px solid #aaa; } #header { margin: 1px 10px; padding: 0; font-weight: bold; } #header .sitename { font-size: 3em; margin-bottom: 0; padding-bottom: 0; } #header p { margin-top: 0; padding-top: 0; font-size: 1.25em; } #leftcol { float: left; width: 260px; margin: 0; padding: 10px; } #mvp { width: 100px; text-align: center; float: right; font-size: .8em; } #rightcol { margin: 10px 10px 10px 300px; } .fltleft { float: left; margin-right: 1em; } .fltright { float: right; margin-left: 1em; } #footer { border-top: 1px solid #aaa; font-size: .8em; padding: 1px 10px; margin: 0; } a { text-decoration: none; color: #333; } a:hover { text-decoration: underline; }

That’s it, redefining a couple of HTML elements, using IDs for structural blocks and classes with easy to understand class names that help you know what the class does.

Responsive

But this is a resume site, shouldn’t it also work on a mobile device like a potential client’s phone?

Of course, and because we are using such simple mark-up it is very easy to add an @media section that reflows the content to eliminate horizontal scrolling on small screens (in this case defined as under 480px but you can choose the size where the page reflows.) Just add before the closing </style> element since a one page site does not need an external stylesheet, and no the double }} is not a typo but part of the @media style.:

/* max device width */
@media screen and (max-width: 480px) {
#container {
    width: 98%;
}
#leftcol {
    float: left;
    width: auto;
    margin: 10px;
}
#rightcol {
    margin: 10px;
}
}

Testing

Whenever you are concerned about browser compatibility you should test in multiple browsers and at different screen resolutions. Most modern browsers have the ability to test at various sizes and some browsers like Firefox and IE have the ability to change the user string and test emulating phones and other mobile devices. However, that doesn’t help when you need to test in multiple versions of Internet Explorer. Fortunately, Microsoft makes available Virtual Machines (time limited but you can always download a new one when the one you have expires) that will let you test in different versions of IE. These images and the virtualization software to use them are available free of charge at modern.ie for use on Windows, Mac and Linux platforms. Using various testing tools I was able to get screen shots like the ones below. First on a mobile screen then in a modern web browser.

SNAGHTML49795f38SNAGHTML497c4f0c

Finally, when viewed in Internet Explorer 5/6.

SNAGHTML498bb4d2

So what did we lose in older versions of Internet Explorer?

We lost the drop shadow in anything older than IE 10.

Centering in Internet Explorer 6 and below.

However, the basic site layout and design are there and the site is still attractive and functional.

John was so pleased with the redesign that he immediately updated his photo and availability making it live at http://www.john.mcghie.name/ 

Final Redesign

How it looked using the original site images and text John McGhie

Tags:

CSS | Dreamweaver | Expression Web | Training | Web Browsers | Web Design

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

Internet Explorer 9–March 14th

by cdwise 11. March 2011 05:22

MS has officially stated that Internet Explorer 9 will be released on March 14 at SXSW http://news.cnet.com/8301-13577_3-20041126-36.html. It appears from the RC documentation that there will be a compatiblity mode to show you how IE 8 and possibly IE 7 will render the page http://support.microsoft.com/kb/956197 Windows XP users won't be able to upgrade but frankly it is past time to get off XP in my opinion if you have any concern about security. We've got Win 7 running on netbooks faster than they ever ran XP.

With IE 8 being the second browser to fall in this year's PWN2OWN (3 hours, first was OS X/Safari where it took 5 sec to find the exploit and an hour to write the tools/test suite to prove it up) folks will be encouraged to upgrade quickly. MS usually starts pushing their new browsers via Windows updates within a month or two of release. For people running the beta version the RC was available on Windows Update so who knows how quickly they'll start pushing IE 9 out that way.

More information on compatiblity and how to trigger it at http://support.microsoft.com/kb/956197 There are free time bombed virtual machines for IE 6-8 available at http://www.microsoft.com/downloads/en/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en and I would expect they'll add an IE 9 one after release or you can simply update one of the ones already available to IE 9 for testing if you prefer to keep your IE versions separate. It looks like the VPCs are refreshed every 5 months or so which isn't too bad for testing purposes.

The IE 9 testdrive site is http://ie.microsoft.com/testdrive/ which shows you the state of HTML 5 support in the browser you currently have installed.

If you are using Dreamweaver here's the link for the CS 5 HTML 5 pack updater http://labs.adobe.com/downloads/html5pack.html which also includes a link to the extension for CS 3 & CS 4 users.

If you are using Expression Web 4 the add-in for HTML 5 support is at http://gallery.expression.microsoft.com/Web4HTML5SchemaAddIn no options for earlier version users that I'm aware of.

Tags:

Web Browsers

IE 9 Beta

by cdwise 17. September 2010 21:02

On Weds the latest version of the new IE 9 beta was released. Unfortunately, I haven’t really seen it because you cannot install this version side by side with IE 8 so I will need to set up a VPC for testing function.

If you just want to see how your page will render in IE 9 beta and you have Expression Web 4 you can use SuperPreview remote to view your page. IE 9 is not available in the free SuperPreview for IE version at this time. (I do not know if MS has any intention of adding it or not.) Here’s this site shown in SuperPreview with IE 8 on the left and IE 9 on the right.

image

There is also no preconfigured VPC for IE 9 beta available at http://www.microsoft.com/downloads/en/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en but there are Vista IE 8 vpcs available that you should be able to update to IE 9 beta. Just remember that these are time bombed for 90days after first launched but since you would be using it to test a beta browser that should be more than adequate.

Unfortunately, Adobe Browserlab hasn’t updated their browser list to include IE 9 beta (or Safari 5) yet. However, I still appreciate having Browserlabs because it includes Chrome and older versions of Firefox & Safari than I have installed on my computer. There are benefits to using multiple testing tools.

Tags:

Web Browsers



Outstanding Hosting