Designing for the web - 101
-
Upload
ashraf-hamdy -
Category
Design
-
view
31 -
download
0
Transcript of Designing for the web - 101
![Page 1: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/1.jpg)
DESIGNING FOR THE WEB - 101
Ashraf Hamdy
![Page 2: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/2.jpg)
WHO AM I?
![Page 3: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/3.jpg)
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)
![Page 4: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/4.jpg)
PRESENTATION CONTENT
![Page 5: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/5.jpg)
Introduction about designUnderstanding the browserHTML page structureBasic HTML componentsContent VS styleCSS selectorsBlock elements VS inline elementsCSS box model
![Page 6: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/6.jpg)
CSS floatCSS position statesCSS Specificity And InheritanceAtomic web designResponsive designDesigner starter packWrap up and questions
![Page 7: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/7.jpg)
INTRODUCTION ABOUT DESIGN
![Page 8: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/8.jpg)
Which is design and which is not?
![Page 9: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/9.jpg)
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
![Page 10: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/10.jpg)
UNDERSTANDING THE BROWSER
![Page 11: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/11.jpg)
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.
![Page 12: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/12.jpg)
The browser inspectorWhen in doubt, always right click then “Inspect element”
![Page 13: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/13.jpg)
HTML PAGE STRUCTURE
![Page 14: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/14.jpg)
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>
![Page 15: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/15.jpg)
BASIC HTML COMPONENTS
![Page 16: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/16.jpg)
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>
![Page 17: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/17.jpg)
CONTENT VS STYLE
![Page 18: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/18.jpg)
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
![Page 19: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/19.jpg)
CSS SELECTORS
![Page 20: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/20.jpg)
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
![Page 21: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/21.jpg)
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
![Page 22: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/22.jpg)
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
![Page 23: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/23.jpg)
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?
![Page 24: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/24.jpg)
CSS BOX MODEL
![Page 25: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/25.jpg)
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;
}
![Page 26: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/26.jpg)
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.
![Page 27: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/27.jpg)
BLOCK ELEMENTS VS INLINE ELEMENTS
![Page 28: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/28.jpg)
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
![Page 29: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/29.jpg)
Example: http://codepen.io/huijing/pen/PNMxXL
![Page 30: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/30.jpg)
CSS FLOAT
![Page 31: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/31.jpg)
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
![Page 32: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/32.jpg)
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
![Page 33: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/33.jpg)
CSS POSITION STATES
![Page 34: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/34.jpg)
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.
![Page 35: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/35.jpg)
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
![Page 36: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/36.jpg)
CSS SPECIFICITY AND INHERITANCE
![Page 37: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/37.jpg)
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.
![Page 38: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/38.jpg)
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?
![Page 39: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/39.jpg)
!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?
![Page 40: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/40.jpg)
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
![Page 41: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/41.jpg)
ATOMIC WEB DESIGN
![Page 43: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/43.jpg)
RESPONSIVE DESIGN
![Page 44: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/44.jpg)
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.
![Page 45: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/45.jpg)
Examplep{
font-size: 14px;}
@media (min-width: 320px) and (max-width: 768px) { p{
font-size:16px;}
}
And it works for height too!
![Page 46: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/46.jpg)
DESIGNER STARTER PACK
![Page 47: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/47.jpg)
• 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
![Page 48: Designing for the web - 101](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef1a421a28ab12108b4629/html5/thumbnails/48.jpg)
WRAP UP AND QUESTIONS