Responsive CSS Menu

by cdwise 8. January 2017 20:05

Given the interest in responsive design I've been seeing I thought I'd show you how to create a simple horizontal menu that turns into a stacked vertical menu on cellphones and other small format devices.

I'm going to begin with the CSS 3 Horizontal menu tutorial.

Then create the @media styles so that when viewed on a cellphone or other device.

Move to External Stylesheet

To accomplish this the first thing I would do is to move the existing styles to an external stylesheet.

new CSSTo do that right click on the local site folder you are working in and create a new empy css file. Typically I would name by stylesheet the same as the website. In this case I've named it "responsive.css".

drag stylesheet to the pageNow from the Folder list grab the newly created stylesheet with your mouse and drag it over the design portion of your open page in the document window and drop it.

This will create the link <link href="responsive.css" rel="stylesheet" type="text/css" /> to the external styelsheet for you.

style moved to external stylesheet select and drag stylesNow when you look in the Manage Styles panel you will see three sections. The first "Current Page" section refers to all the styles that we created for page layout and the existing menu. The second "Current Page" section applies to the conditional IE 8 and lower styles. Finally, you will see an empty "responsive.css" section. If you select all the styles in the first Current Page you can drag them down to the responsive.css page. This is the fastest and easiest way to move your styles from the page to an external stylesheet.

Alternative Styles

This is the point where you have to make a decision on what changes you want to make to your site when it is viewed on a mobile device. There are several ways you can send a separate set of styles to different devices or screen sizes.

  • @media screen and (max-width: 480px) in the head section of your page works well when you only need to over ride a few styles but it is cumbersome to maintain.
  • Using a media query to send a secondary stylesheet which is the method we'll be using here.
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
  • Finally, using javascript or jQuery which is more difficult but maybe necessary if you are using dropdowns, flyouts or other more complex menus.

Since Expression Web design view is limited in what it can do, even the styles used in the menu do not render correctly in design view.

 

does not understand or render @media queries I find it best to start with regular styles in the head section below the conditional comment section for IE 8 and below. That way I can set a temporary width of 480px for the site container to see the affect in design view and when previewing locally. Now you will have an approixmate view of what the page will look like as you create the styles and a better view when you preview in browser. With a new size on the container you can see that we need to make changes.

Just by adding:

#nav a {
display: block;
}

You can see that the design view display already looks better while it is almost acceptable in the browser:

square links in design view

as shown in a browser

What makes this unacceptible in my view is unequal margins with the left side being away from the side of the viewport. This is another decision point. One option is to keep them as rounded buttons but to center them in the browser by adding:

 

#nav ul {
margin: 0;
padding: 0;
}

 

Which gives us:  

Alternatively you can leave padding on the #nav ul at 0 and remove the rounded borders by adding "border-radius: 0;" to the #nav a in our new head section style block:

 

 

My personal preference is for the edge to edge display but yours may vary.Whichever you choose is is now time move these styles:

either to an @media head section:

<style type="text/css">
@media screen and (max-device-width: 480px) {
#container {
width: 480px;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav a {
display: block;
border-radius: 0;}
}
</style>

Or you can move them the bottom of your current stylesheet which is what I have done. You should also be able to an external stylesheet but when I do so it seems to break in IE 10 and Windows Phone. If you want to try it the syntax is:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

One Last Change

Before you start testing on your mobile device let's make one more change and that is to remove the 480px restriction on the width in your mobile styles and change it to either 100% or 96% if you want a bit of the purple sides to show. That way it will resize to fit the width of your mobile device screen.

If you want you can also set break points for other common device sizes like 800px for some tablets in portrait orientation. Have fun playing playing with your site.

Try the finished page with your browser or mobile device.

One last note, Internet Explorer below IE 9 doesn't support media queries so if you are concerned about resizing your layout for various browsers sizes in older versions of IE you can use http://code.google.com/p/css3-mediaqueries-js/ though frankly I don't see the need.

Tags:

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 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:  needhelp4mac.com

Which uses the twentyeleven theme. As submitted it looked like

image

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

image

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:

 image

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 :

image

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

Tags:

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:

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

by cdwise 12. March 2014 23:12

Our Day 4 redesign is TADA Productions, a non-profit theatre in Lincoln, Nebraska. The first impression we had when viewing the site “hello 1998”. TADAoriginalThe ticket images for the menu are sort of cute but reminds me of something you’d see at a production in the church reception hall, not a professional company. There are so many issues with this site that this review can only touch on the worst issues with the site.

Like many people I have a high resolution computer screen and found the text hard to read. The theater address is in such a light font it broke up while the last line of text was so small as to be impossible to read. As a result I went to resize the text using my browser tools (Firefox “View > Zoom > Text Only, Internet Explorer “View >Text Size”) and nothing happened. On closer inspection I discovered that almost all the text on the page is contained in an image.

imagePutting all your text in an image creates a host of problems not limited to:

Accessibility – as you can tell from the image to the right without images there is no content for the visitor. While some site owners might say, “so what, blind people are not my target audience”.  But many people who are sighted browse with the assistance of screen readers either because they have dyslexia or find reading text difficult due to a physical condition such as macular degeneration.

Besides which most governmental entities from municipal governments all the way up through the state and federal level have accessibility requirements. While they can’t force a personal site to be accessible if you get any sort of federal, state or city money accessibility is part of the package for grant money. Even many art councils and other funding sources require that those they fund be accessible to the disabled including both physical premises and websites.

Google, Bing & other search engines -  are the biggest and often most important blind person looking at your website.  Looking at the screen capture above right to see exactly what search engines and anyone else who can’t read the content from images sees when they visit this site.  Search by production name for plays in Lincoln, Nebraska and this site doesn’t show up in either Google or Bing though their facebook page did.

Usability

Framesets like the one used on this site not only went out of use over a decade ago they prevent the visitor from being able to bookmark an individual page such as a particularly play they are thinking of attending. It also means they can’t send a link to a friend to encourage them to attend the play either.  Besides there is absolutely no reason using modern template methods that the exact same look could not be done without using frames.

Movement on a website attracts the eye which means that the Flash slide show in the top frameset will distract the visitor from whatever content is in the main frame. In addition, the Flash slideshow did not always  work properly in Internet Explorer. Far better solution would be to use a modern css/javascript slideshow which also contains information on the productions.

One Mandatory Fix

SNAGHTML2fa00a1Get real content on each page, and by real content we mean text as text. That way people can actually read about the theater and its productions. Search engines can find the site, index the productions and let people find the site.

This could easily be done without changing the look/feel of the site hardly at all as you can see from the screen shot of a minimalistic makeover that uses the same design elements but brings content to the forefront in a useable format.

While the site still looks like a 1990 something website removing frames and putting real text instead of all images or worse yet images of text makes the site far more visitor friendly.

Better Yet

Bring the site out of the 1990s and get rid of the flash header. Put a slide show that has each of the productions with information about the production on the slide in plain text. I chose a different slideshow from the one used on the astronomy site just to feature a different type but the exact slideshow that would best showcase their upcoming productions is up to the theater.

Finished version with slideshow

SNAGHTML3000102

The html5-slideshow-maker used is the free version with credit both in the head section and in the last slide so if one of its 60 templates is used I would suggest purchasing the application to remove those credits and give you a few more customization options. At $14.95 (mac) or $19.95 (windows) for a full license the price is certainly reasonable for the function it provides.

Tags:



Outstanding Hosting