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);
}

Navigation

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.

Columns

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.

Final

Download the Simple-Responsive.zip

of the folder I used for customizing or following along to create your own version. For another simple responsive page take a look at http://by-expression.com/post/2014/03/10/Redesign-Day-2 for the single page resume site remake.

Tags: , , ,

CSS | Templates | Training | Tutorial

SuperPreview-CSS 3 and more

by cdwise 19. March 2009 00:06

Hate troubleshooting browser display issues? Check out Super Preview announced today http://blogs.msdn.com/xweb/archive/2009/03/18/Microsoft-Expression-Web-SuperPreview-for-Windows-Internet-Explorer.aspx I suspect that will be demoed during the Expression Web Session at MIX09 and may even make the keynote. Check http://mix09.visitmix.com if you want to catch the sessions online.

If you were at the MIX workshops yesterday I hope you checked out Molly’s session. If not, and you didn’t make it over to South by Southwest you can get the slides from the CSS 3 panel from her site at http://www.molly.com/2009/03/18/css3-panel-slides-from-sxswi/ 

Technorati Tags: ,,,

Tags: , , ,

Expression Web | Web Design | CSS



Outstanding Hosting