HTML5 and IE support fix

Fairly recently I have started to work on a new layout and re-code of my business website Apple Gate Studios. I decided to take a look at using HTML5 and CSS3. Now after a while I got my design to how I wanted it to look using Chrome. I thought I had better test the site in the other browers before I go to far into the build and end up having to do alot of code fixes for Internet Explorer.

Now when I loaded the site into IE, I noticed that the navigation was out of align, there was no logo and a few other things were completly broken or out of place. Doing a bit of research I found that IE doesn’t still fully support HTML5 without some “Fixes”.

Once these “Fixes” were in place, everything jumped back into place, no extra adjustments needed just the following code, to allow Internet Explorer to be able to support HTML5.

If you need it feel free to use my code, Just place the below code into the <head> of your HTML5 document and IE will support HTML5 šŸ™‚

<!– IE HTML5 Fix –>

<script type=”text/javascript”>

document.createElement(‘header’);

document.createElement(‘hgroup’);

document.createElement(‘nav’);

document.createElement(‘menu’);

document.createElement(‘section’);

document.createElement(‘article’);

document.createElement(‘aside’);

document.createElement(‘footer’);

</script>

<!– End fix –>

Advertisements

Template or not to Template that is the question…

2 column fixed width layout? No problem!

Ok, so you want to have a 2 column effect for your website but don’t know how to go about it so you don’t have to re-edit it for other browsers (IE)? No problem, first off start by laying out your div tags in the HTML of your site, something like this:

<div id=”maincontent”>
<div id=”contentLeft”></div>
<div id=”contentRight”></div>
</div>

The reason you have three divs needed for the layout is the main one is a holding div, noticed it’s closed outside of the contentLeft and contentRight, this means we can set the width and alignment of both left and right contents without breaking the layout.

Start off in your CSS file by targeting the maincontent and setting it at the desired width, for my example I am going to use 950px wide so it fits within the 1024×768 monitor resolution with equal space around the sides.

#maincontent {

width:950px;

margin-left:auto;

margin-right:auto;

}

So that’s the main content size sorted out, we will come back to this a little later. Next off the left content.

#contentLeft {

float:left;

display:inline;

width:460px;

margin:5px;

}

And now for the right:

#contentRight {

float:right;

display:inline;

width:460px;

margin:5px;

}

Job done. Always make sure that the width of the contentLeft and Content Right are smaller than the overall width of the maincontent, taking into account the margins and paddings applied to each. If you have one section that is offset and apprears lower than the left content adjust the width or margins till it sits in place next to each other.

The last thing to add is a clear:both to the main content. The clear property specifies which sides of an element where other floating elements are not allowed:

#maincontent {

clear:both;

width:950px;

margin-left:auto;

margin-right:auto;

}

Basic bulleted list? No thanks!

I have recently been designing a new landing page for a project, in which there was the idea that instead of the normal bullet mark for lists like the one below they wanted a custom two arrow to match with the branding and design of the main website.

  • Normal Bullet

So the custom bullet was to be like >> but as an image and in the company colours. The final version came out like this: Custom bullet

Now its fairly easy to replace a bullet for a list item, but you need to make sure you do it the correct way so it works in all browsers. The best practice is to use the bullet image as a background for the bullet and position it to the left of the image, initially over the top of where the old normal bullet dot would be. This is all done in CSS, so there is no need to customise your current HTML files in order to do this.

Ok so first off, for this example my navigation I want to use has a ID of #maincontentNav (you can change this to whatever you want yours to be called). In the CSS of your site set the #maincontentNav to have no list style type.

#maincontentNav {

list-style-type:none;

}

Then you will need to target the list items so you can place a custom bullet in. To do this you will use the method of background image, adjusting the paddings and margins accordingly.

#maincontentNav li {
background: transparent url(“arrows.jpg”) no-repeat 0 7px;
padding: 3px 0 3px 25px;
margin-right:80px;
font-size:2em;
}

As a rule of thumb, always set your font-sizes in ems if you want the design of your site to stay in form when the text is enlarged. You should now have the desired effect. By adjusting the “7px” on the background image will move the bullet point up or down, so you can center it to your text.

My final outcome with the custom bullet:

Dealing with Clients – being professional

A number of issues that new designers come accross is how to deal with clients to make sure they get the required amount of company information to be able to start a design brief. Often clients will say: Ā “We want this to reflect our business” without actually giving any details of how many pages they need, what colours, layout of the page, etc. The tricky thing is to get the clients to give you the copy for the website so you can build a design template for them, so they can see what it could look like without having to use the latin replacement text often used by designers. Then of course is the issue of payment, how much do you charge, when should you invoice etc.

When first dealing with clients always ask them who theirĀ competitorsĀ are, either get this by email or phone them and write it down, then go and investigate these sites and come up with some first design ideas based on a section of what you think is the best bits from the sites. Check with the client if they have a logo and if they have guidelines that need to be followed. This would then give you the colours and possibly fonts that the company uses for print media that you can use to make the website designs look corporate and in keeping with the company.

Before you do any major work, submit an cost proposal to the client (fixed package rate is normally preferred rather than hourly rates), always as a rule of thumb ask for 50% upfront,Ā in caseĀ it goes tits up, you haven’t lost on the time you spent doing the designs for them. Once you have this, come up with around 3-5 designs based on what information the client can give you and by using the competitors sites as an idea net. Submit the designs to the clients 2-3 days after you start so they can give you feedback on what you have done, to save you time designing something they are not fully happy with. Always get the client to sign off on a design, either by email or over the phone and keep a note of which design, who approved it and when it was approved as proof, otherwise they may come back later in the process and say “We didn’t ask for this one, it’s nothing like we wanted, start again”.

Once approved you can then start the build. Start by laying the design out on paper and working out how many sections you need and where they should be placed, have an idea of what size site you are designing for. If the client asks for how long it will take, have a think based on your skill level and add a week on top of your guess so if anything goes wrong with the build you have time to fix it before the deadline. Keep in contact with the client every few days to let them know of your progress and if possible send them a link for them to have a look.

When you have build the first page to the design for the client send them the link and ask them to give feedback, once approved you can continue with the rest of the pages. Remember if you haven’t got the content for the website by now chased the clients for it and let them know that it’s holding you back from finishing the design of completely. If you don’t hear back after a couple of days, finish off the build of the site using text fillers (loreum ipsum) and send it over to the clients once filled out. It’s then up to them to supply you the content to finish their site.

Welcome

Hi all,

I recently decided to get my blog back up and running after a few years of not updating the old one. The reason you ask? Well the purpose of this is to give new designers a place to come when they need help with design, html or css issues as well as putting up a few templates and ideas to help people get started into the world of web design.