Designing for the web - 101

DESIGNING FOR THE WEB -
101
Ashraf Hamdy

Started learning about design in 2010
Graduated from FCI – CU in 2013
Working in Orange Labs as a Full-Stack
Designer
(User experience design, Visual design and Front-end development)

Introduction about design
Understanding the browser
HTML page structure
Basic HTML components
Content VS style
CSS selectors
Block elements VS inline elements
CSS box model

CSS float
CSS position states
CSS Specificity And Inheritance
Atomic web design
Responsive design
Designer starter pack
Wrap up and questions

Which is design and which is not?

Definition of design
A specification of an object, manifested by
some agent, intended to accomplish goals,
in a particular environment, using a set of
primitive components, satisfying a set of
requirements, subject to some constraints

The browser is the only channel between
you and your user, so technically it’s your
messenger.
But be careful, because it doesn’t tell you
the errors in your code. It follows you blindly.

The browser inspector
When in doubt,
always right click
then
“Inspect element”

HTML as everything else, contains
a head and a body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lorem ipsum</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<!– Your main code will be here-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Basic HTML components
Headers: <h1></h1> … <h6></h6>
Paragraphs: <p></p>
Anchor link: <a href=“index.html”></a>
Image: <img src=“photo.png”/>
Block element:
<div>
<h1>This is a header</h1>
<p>This is a paragraph</p>
</div>

Content VS style
The purpose of design is to enhance the presentation of the content it's
applied to.
So the next time you’re building a page, always start with typing your
HTML first in an organized way and then begin to style it.
Also you shouldn’t write unnecessary HTML just to push a <div> a little
bit to the right. No, content is content and style is style.
Example 1: http://www.w3schools.com/css/css_intro.asp
Example 2: http://jgthms.com/web-design-in-4-minutes

How to style an HTML element?
You can point to the element directly
<p>This is a paragraph</p>
p {
color: red;
}
This way all the <p> elements in the page will be colored red

Or you can point to a class and add this class to your HTML elements
<h1 class=“red”>This is a paragraph</h1>
<p class=“red”>This is a paragraph</p>
<p>This is a paragraph again</p>
.red {
color: red;
}
This way all the elements with class “red” in the page will be colored red

Also you can point to an id and add this id to your HTML element, but be ware that the same id
shouldn’t be assigned to multiple elements on the same page.
<h1 id=“red”>This is a paragraph</h1>
<p class=“red”>This is a paragraph</p>
<p>This is a paragraph again</p>
#red {
color: red;
}
This way the <h1> with id “red” only will be colored red

And you can add multiple classes to the same element
<h1 class=“text red”>This is a paragraph</h1>
<p class=“text red”>This is a paragraph</p>
<p class=“red”>This is a paragraph again</p>
p.text.red {
color: red;
}
Do you know which element should be red in this case?

The box model
Since any HTML page consists of lines of text and
boxes, we need a way to control those boxes..
If we said
div {
width: 500px;
height: 100px;
padding: 50px;
border: 1px solid black;
margin: 50px;
}

But beware of a little trick..
There’s an attribute called “box-sizing” that takes one of two values,
“border-box” or “content-box”.
The border-box will make the element width/height fixed, then the
border and padding values will be taken from the width. So the element
width will stay the same when you change the border or the padding.
But the content-box will make the element viewed width/height
change based on the value of the border and padding. Also content-
box is the browser default value for the elements.

BLOCK ELEMENTS VS INLINE
ELEMENTS

The display CSS attribute is responsible for how the elements stand next to each other in the
page.
A display:block; element for example will take the whole width of its parent and the following
element will begin after it.
A display:inline; element will be placed next to the previous element (if it’s an inline too)
But be ware that width and height don’t get applied for inline elements, margin and padding
gets applied horizontally only.
That’s why they made a display:inline-block; to let the elements appear next to each other
and also treated as block elements to customize their width, height, margin and padding
The display CSS attribute

Example: http://codepen.io/huijing/pen/PNMxXL

The float property is widely used in styling the page layout, and it’s one of the
most confusing properties to deal with.
It usually takes one of three values:
float: left; This takes the element out of the normal document flow and pushes
it to the left of its parent
float: right; Same behavior but for the right
float: none; Removes the float and brings back the element to the normal
document flow

Float problems
The most encountered problem while using float is that a non-floated parent
element won’t take the height of its floated children
So how to solve this problem?
1. By adding an empty element (usually a <div>) and assigning it a
clear:both; attribute, this attribute removes the float effect of the previous
element and lets the parent element to have a non-floated child to take the
automatic height. But this is not the best fix.
2. A more optimized one is by adding a overflow:auto; attribute to the
parent

CSS position is mainly used when you want to take an element out of its
normal flow in the page.
It takes 3 values, besides the top:
Position: relative; it lets you move the element in relative to its original
position
Position: absolute; it lets you move the element in relative to the boundaries
of its nearest relative parent.
Position: fixed; it lets you move the element in relative to the boundaries of
the browser
Then you move the element by setting top, left, right, bottom values.

z-index
Another issue will occur when you start moving elements
out of the document flow, for example they might
overlap, then how do we choose which element to be on
top of the other?
By using z-index. It takes values from 1 to the max
number you can write, then they are ordered by this
value

CSS SPECIFICITY AND INHERITANCE

So what happens when the same element gets
assigned 2 colors in 2 different classes or any
overlapping style in the code?
The browser reads the CSS files in a sequential
order, this means that the last valid attributes always
override the previous ones, but there are some
exceptions.

If the CSS selector is more specific
div.main-section p.main-text{
color:black;
}
.red{
color:red;
}
<div class=“main-section”>
<p class=“main-text red”>Hello world!</p>
</div>
Which color do you think the <p> will has?

!important
When you add “!important” after the attribute value, it override all the other attributes for this
element.
.red{
color:red !important;
}
div.main-section p.main-text{
color:black;
}
<div class=“main-section”>
<p class=“main-text red”>Hello world!</p>
</div>
Which color do you think the <p> will has?

Inheritance
Some CSS properties are inherited by the children of elements by
default. For example, if you set the <body> of a page to a specific font,
that font will be inherited by other elements, such as headings and
paragraphs, without you having to specifically write as much.
To check the list of inherited properties:
http://stackoverflow.com/questions/5612302/which-css-properties-are-
inherited

Source: http://atomicdesign.bradfrost.com/chapter-2/

Responsive design is making your website’s
layout fit flexibly in any screen size.
This can be done by using “media queries”
They are like an if condition but for screen
sizes, and the style inside of it applies only in
the targeted screen size.

Example
p{
font-size: 14px;
}
@media (min-width: 320px) and (max-width: 768px) {
p{
font-size:16px;
}
}
And it works for height too!

• Muzli design inspiration: http://muz.li/
• Code academy for learning all web technologies:
https://www.codecademy.com/
• https://hackdesign.org/ a list of articles grouped in
lessons about the whole design package

Designing for the web - 101

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a Designing for the web - 101

Semelhante a Designing for the web - 101 (20)

Último

Último (20)

Designing for the web - 101