Embed Size (px)
Citation preview
Internet Solutions www.codesyntax.com
Azitain industrialdea, 3-KE-20600 EibarTel.: +34 943821780
Diseinu Arduratsua
Web garapena gailu mugikorretarako
Zaloa Etxaniz
Gure webguneen estadistikak:
Webgune baten edukira heltzeko:
● Teknologia desberdinak● Erresoluzio desberdinak● Nabigatzaile desberdinak● Koneksio abiadura desberdinak
The Guardian
Diseinu Arduratsua
“Edukia bereizmen eta plataforma guztietara egokitzea posible egiten duen teknika da.”
Html kodea ez da moldatzen!
html-a ondo pentsatu!
1. Grid likidoa
width: 100%; max-width:1200px;
2. Eduki likidoa
Irudiak, bideoak, iframe, canvas, object...
likido izateko: img{
max-width:100%;
height:auto;
}
3. Css3, media query-ak
body{
background-color:blue;
}
@media screen and (max-width= 780px){
body{
background-color:red;
}
}
Inflexio puntu estandarrak
4-Viewport meta tag-a
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5. Nabigazio menuak
6. Beste puntu batzuk
- Tipografien tamaina
- Linken rollover-a
- Botoien tamaina
- Orrien pisua, irudien tamaina...
*Twitter Boostrap bezelako framework-ak
