Redesign–Day 4

by cdwise 11. March 2014 23:59

Our day 4 site is the Elko-Lander-Eureka County Library System.

image

First issue I noticed is that the page is too wide for my default browser width settings of approximately 1050px wide. The facebook like boxes on the far right look like someone had an “oh we have to have a facebook like on our page” and stuck the two of them on without any real attempt to make them part of the site.  The background and masthead images are attractive but the random placement of all the images and facebook boxes, especially those outside of the site’s boundaries as defined by the images is simply bad UX.

Next thing was that there is no real content on the page. Looking at it the page appears to be a bunch of images with NO CONTENT! It isn’t even obvious that many of those images are in fact links but to what means mystery meat content

imageSo look what happens to what little real text there is on the page when you are using large fonts or resize text larger in Firefox.

Text overflows the absolutely sized and positioned text.  This is made worse because the “background” is just that part of the background image. Anything that contains text should not be in a fixed height container.

Menus

What has been well done is the menus with the top navigation being physical library locations and the sidebar a well organized list of information and services.  The primary menu comes from Stu Nichols CSS play site and is free for use on non-profit sites and available for use on commercial sites for a donation or if you wish to remove the attribution from your stylesheet.

Since the site is already using a CSSPlay menu we decided to use an updated menu from CSSPlay that has a curved background as part of the menu system. To dress it up a bit more we added gradient backgrounds using colors from the header image for both the menu and the facebook widgets.

While I did like the original top menu in keeping with the use of css gradients for the sidebar menu and facebook widgets we decided to go with a gradient on the top menu as well. One that is almost a shadow of the header though I think the original top menu could easily be used if that’s what the site owner/maintainer prefers. The only thing I would change is to increase the font size slightly.

Adding Content

In order to do an effective redesign of this site it is necessary to add real content to the home page and make it more readily apparent that there are links on the page besides those on the two menus and facebook widgets.

Some of the text came from pages that were linked by the image or I created so there would be something we could work with. Personally, I’d like to see much more content on the home page of this site and less graphics but for the purpose of this redesign keeping the facebook widget and blending it into the site seemed important. I would urge the people who maintain the site to add more content to the home page and reduce the size of some of the graphics like the online education book stack that aren’t intuitive.

Ease of maintenance

To make this site easier to maintain we kept the decorative bits in the stylesheet including the gradients used for the two menus and the facebook widgets, well as much as the facebook widgets would allow. Frankly, they aren’t as customizable as I’d like.

None of the content is absolutely positioned though the menu flyouts do use relative positioning but since that is all in the cssplay.css stylesheet there is no need to ever touch it. Adding or removing menu items is done by editing the unordered list in the HTML.

Instead of using absolute positioning that is fragile and may display differently cross browser everything is positioned using floats and clearing classes. Since most of the content that is floated are images where it will render faster if you put the height and width into the img tag two generic classes named .fltright and .fltleft. Always use names that will remind you of what a class is to be used for and when you come back to the site months later you won’t be wondering what .style27 does and end up more or less recreating it at .style41. You can add generic clearing classes like .clrleft .clrright and .clrboth as well.

Final Result

imageNow that there is text on the page you can see that the images mean something and are not just mystery links.

Content is organized into blocks of related items such as the links to the IRS forms and reviews of tax software. 

The online classes section give the visitor an idea of the types of classes offered and that classes in languages other than English are also available.

Facebook has like buttons for both of the sites on the original page adding faces of some of the people who like the library as well as using the facebook dark theme over a gradient background that compliments the main menu.

You can see the redesign live at http://wizerways.net/elko and in case the original is made over either using our redesign or another here is the original.

Tags:

CSS | Review | Templates | Training | Web Design

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

Adobe Muse

by cdwise 11. October 2011 09:03

Last week at AdobeMAX I took advantage of the session on Muse to see just how this new WYSIWYG editor from Adobe does.  The idea is that you can create a good website w/o learning any code. Since I see a lot of posts from people who are shocked and surprised to learn that if you use Expression Web or Dreamweaver you really do need to learn at least some basic html & CSS code. So whenever I hear of an editor that claims to be able to do that if I have the opportunity I like to check it out.

My first though when the Muse session opened was – GoLive lives, in the cloud. Yep, Muse is one of the cloud based applications that Adobe is releasing using Air for the desktop portion.  Like GoLive Muse is aimed at the print person who wants to repurpose their content, layout and whatever else they have for the web but also wants to add media and other interactivity. So let’s see how well Adobe accomplishes that goal. NOTE: I’m using Beta 3 for this review. Expanded images are available if you double click the thumbnails.

new-siteFirst thing we see in creating a new website is a very print looking dialog box. Defaults include margin, padding, minimum height and columns with gutters.

Maybe because Muse comes in large part from the InDesign team, a program that I am hopeless when it comes to using, I found the interface to be non-intuitive. During the workshop it seemed things were much easier than when I tried to create a site of my own.

My first thought was to set up body element styles and some global settings such as what font to use on the site so I didn’t have to repeat it over and over again.

style-optionsUnfortunately I could not find that option either using the page properties shown in the image above or the Style Options. Other than paragraphs, headings and the odd choice of marquee there does not appear any way to set global styles.

So I gave up at least for current purposes and went with what Muse wanted to do. I selected what appeared to be the body element and gave it a background color. Then with show header/footer selected inserted content into those two areas to the best of my ability to determine what those locations were. Everything in Muse seems to be “rectangle” or “box” driven so my content was inserted per the instructions into the appropriate boxes. I was even able to wrap text around one image so that my finished page looks like:

finishedMake sure that you look at the larger image and you can view the resulting site live at:  My Muse Test Site  Here is the code generated for what I intended to be in the masthead section:

<div class="clearfix grpelem" id="n3"><!-- group -->
<div class="grpelem" id="n4"><!-- image -->
  <img id="n4_img" src="image/muse-test1.jpg" alt="" width="227" height="130"/>
</div>
<div class="clearfix grpelem" id="n6"><!-- content -->
  <p id="n8">My Muse Testing Site</p>
</div>
</div>

Recreating this section using normal html5 I would have:

<div id="masthead">
<img alt="Muse" height="130" src="image/muse-test1.jpg" width="227"><h1>
My Muse Testing Site</h1>
</div>

The difference in the CSS is even more dramatic. There are 13 style definitions applied to the “My Muse Testing Site” by Muse starting with a css reset which was inaccessible by any method I could discover while working within Muse. Using my normal page layout methods there are 4 style definitions applied to the same text: body, container, masthead & h1.  Compare the code in my version of the Muse site done right demo that I created. Note there are a few differences between the two in function and font sizes since unlike Adobe Muse I prefer scalable units of measurements.  I also did not create a mobile version but I may do so at some point just to see what differences would be necessary, I suspect the changes would be to to less than 6 style definitions.

When it comes to file size the Muse page (including mobile styles and javascript used for rollovers) comes in at 131k while my version comes in at 17k. Both use images for the menu background but I optimized the one image I used for css based rollovers in my version and use no javascript to accomplish it. As a result I do have to add ids to the menu elements to get the "active page” indicator on the menu which needs to be put into a style block on the page instead of the external stylesheet but that eliminates the need for javascript which I consider to be a good trade-off, at least on small sites.

The other images used on the site are exactly the same. The other differences besides a very bad case of divitis is that my version uses semantic mark-up. In other words lists are marked up as either ordered or unorderd and headings are actually headings.

I was really hoping that Muse would do better than it is proving to do since I would like a good WYSIWYG editor to recommend to the folks who don’t want to learn code but unfortunately Muse will not be it. The reliance on absolute positioning and over use of divs combined with the difficulty of creating semantic mark-up on the content rules it out.  The good news is since Muse is a beta product there may still be time to fix the worst of its mark-up before it is released.

Tags:

Review

Review: Expression Web 3 in 24 Hours

by cdwise 22. October 2009 19:22

I recently received a copy of Morton Rand-Hendriksen's "Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours" for review.

Summary

This book is best for: Beginners who want to have personal or hobby website up and running quickly.

The way I review books is to start with an overview on the book format and table of contents. Like all of the Sams 24 hour series this book is organized into chapters each focused on a particular topic or task.  This series reminds me of a traditional classroom. There is a lecture (informational section),  exercises homework (try it yourself) Q&A followed by a quiz. Each chapter is designed to take one hour (give or take) to complete and for the most part are independent of each other so you do not need to work your way through the book from start to finish in the order presented with one exception: no matter how tempted you may be don't skip the first chapter or you may regret it later when you can't find the item you are looking for.

As with any book or tutorial you are using to learn about web design or development when you have a download of some files available, make sure you get the files on your computer as soon before you begin any exercises. Morton provides you with the download link early in chapter 2 use it.

What I Like

This book gives you a good over-view of how websites work and using the tools in Expression Web. In particular I like:

  • The authorize style- for this type of quick get it done now book the information is presented in clear understandable prose. Clear and concise easy to follow for the person who isn't familiar with web terminology . Overall the book does a good job explaining what the beginner needs to know with introducing proper terminology such as absolute and relative which don't always mean the same on the web as in the real world.
  • Little bits of "why" and web history in the "One-Minute" and a By the Way" sections.
  • How to import content from Word and other applications. This is something too often over looked by book authors and newbie web creators.
  • Hour 8, introducing code view and how it can help you learn along with Intellisense to help the user accomplish things that cannot be done using pure design view-wysiwyg. Hopefully this will help people got over the fear many experience of "code" being "too hard".
  • Providing multiple ways to use CSS from toolbar auto generated or using panels to code view Intellisense.
  • Working from processor for php to email. I just wish there was one for ASP.NET as well.

What I Don't Like

This is of course subjective and in many ways is more reflective of the limitations imposed by the format than the book itself:

  • The clear and concise text is sometimes a little too concise. Complex issues such as cross browser compatibly are oversimplified and dismissed too easily. This is fine for personal/hobby sites but can be fatal for business sites. In particular the CSS only dropdown menu that does not work in IE 6 is one I cannot recommend using on a business site.
  • Telling people to upgrade their browser is not an acceptable method for dealing with browser issues on a business website. Too often the reason a person isn't using a better browser is browser is because they have no choice. Either they are in a corporate environment where the company has standardized on one browser (and locked the computer so they cannot change it) or they have hardware software constraints such as older computer systems a limited internet access. Remember not everyone has broadband available and some pay by the byte.
  • Accessibility is basically ignored. A couple of sentences on what on alt attribute in Hour 6 on images and why it is important to use them would make a real difference. This omission is one of the reasons I feel this book is best for those who create hobby sites not for SOHO or small business sites. (An alt attribute should give the information conveyed to someone who can see the image so if your image is your company logo the correct alt is the company name not “logo”. If the image is purely decorative use an empty alt attribute alt=””.)
  • I also find contradictions between saying in Hour 6 that "Expression Web is Not an Image Editor" with the amount of time/space devoted the Picture Toolbar in Hour 7. The advice in Hour 6 to use a real graphics editor is the correct thing to do and fortunately Expression Web 3 comes with Expression Design so you have one.
  • I disagree with the advise to use CSS Resets in Hour 14, especially for beginners. Most reset stylesheets and the consequent requirement to explicitly style each element used is beyond what can should  be expected of a CSS-web design beginner.

Conclusion

If you want a website up quickly this book is a good place to start. However, if you are creating a website for a business you will need to learn about accessibility (the ADA- Americans with Disabilities Act and similar legislation in the UK, Canada, EU, Australia, Philippines and many other counties apply to business websites) and cross browser issues. Fortunately there are many resources you can use to build on the base you will get from this book.

Tags: ,

v3 | Expression Web | Review



Outstanding Hosting