CSS Design Tipsyou know enough css to be dangerous

“Anything design related - push to extremes and then dial back for taste”

-me

“Designing in the browser with any value - nudge, nudge, nudge, too far, back one”

–also me

Hypertext Narrative common design problems

portal project link

images NOT optimized

background image too “busy”

css hover state (should be a hyperlink not hyperactive)

Optimize your imagesREQUIRED

some were 6000x4000 and 9mbNO NO NO NO NO NO NO NO NO and NO

should be 100-150kb not 9000kb

body background images -save for web in PSresize width to 1024px and compress as jpg

foreground images - resize in save for web (PS) to ACTUAL SIZE for the web page

html img tag attributes height and width now banned

Background Image (careful….)

can be distracting/conflict with your content

put a transparent color layer behind your content to separate it from background image

css hover state

visual feedback = good

disruptive experience = bad

text should not jump around on the page when you “mouse over”

nav links

links are a list <ul><li><a href=“#”>link</a></li></ul>

use css to get rid of underline, bullet points, and put them in a row (horizontal nav)

nav a -define font family, size, padding, remove underline

nav ul li -remove bullet points, display inline-block (horizontal row), add margin-right to space apart

nav a:link, nav a:visited, nav a:hover, nav a:active -define colors.

css resetuser agent styles (browser styles)

problem is every browser defines the user agent styles differently

solution is to reset them all

* {margin:0; padding:0;} = easy

add back in margin-bottom to headings, paragraphs and lists

advanced css reset

normalize

https://necolas.github.io/normalize.css/

covered in “creative dev tools” course

Moodboard

type of collage consisting of images, text, and samples of objects in a composition

visually illustrate the style they wish to pursue