The way we read on the web can be totally different if your reading a book or paper
- - You will be more impatient
- - You will just want the website to “give me the info without having to do any effort”
- - You won’t want to wait
- - Speed is very important – there is so much on the web that you don’t have time to waste!
Good things to follow with website text
- - Use the inverted pyramidformat for structuring your writing. Basically this means you give away the main point of the article right at the start, and then gradually reveal details further into the article. This is similar to how newspaper articles are written, yet it’s the opposite to what you may have been trained in High School English classes or other technical writing.
- - Don’t be trapped into creating fluffy marketing guff just to fill a space. Empty marketing text is both annoying and patronizing to your users. Cut it.
- - Be aware of the F-shaped reading patternthat users unconsciously use when reading the web.
- - Remember to look back to your keyword research from the planning stage of this project. You need to work your keywords for each page into the text (headings, sub-headings, captions, articles, links and anchor text etc).
CSS Positioning techniques
Floats
Each box-type object can be floated. e.g.
<div>
<img src=“path/file.jpg” />
<p>This is my text here.</p>
</div>
img {
float: left;
}
Floats usually affect everything on the page below (or after) the element that you apply them to. This can cause major havoc, so you need a way to turn floats off once they have served their purpose. Use the syntax:
div {
clear: both;
}
To remove both left and right floats below the point where you apply it.
Margins
Margins on box elements push the box away from other elements around it. To apply a margin:
<div>
<img src=“path/file.jpg” />
<p>This is my text here.</p>
</div>
img {
margin: 20px;
}
If you apply one number (margin: 20px;) then the margin will be put on all sides. You can set top+bottom and left+right together (margin: 20px 40px;), this will give 20px on the top and bottom margins, and 40px at the left and right margins. Using the clock model you can specify different margins for each side of the box (margin: 10px 15px 20px 40px;), this reads like a clock top, right, bottom, left.
Padding
Padding is on the inside of the box, it pushes the box content away from the walls of the box. Padding also adds to the overall dimension of a box. So if I have a 400px square and I add 5px padding to it, then the square will actually grow bigger to measure 410px. Applying padding:
<div>
<img src=“path/file.jpg” />
<p>This is my text here.</p>
</div>
div {
padding: 10px;
}
The clock method also works on padding.
Positioning
Usually to add positioning, have a number of pixels from the top and a number of pixelsfrom the left.
To do this with the image:
<div>
<img src=“path/file.jpg” />
<p>This is my text here.</p>
</div>
img {
position: relative;
top: 30px;
left: 60px;
}
Note:
- relative; means “move this image relative to where it normally is in the page flow.
- absolute; which means “move this image in relation to the 0,0 point top left in the bowser window.
CSS Inheritance
Inheritance is the process by which some CSS properties applied to one tag are passed on to nested tags. For example, a <p> tag is always nested inside of the <body> tag, so properties applied to the <body> tag get inherited by the <p> tag.
A CSS property can be set in one location, and automatically applied to many tags. That saves you from writing it over and over again.
CSS Specificity
Is basically the process the browser uses to decide which CSS property should apply. CSS provides a formula for determining a styles specificity which is based on the type of selector used.
- HTML element (or tag) selectors are worth 1 point. Examples: body p h1 strong div
- Class selectors are worth 10 points. Examples: .cats .nav
- ID selectors are worth 100 points. Examples: #dogs #sidebar
- Inline styles are worth 1000 points. Examples: <p style=“color: red;”>This is some important text.</p>
