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

What do you do with an empty website

by cdwise 3. December 2008 02:29

Have you ever been stuck for where to begin with a new website? I don't know about you but there have been times where I just didn't quite know where to start whether on a site for myself, something to use in a tutorial or yes, even for a client.

So what do you do to get past that empty blank first web page?

First, I look at what the subject matter is for the site. If it is for a business I'll look to their logo assuming they have one for colors.

Then I'll look at any images the client provides or if there aren't any I'll think about the subject and go browse images at and see if there are any images that relate to the site topic and build my design from there.

If I am still stuck I may go over to CSS Zen Garden and browse there for inspiration. I may also use Google to bring up sites from companies that are competitors to see what they have done. (Sometimes this is very instructive on what not to do ) Remember that what you see as you browse the garden or competitor's sites that the purpose is not to copy any particular site but to get ideas on what you like or don't like for the website subject matter.

Once you have an idea about how the site should look you can start from scratch OR you can start with a high quality template and modify it to suit your needs. That is one reason we offer both site templates and single page basic layouts that you can use free of charge as a jumping off point.  However, we only offer a very limited number of templates and layouts that may not suit the design you have in mind.

Pat Geary, one of the moderators here on by-expression and a current FrontPage MVP has a website with Expression Web templates as well at Each of these Expression Web templates is css based using no tables for layout. These EW templates are written with an XHTML transitional doctype and have an external stylesheet. They are all F REE and while some are genealogy based, they are easily adapted for nay site. More genecology subject templates are available at

Where else can you find good free templates?

Note that these templates will not be Expression Web or Dreamweaver templates but page designs with graphics. You will have to convert the designs to a template for your editor of choice after you make whatever modifications to images, links and other bits you desire.

Make sure that you read the terms of use on for each template you may download. Some are free for non-commercial use while others may be free for use on both commercial and non-commercial sites. Others may require credit and link to the design author.

  • This month (December 2008) Smashing Magazine is offering 100 free xhtml/css templates you can download directly or others simply by registering.  Some of the ones requiring registration are offered as free downloads from Template Kingdom.
  • is a site from a single person Andreas Viklunk who offers templates and WordPress themes that can be used and customize but check his copyright and terms of use notice. He provides links to sites that have used and/or modified his templates as well.
  • short for Open Source Web Design is just what it says - an open source resource of web designs. Note that the quality of each template can vary since this is an open source project.
  • is another open source design site, one that hosts contests so again you get some variety in template quality.

If you know of any other template sites we should be listing let me know.

Tags: ,

Web Design

HAL-PC Presentation Files

by cdwise 23. July 2008 04:25

blades-thumbIf you are attending my presentation tonight at the HAL-PC Web Design SIG and would like to follow along you can download the source file Included in the zip file are the images uses and two text files of content. One for the main section and one for the sidebar.

A not quite complete version of what we will be doing looks like the image on the right.

What remains to be added is the menu that we will create (assuming time allows).

Tags: , ,

Expression Web

Outstanding Hosting