Simple Responsive

by cdwise 16. April 2014 21:50

I was perusing the Microsoft Expression Web forum and came across a thread where the original poster was wanting a simple responsive site that doesn’t require a lot of javascript. This is actualy pretty easy to achieve if you don’t care about older browsers, in this case anything older than say IE 9+ or any other browser released in the last 3-4 years.

In a modern browser on the left and in IE 8- in the middle and phone or other small screen on the right.

imageimage   image

Not one line of javascript is used and the images will also scale according to the space available in the browser’s viewport. Note, that the images will not scale in those older browsers but for the most part we are not concerned about the size of the image on the desktop/laptop or other full size browser so that’s not usually an issue. As always you should test to make sure that the images and page render as expected or at least acceptably (which I define as attractive and functional within the limits of older browsers).

Since I wanted to keep the focus on the template I opted to keep this design very simple and use only CSS for subtle design elements such as a gradient background, rounded corners and shadows on the main content as well as images. Images came from the Microsoft Office Image Gallery so you do need Office if you were going to use the same images. Text was generated using the Monty Python selection at Fillerama since you will have your own content anyway. With those pesky details out of the way here’s how I created the page design and what you need to know to use it as the base for your site.

My Process

First, I created a new folder in my local test site in Expression Web 4 then created an empty HTML 5 page (you can use XHTML 1.0 Transitional if you prefer since I have not used any HTML elements in this template.) Name it whatever the default document is on your hosting server, in my case that would be index.html. If you do not currently have a site create a new one using Site > New Site  and selecting either 1 page site or empty site and add an new blank html page. Make sure you are working in split view so you can see both the code and design view.

imageSecond, I copied the text generated by Fillerama into the code view section between the <body> elements.  I changed the default <title> text and added an <h1> to the top of my page for a header/masthead section.

Next, I wrapped a <div> around all the content so that I could style the content area. While I was at it I also wrapped a <div> around the text that would be the header, an empty <div> below that for navigation then one around the content, finally another around each of the sections that would make up the two columns. If I was not concerned about any version of IE below 9 instead of using <div> for many of these I’d use <footer>, <header>, <nav> and <section> but I do want the page to display more or less correctly in older browser so I have stuck with <div>. If you want to see what HTML 5 elements your target browsers use check out Can I Use. Finally, I added an unordered list of hyperlinks that would become my menu and dragged the images I planned to use to the appropriate location in the document.

Other than the application of CSS classes & IDs if you look at the source code the demo page is how the page’' looks at this time. I posted an image of how the page will display if for some reason none of the CSS is processed so you can see that the page is functional if not very attractive. You can always check how your page will look by either turning off CSS using your browser’s tools when you process the page or by commenting out your styles (in the head section or link to external file.)

Adding Body Style

For me I always start with the basics – aka defining the body element with a font and colors that will be used as the page default. Since I like to honor whatever the visitor’s settings are my font-size is set to 1em. Personally, I’m not a fan of small text on web pages since my high resolution screens is optimized for my personal preferences so anyone’s assumption that the text will be “too big” just antagonizes me.  In addition I set the font family that I want to use on the page. To keep things simple on this template I stuck with a font-family listing that includes fonts commonly found on Windows and Apple devices with generics for a fallback.

font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
font-size: 1em;

If I wanted to do something fancier with type I’d use either Typekit from Adobe (part of my Creative Cloud subscription) or Google Web Fonts (free).

Next, I set margin and padding then decided on the background color I wanted. In this case a CSS gradient. Expression Web has no built in tools for creating CSS gradients but fortunately Colorzilla’s Ultimate CSS Generator works well. Though I prefer to use the Firefox plugin version. After all you should have Firefox installed locally for testing anyway.  Simply choose the type of gradient you want with the starting/ending colors. If you don’t have a color scheme already and you need help creating one if you have a logo or image you want to use your header simply pick colors from it or use Adobe Kuler to create a color palette for you. Note: Colorzilla’s gradient generator will give you a whole lot of css including filters for older versions of Internet Explorer. Since I prefer to keep things simple I only use the W3C version with a background color specified for older browser. If you really care about older versions by all means copy all the css provided with proprietary prefixes for Firefox, Safari, Opera and Internet Explorer.

Because some browsers use margin and others use padding I simply 0 both out in my definition. So my full <body> definition is:

body {
    font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
    font-size: 1em;
    padding: 0;
    margin: 0;
    color: #000000;
    background: #066dab; /* Old browsers */
    background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */

Set off the Content

For my page structure I use IDs applied to the <div> elements already added to the page. Starting with the “#container” which gives us the white area for our actual page content. Since I’ve removed the margin/padding from the page I add an offset using margins on the container. If you have your Tools > Page Editor Options > Authoring set to  CSS 3 Draft you will have options like “border-radius” available in the CSS properties panel. Unfortunately, since EW hasn’t been updated in a couple years not all CSS 3 properties like linear-gradient are available. Others like box-shadow are available but without any help in the syntax you should be using. Fortunately, there are box shadow generators are available as well. As with the CSS gradient generator I only use the W3C standard format. So that I end up with:

#container {
    border: 1px #2B0082 solid;
    background-color: #FFFFFF;
    width: 90%;
    padding: 0;
    margin: 1em auto;
    border-radius: 12px;
    border: 1px #05517E solid;
    box-shadow: 0px 0px 30px rgba(0,0,0,.65);


I’m using a variant that is a combination of two of our earlier tutorials Responsive CSS Menu and CSS Simple Menu Bar so I will not walk you through creating it. If you need assistance in understanding the code used I’d suggest reviewing those two tutorials.


This is another section that reuses CSS from earlier tutorials but suffice to say the ID names should make it self explanatory. I can’t emphasize too strongly how important it is to use meaningful names when you are creating you styles.

Misc CSS

There are a few classes that I always use which illustrate why consistent meaningful naming conventions are important. These are: fltleft, fltright, clr and sometime clrright, clrleft.

For this site because I want the images to scale with the space available to for the page to render in.  Since I could easily image situations where I would not want to change the size/scale of an image I add a scalable class that is restricted to images.

img.scalable {
    height: auto !important;
    width: auto !important;
    max-width: 100%;
    border-radius: 5px;

For square images I created another class that would add a border and shadow that would mirror the content section style.

.fancy {
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0px 0px 30px rgba(0,0,0,.65);
In modern browsers you can apply more than one class to an HTML element. Just remember that the same inheritance rules apply so the order you use them in is important. Older browser will only render the first class in the list.

<img alt="whatever" height="420" src="images/1dunce.jpg" width="300" class="fltright" />

Making Responsive

Once I have the page looking how I want it in a browser I will move all the styles to an external stylesheet and attach it to the page. I leave a styleblock in the head section after the external stylesheet link which if I turn the page into a DWT will be in a separate editable region block so that I don’t have to worry about inheritance issues for page level styles.

Now that I have all my CSS in an external stylesheet I add an @media section which I always comment so I know what media I am targetting.

/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
/*media styles go here */

Now I look to see what needs to be changed to reflow the page and navigation to better suit a small viewport. In this case I want the page to linearize and the menu to become a block instead of wrapping which means there are 4 CSS definitions that I need to change to accomplish my goal. They are setting the #container from 90% to 100% (though this is not critical) but resetting the #maincol is along with removing the float. For the #sidebar you need to remove the 72% left margin and reset the #nav a to display block so the entire width of each hyperlink section will respond to click/touch. The CSS to do this is simple:

/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
#container {
    width: 100%;
#nav {
    margin: 0;
    padding: 0;
#nav a {
    display: block;
    padding: 0;
#maincol {
    width: 100%;
    float: none;
#sidebar {
    margin-left: 0;
What is probably the most important thing to remember with a media style block is the containing set of {} for the @media definitions. Leave off either the opening or closing curly brace and your media styles will fail.


Download the

of the folder I used for customizing or following along to create your own version. For another simple responsive page take a look at for the single page resume site remake.

Tags: , , ,

CSS | Templates | Training | Tutorial

Redesign–Day 7

by cdwise 15. March 2014 19:29

Okay, I initially said we weren’t going to do any WordPress themes but after consideration and looking at some of the sites submitted I decided to show how a few simple changes to a Wordpress preinstalled template can personalize a site.

Site is:

Which uses the twentyeleven theme. As submitted it looked like


By uploading a custom image for the header it already looks different:


But that sure takes up a lot of space so scrolling down from where uploaded the image to where it says Header Text and uncheck the option to display it:

clip_image001 Results in:


Finally, by adding the following CSS to a custom stylesheet:

.custom-background {
    background: rgb(249,249,251);
/* Old browsers */
    background: linear-gradient(45deg,rgba(249,249,251,1) 0%,rgba(215,214,219,1)
19%,rgba(249,249,251,1) 49%,rgba(215,214,219,1) 87%,rgba(249,249,251,1) 100%); } #page { box-shadow: 10px 10px 5px #A7A7A9; }

We get a nice drop shadow effect on the page with a diagonal gradient background, all done with CSS :


Not including the time to create or edit the image used you have a custom look in less than 10 minutes.


CSS | Web Design | Training | Mac

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:

<!--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 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.


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:


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):


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.


You can view it at
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.


CSS | Training | Web Design | Dreamweaver | Expression Web

Redesign–Day 4

by cdwise 11. March 2014 23:59

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


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.


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 and in case the original is made over either using our redesign or another here is the original.


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.


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"

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:

<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 ( 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:


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.


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:



CSS | Review | Web Browsers

Outstanding Hosting