Redesign Day 6

by cdwise 14. March 2014 13:18

SNAGHTML3272e9cThe majority of the websites submitted for redesign were genealogy sites, either for individuals or clubs like our day 3 site. Today we are redoing an individual’s personal site for themselves and their family. Foster, Colenso, Drummond, Leeman and Ussher This site was selected from the ones submitted because I’ve never seen a site that wasn’t a big database driven content management based site that had 4251 lines of HTML and scripting code.

I suspect that this non-standard doctype and the comment code below it explain many of the issues I see in code view:

<!DOCTYPE HTML PUBLIC"-//IETF//DTD HTML//EN>
<!--This file created 03:47 13/12/2008 by Claris Home Page version 2.0-->

Even after removing the extraneous lines there was still nearly 1,000 left which even for a page as long as this one is means a lot of lines. In doing the initial clean up there were 93 lines of <p></p> where empty paragraph elements were used for spacing. As mentioned in reviewing an earlier site this can lead to very inconsistent display cross browser. Do not use the spacebar or enter key to create whitespace on a web page. Use margin or padding depending on how you want the space to be created.

In addition the freefind.com search form encompasses all most all of the content on the page which is not how you would normally implement a form of any sort, particularly if you wished to style it to blend in with your site. So for the purposes of this redesign it will be omitted.

The other issue I see that is most likely related to the generator program used are non-standard html attributes like: x-sas-useimageheight="" x-sas-useimagewidth="".  Something that really should be avoided if you want consistent cross browser rendering. Also, spaces in file names which require encoding so that the empty space is replaced with a %20 code. If the encoding by the editor used ever fails then the link to the image or file will be broken. One thing that was done right is the use of alt attributes on the navigation images. Without which anyone who could not read the blue on purple text would not be able to use the menu to navigate through the site.

I have to admit that cleaning up the code on this site took far longer than any of the others we have redesigned. Not only was there a lot of strange propriety code and blank lines but tables were improperly used. Not only were there nested tables and content in tables that shouldn’t have been but separate tables when the content logically should be in one continuous table.  Often there were paragraphs inside of table cells with <br> making it appear as if the table was properly created with each line in a separate <td>. Which means the tabular data as shown in the screen shots below should be marked up properly.

Colors

Looking at the table on the left side an attempt to color code the generations was made which does seem like a good idea but sadly it doesn’t appear to have been implemented when you look at internal pages.  Instead of being colored by generation or time looking at:

image

Color coding seems to be by family since looking at the Colenso the entire background is a bright purple with dates listed from 1641 to 1921.  The colored backgrounds make it very difficult to read, particularly the dates as you can see in the image above or on the page itself.

What I had expected was something more like this (Colenso family information that was in purple in the above screenshot):

image

Note: I have no clue which generation each section belongs to so sort of used my best guess.

This would still create a colorful site so we took the opportunity to make sure that colors were in the same color hue values instead of having warm and cold versions of the same color randomly interspersed in the generation color coding table.

Final Design

One thing that really bothered me, the variety of purples with some of them on the blue side of the purple spectrum and others on the pink/red side. While I understand the desire to use the Welsh flag the primary red/green colors simply do not go with purple. Fortunately, there are other Welsh symbols that work better like the Prince of Wales feathers and daffodils. Even leeks would be a better option if any shade of purple is to be used as the primary color. By switching from the Welsh Flag to the Prince of Wales Feathers the clash of colors goes away. Using yellow daffodils would be another option since purple and yellow are complimentary colors.

The other thing that we did was replace or resize some of the images. The background was replaced with a diagonal css gradient in the site owner’s favorite color – purple. By keeping all the purple elements in the same color space we get a semi-monotone design that has a variety of purples without clashing.

SNAGHTMLb321f6a

You can view it at wizerways.net/mandx
If you wish to see how the first set of Colenso family members look it at mandx/surname.html Note: only the first table has been converted to a properly marked up table.

Tags:

CSS | Training | Web Design | Dreamweaver | Expression Web

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

Web Developer vs Web Designer

by cdwise 9. September 2010 19:25

I have a Google alert set up for when Expression Web & web design. Today I received an interesting blurb and link that I followed to the blog it originated in. While the blog post turned out to be interlaced with spam links (so I won’t link to it) it did have some commentary that I felt needed to be addressed on the topic of what is a web developer and what is a web designer.

I basically agree with the definition presented of a web developer:

Quite simply, a web developer is a kind of software engineer, one that conceives, develops and runs applications that support the operation of the World Wide Web. Generally speaking, these types of programs deliver a particular server’s content to a client or end-user through a web browser.

Though I do not agree with the part of the author’s definition that claims that web developers have major industry certifications from from Novell, Cisco, Microsoft and Oracle. Since the vast majority of web developers I know do not have such certifications and certainly not from Novell or Cisco which are primarily network infrastructure certifications. You will find a very small minority of web developers are Microsoft Certified Solution Developers, MS SQL, Oracle DBA or MySQL DBA but that you really don’t see too many DBA (Database Administrators) actually working as web developers.

The author did have a good definition of web designer but he omitted the graphics skills that go along with his definition:

Web designers need to understand the behavior of the various pieces that go into a page, site and domain, not from an infrastructure level, but the perceptual level. A designer needs to put herself in the place of Internet surfers and understand how they “see” and navigate their way around the web. This understanding will inform her choices as to how she puts together the pages, links them to others and creates the overall environment, making disparate parts into one coherent whole.

Which is part of what was in the blurb Google sent me that made me follow the original link.

Web developers are not designers, as pointed out previously, but often are familiar with the high-end web design software programs like Front Page, Adobe Dreamweaver and Expression Web 2. Web designers, of course, are not only familiar with these, but have the full range of creative applications in their toolboxes-Photoshop, paint programs, Illustrator, word processors, the whole chi straightening irons collection. They need to manipulate images, colors, text and other elements to create the look, feel and actions that web visitors expect on the Internet.

Dreamweaver & Expression Web 4 are tools not web development tools even though each has some limited amount of back-end coding support. In the case of Dreamweaver that is PHP & ColdFusion while for Expression Web that is ASP.NET and PHP. No real web developer would use either one for web development on the back-end. Instead they would use a PHP IDE, Eclipse or PHP (depending on their preferred language).

Dreamweaver & Expression Web are used by web designers who need to understand how browsers work and work with front-end code by which I mean HTML, CSS & JavaScript. The web designer has to work with the visual elements of the page which means they also have to understand graphics, design and usability. This is what differentiates a web designer from a graphics designer who needs many of the same graphics skills but also needs the skills for print which is a completely different media.

Tags:

Dreamweaver | Expression Web | Web Design

Dreamweaver vs FrontPage vs Expression Web

by cdwise 8. July 2009 23:22

As I have mentioned before I  subscribe to Google alerts on a couple of web topics. Primarily, Expression Web since I happen to write about it but in addition to being a Microsoft MVP for Expression Web I am also an Adobe Community Expert for Dreamweaver so I tend to watch for Dreamweaver topics as well as general web design/front-end web development stuff.

In the last week I have seen several threads in my Google Alerts asking “Which is Better FrontPage or Dreamweaver?” So rather than go and register at a bunch of different forums and respond in the threads (after having gotten disgusted with some of the CAPCHAs I have seen and not received the confirmation email from two others) I decided to address the topic here.

First, why in 2009 would someone even be asking which is better “FrontPage” or “Dreamweaver”. FrontPage has been discontinued since 2006. Anyone who hasn’t been using FrontPage since before it was discontinued shouldn’t even consider buying it now – that is assuming they could even find a copy legally for sale. While never as bad as painted by most web professionals FrontPage does tend to write Microsoft Internet Explorer proprietary code. Since FrontPage has not been updated since 2003 its target version of Internet Explorer is IE 5 and Internet Explorer has changed a lot since then.

Second, unlike some of the people in the threads I don’t consider Adobe Dreamweaver to be the best choice of editor for every web design purpose or situation.  I will say that Dreamweaver is my primary web editor and I use it on a daily basis. However, I also use Microsoft Expression Web on a daily basis.

So why do I use both editors?

I do so because each has their strengths and weaknesses.

CSS, both have very good CSS editors but their approach is somewhat different, which you prefer is an individual preference. I slightly prefer Expression Web’s but your preference may vary. I am not going to spend a lot of time explaining the differences since that is an area you can easily test for yourself with the free trials each company makes available.

Site management tools in the current versions Dreamweaver’s site management tools are considerably better than Expression Web’s for publishing but the gap narrows quite a bit when Expression Web 3 is launched on Friday but Dreamweaver still wins on site management. Dreamweaver’s DWT architecture and capabilities are the more advanced, so in this category I prefer Dreamweaver.

Extensibility, Dreamweaver wins this one quite handily. Microsoft doesn’t have a good SDK for Expression Web and has not settled on a good framework for extending Expression Web reliably across versions. I have add-ins from InstantFX that only work in Expression Web 1 and other extensions from WebAssist and D2Stuff.com that had to be updated by the makers for each version of Expression Web.  On the other hand I have Dreamweaver extensions that were created for Dreamweaver MX and still work in Dreamweaver CS 4. That means the extensions work over 5 different versions of Dreamweaver (MX, MX 2004, 8, CS 3 & CS 4) without a single update. Okay, I wouldn’t use some of those extensions anymore because the web has changed a lot in that time frame but I could if I wanted to and if I were an extension maker I’d much prefer to write Dreamweaver extensions so I didn’t have to rewrite every release.

Previewing your work, both editors have pretty good WYSIWYG design surfaces approached in different ways. Neither are what you would actually see in a browser but given the variety of browsers and operating systems out there anyone who expect the design window to look exactly like what their visitor will see is foolish at best. Dreamweaver offers live view which is good and allows you to set up connections for testing servers as well as production servers. Expression Web includes a light weight testing server that lets you test asp.net and php pages in whatever browsers you have installed on your computer. There are pros and cons to each approach depending on your workflow.

Scripting, here is where you see real differences in the programs. If you work on pages with ASP.NET 2.0 and take advantage of the power of master pages, then frankly Expression Web is the design tool you should be using. Adobe’s decision to not support ASP.NET 2.0 is one that I have disagreed with from the first time I heard about it. As far as I am concerned I don’t particularly care if Adobe provides the web applications for ASP.NET 2.0 (forms to database add/update/delete) that they do for Classic ASP, ColdFusion, and PHP but I really do wish that Dreamweaver supported Master Pages. They are basically server side DWTs and if you work in an ASP.NETshop as a UI or web designer the ability to work with them is essential.

However, while Expression Web does offer support for php, Dreamweaver has a far more robust feature set and the ability to “see” server side includes in the design surface makes Dreamweaver the better choice here. Obviously, if you use ColdFusion Dreamweaver is the choice as well. Surprisingly, Dreamweaver is also the choice if you are maintaining a Classic ASP site since Microsoft’s Expression Web testing server doesn’t support Classic ASP and there is little benefit to using it over Notepad.

Dreamweaver has Spry, APIs for jQuery and YUI libraries while Expression Web only has ASP.NET AJAX support so for client side scripting Dreamweaver again is the better choice.

Troubleshooting, one of things I do both for clients and for students is to figure out why something isn’t displaying correctly on the web and how to fix it. For this I tend to use Expression Web since I can easily open a page directly from the internet and step through the display issue’s html and css. This ability using IE’s Page > Edit with Expression Web is so handy I haven’t even tried using Dreamweaver for such troubleshooting since Expression Web v1 came out as a CTP (Customer Technology Preview).

Conclusion

There is no clear winner hands down winner between Dreamweaver and Expression Web both are very good web editors but each has a different approach and methodology. They both require you to know basic HTML and CSS. Both require you to have an understanding of how the web works and the other technologies behind it. Both require an understanding of browsers and their differences in rendering. Both have a learning curve – Dreamweaver steeper than Expression Web due to its wider support of web technologies. Neither is perfect and each has feature sets the other doesn’t which is why I use both.

My recommendation – if you already use Photoshop or other Adobe programs check Dreamweaver first. While if your primary applications are from Microsoft check Expression Web first. Notice that I say “first” because what I really suggest is that you download the trials of each and see which fits both your needs and how you work. For me, I’ll continue to use both.

Tags: , ,

Expression Web | Dreamweaver

Editor Comparison

by cdwise 16. June 2009 05:07

In just under a month Expression Web v3 will be coming out. I am thinking of doing an editor comparison between Expression Web 3 and Dreamweaver CS 4 once v3 is available. What I would like to know is what sort of things should I compare the two programs and whether or not I should include Expression Web v2 in the comparison.

What do you think?

Technorati Tags: ,

Tags: ,

Expression Web | LiveMeeting | Dreamweaver



Outstanding Hosting