designing for the web - 101
TRANSCRIPT
DESIGNING FOR THE WEB - 101
Ashraf Hamdy
WHO AM I?
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)
PRESENTATION CONTENT
Introduction about designUnderstanding the browserHTML page structureBasic HTML componentsContent VS styleCSS selectorsBlock elements VS inline elementsCSS box model
CSS floatCSS position statesCSS Specificity And InheritanceAtomic web designResponsive designDesigner starter packWrap up and questions
INTRODUCTION ABOUT DESIGN
Which is design and which is not?
Definition of designA 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
UNDERSTANDING THE BROWSER
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 inspectorWhen in doubt, always right click then “Inspect element”
HTML PAGE STRUCTURE
HTML as everything else, contains a head and a body
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"><title>Lorem ipsum</title>
<!-- Bootstrap --> <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
Basic HTML componentsHeaders: <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
Content VS styleThe 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
CSS SELECTORS
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
How to style an HTML element?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
How to style an HTML element?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
How to style an HTML element?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?
CSS BOX MODEL
The box modelSince any HTML page consists of lines of text and boxes, we need a way to control those boxes..
If we saiddiv {
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
CSS FLOAT
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 problemsThe 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 STATES
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 positionPosition: 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 browserThen you move the element by setting top, left, right, bottom values.
z-indexAnother 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 specificdiv.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?
!importantWhen 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?
InheritanceSome 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
ATOMIC WEB DESIGN
RESPONSIVE DESIGN
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.
Examplep{
font-size: 14px;}
@media (min-width: 320px) and (max-width: 768px) { p{
font-size:16px;}
}
And it works for height too!
DESIGNER STARTER PACK
• 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
WRAP UP AND QUESTIONS