Tips and Tricks

Tips and Tricks for Website Design

CSS Default

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

Could also use * as a selector for everything before the {. This statement should be used as the first line in the CSS for every website.

Notable CSS Pointers
  • set a's to display:block so the whole row is clickable.
  • Using position:relative allows us to position child elements using absolute values.
  • Using a text-shadow makes the text look as though it's been imprinted into the interface.
  • Center elements vertically by positioning it at 50% and applying a negative margin equal to half its height.
HTML5 tags

You do not need to wait for semantic tags to be supported before you can start using other aspects of HTML5.
HTML5 allows you to use multiple instances of the < header> tag on a page. However ARIA restricts the use of banner to the main header or logo. For section headers, set the role attribute to heading or omit it entirely.

Rounded corners, drop shadows and text shadows

The small amount of extra work needed to add the vendor-specific prefixes to create rounded corners and drop shadows with CSS3 is more than made up for by the time saved in not having to create the same effects with graphics. Your pages load more quickly, too, because there are no images for the browser to fetch.
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
The text-shadow property accepts an optional forth measurement to define how far the shadow spreads in all directions. This is rarely used and is not supported by Dreamweaver subpanel.
When inset is used, the shadow is applied to the opposite sides of the element. Although this might seem counterintuitive, positive values cast the shadow to the right and down, so it needs to be applied to the left and top sides to remain inside the element. It might help to think of positive values putting the light source at the top left of the page.
If you set the color first, you can see the effect of the drop shadow as you adjust the other values.
Opera and IE 9 recognize the standard box-shadow property. Earlier versions of IE ignore the entire style rule.

Live view

Live view currently supports the W3C border-radius and text-shadow properties, but not box-shadow. To apply a drop shadow on and element, you must choose -webkit-box-shadow from the Categories view of the Properties pane.
Live view is powered by the WebKit engine, so the only vendor-specific properties it renders are those prefexed with -webkit.

Opacity in CSS

The opacity property affects not only the element it's applied to, but also all of the element's children.
Instead of using opacity use rgba().

Color Picker

The Color Picker panel always displays the opacity value as 1, even if you have changed it. When the panel closes, Dreamweaver preserves your origanal opacity setting but rounds the number to one decimal place. For example, 0.25 is rounded up to 0.3.

IE Conditional Comments

IE conditional comments are extreamly useful for hiding from other browsers code that you want to be seen only by IE.
The basic structure of an IE conditional comment looks like this: < !--[if condition]>Content seen by IE< ![endif]-->
Less than or Equal to IE8 Conditional Comment: < !--[if lte IE 8]>style sheet code< ![endif]-->

Organizing the Styling Rules

Three main approaches to organize rules for use with media queries:

  • Full style sheet for each type of target device. Link to each one with a media query. The advantage is that each set of rules is independent from the rest. The disadvantage is that if you make a change that should be applied globally you need to make the same changes to each style sheet
  • Common style sheet plus specific overrides. Locate all basic rules in a common style sheet, and then use media queries to attach separate style sheets to override only those rules that need to be different. Requires a strong understanding of the cascade.
  • Single style sheet with @media rules. Locate all rules in a single style sheet and use media queries in @ media rules to target different devices. This reduces the number of server requests, but it results in mobile phones needlessly downloading the styles aimed exclusively at tablets and desktops. Also results in a long style sheet which can be hard to maintain.
@import

You can attach an external style sheet in two ways: with the HTML < link> tag or with a CSS @import rule.
Because they are part of CSS, @import rules can be used only inside a < style> block.

Centering an Image

To center an image, set its display property to block, and set the left and right margin to auto. The image must have a declared width.

.htaccess

.htaccess file is a mini-configuration file for the Apache web server. It has the advantage that all the settings are applied immediately without the need to restart the server. Normally, an .htaccess file is located in the site root and applies to the whole site. However, you can apply different settings to individual folders (directories) by placing an .htaccess file in the folder you want to control.

jQuery Mobile Notes

Normally IDs should be unique within a page but can be reused on other pages. However jQuery mobile uses DOM manipulation to load content from external pages into the current page, so IDs should be unique within the site rather than just within the current page