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

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

New Event Template

by cdwise 22. March 2013 22:33

I put together the first template (besides the Muse example) that has a separate display for small screen devices and uploaded it today. Check it out Team Clueless Rally

team-cluelessI used a scooter rally for “Team Clueless” which is a bit of an inside joke related to the Scooter Cannonball held bi-annually where folks are  challenged to ride scooters coast to coast with vintage scoots being ride of choice by the organizers. Because of the handicap system new and particularly larger displacement scoots would have an extremely difficult time winning so an alternate no handicap, no winner alternative had been playfully suggested.

The result was “Team Clueless” so I thought I’d use that premise for the latest template. It was also inspired by the distances some folks travel to events like Amerivespa and other rallys whether they are a scooter, motorcycle or car rally.

By swapping out the images and text you can use this template for any event whether it is a one day or multi-day activity.

Web Fonts

@fontface with Google web fonts provides the display font for the masthead in order to allow for a fancier type without having to worry about what fonts are installed on the visitor’s system.

CSS 3

CSS 3 rounded corner and box shadows are used in various places which will give a bit more life the site in modern browsers while still displaying with square corners and no shadows in older browser.

A CSS class was used to make the images scalable on small screen.

Media queries serve an additional stylesheet to phones and other small screen devices. Higher resolution/larger screen tablets get the same experience as a desktop user. To accomplish this with the registration form a little extra trickery had to be in the head section of the page which is documented on the register.html page in the site itself.

Let us know what you think of this new template. Available for download from our Template page.

Tags:

Templates

New Site Templates

by cdwise 25. July 2011 23:02

I’ve uploaded three new templates to our template section. They are:

550-siteBoy Scouts USA
On various forums, mail lists and other groups I participate in websites for Boy Scouts, Girl Scouts and other youth groups are a common subject that volunteer webmasters seek help with. Since I have two boys I’ve found myself the webmaster for one troop or another. As a result I've put together a template that can be used or modified. NOTE: The content in this site comes primarily from the Boy Scouts of America or Golden Arrow District websites which makes content available for troops and packs. Please check that your organization has permission to use the content on your site. Download the boy-scout.zip

camp-550Camp Escalante
This site will eventually be the basis of a new basic website tutorial created with Expression Web 4. In this version there is a simple menu with directories set up for the site to grow into a multi-level more complex site with a dropdown menu which will be added in a second tutorial to be created as a next level tutorial.  Unfortunately, I cannot give you a time line for when these two tutorials will be available since these are “spare time” projects when time permits. Download the basic Camp Escalante camp.zip

550-screenBlades of Glory
I used this site in a presentation at HAL-PC’s Web Technology and Design SIG some time ago. While the basic one page version of the site without a menu or contact form has been available as an attachment to a blog post I recently completed the site by adding at menu, four additional pages including a contact form and php based processing script.  Some source files for the masthead are included in the images section. If you use them you must credit this site for the images. Download the blades.zip

Support for these tutorials will be available as always in our companion forums template section.

Tags:

Templates



Outstanding Hosting