SUPER SIMPLE FULL PAGE PRELOADER

Brent Lagerman — Fri, 14 Sep 2012 22:42:50 +0000

Here’s a super simple pre-loader that you can add onto any type of project

We put it on CodePen to make it easy to see it working:

See the Pen SUPER SIMPLE FULL PAGE PRELOADER by Brent Lagerman (@mimoYmima) on CodePen.

The post SUPER SIMPLE FULL PAGE PRELOADER appeared first on mimoYmima.

Browser Specific Stylesheets

Brent Lagerman — Fri, 06 Nov 2009 20:04:00 +0000

It’s unfortunate, but all browsers don’t use the same rendering engines to show web pages. This means that the same combination of HTML and CSS can look different on different browsers. Figuring out how to make your site look the same on all browsers is a big part of web design.

First Thing: Clean Code

You want your HTML and CSS to be W3C compliant. This means that you should validate all your pages. You should not use tables for layout purposes, and you should keep all the CSS in external stylesheets.

While you are writing this clean beautiful code you should use Firefox to see what the page looks like. Firefox (to my knowledge) renders pages closest to the W3C standard.

IE6

Once you have the general layout looking good in Firefox you should take a look at Internet Explorer 6. If you don’t have a copy you can get a quick screenshot of any page by going to NetRenderer or Adobe Browser Labs. If you’ve used CSS for your layout, you’ll probably see some problems with the way the page looks. Many problems can be worked out just by seeing what they are and rethinking your CSS, but you will get to many points where you just need to tell IE6 a few things that you don’t want to tell other browsers.

Conditional Comments for IE

Conditional comments are special comments that are understood by IE and are used to feed just certain versions of IE pieces of HTML that the rest of the browsers in the world will ignore. When you make the head of your HTML pages you should use these special comments to feed IE6 a specific stylesheet and also one for IE7. With these “hack” stylesheets we will help them to look like the rest of the browsers out there.

Separating your IE hacks also means that your good meaningful styles are in one sheet and your hacks in another, so later when nobody uses IE6 anymore you can throw out the hacks easily.

Here’s a copy of the head of our documents which shows you how we include the normal and the “hack” stylesheets.

<head>
<title>Cross Browser Stylesheets ~ mimoYmima</title>
<link rel="stylesheet" href="/css/basic.css" media="all" />
<link rel="stylesheet" href="/css/screen.css" media="screen" />
<link rel="stylesheet" href="/css/print.css" media="print" />
<link rel="stylesheet" href="/css/handheld.css" media="handheld" />
<!--[if lt IE 7]><link rel="stylesheet" href="/css/ie6.css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="/css/ie7.css" media="screen" /><![endif]-->
<meta name="description" content="Add your page description here." />
<script type="text/JavaScript" src="/includes/global.js"></script>
</head>

In this bit of code we get all our normal sheets: basic.css, screen.css, print.css, and handheld.css (if you only have one sheet reference it instead) and then after that we pick up hacks-ie-win.css with a conditional comment as well as hacks-ie7.css.

Example Files

The files in this example package show the working relationship between the different stylesheets and the index.html file.

download the example

mYm Dev Feed

The post Browser Specific Stylesheets appeared first on mimoYmima.

HTML links

Brent Lagerman — Fri, 06 Nov 2009 20:28:41 +0000

HTML, it’s at the root of all web pages, you cannot be a good web designer without knowing HTML

A List Apart: Great online magazine for learning all kinds of web design techniques.
XHTML: The Definitive Guide: This is a good place to get started, and also something that you will be able to go back to throughout the years as you have questions
Validate Your Site: Validates your entire site (up to 100 pages anyway). You can also target directories to get the rest if you have over 100 pages.
XHTML Character Entities: By far the best reference for Character Entities
HTML Email Design: Some advice for HTML emails
24 Ways: Similar to this page, 24 Ways is a collection of links to other tutorials.
Vitamin: A online magazine for learning front end development techniques.
HTML Form Security: Techniques for improving the security of web forms
More HTML Form Security: Techniques for improving the security of web forms

The post HTML links appeared first on mimoYmima.

HTML – mimoYmima