themes design

31
Themes Design Idbloglicious roadshow MEDAN CHAPTER May 2011 THE VERY BEGINNING OF AN ENDLESS JOURNEY

Upload: putra-nasution

Post on 17-May-2015

648 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Themes Design

Themes Design

Idbloglicious roadshowMEDAN CHAPTER

May 2011

THE VERY BEGINNING OF AN ENDLESS JOURNEY

Page 2: Themes Design

Putra NasutionPROUD BLOGGER SINCE 2001

BLOGBUGS / ANGKRINGAN / BBV / TUKANG LENONG / AWAKMEDAN

www.ipoet.net / [email protected] / @poetra

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

Page 3: Themes Design

THIS SESSION:

design principles / HTML / CSS /usability / mantra / problems /

CMS templating

demo: wordpress theme

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

Page 4: Themes Design

Keep It Short & Simple

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

DESIGN PRINCIPLES

Page 5: Themes Design

"Simplicity is the ultimate sophistication“

~ Leonardo Da Vinci

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

DESIGN PRINCIPLES

Page 6: Themes Design

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

DESIGN PRINCIPLES

Page 7: Themes Design

Standard / Widescreen

CRT Monitor / LCD Monitor / Tablet / Mobile Phone

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

DESIGN PRINCIPLES

Page 8: Themes Design

WHY? You asked…

Avoid unnecessary scrolling

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

DESIGN PRINCIPLES

Page 9: Themes Design

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

GRID SYSTEM

Page 10: Themes Design

www.960.gs

12 collumns | 16 collumns | 24 collumns

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

GRID SYSTEM

Page 11: Themes Design

Hypertext Markup Language

HTML is a coding language that makes up the basic construction of a web page.

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

HYPERTEXT MARKUP LANGUAGE

Page 12: Themes Design

HTML VALIDATOR

Basicly, just watch the tag / markup. Be sure to keep everything closed and organized.

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

HYPERTEXT MARKUP LANGUAGE

Page 13: Themes Design

HTML STRUCTURE

Watch the order:<h1> <h2> <h3> <h4>

(it’s not to make your text looks bigger!)

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

HYPERTEXT MARKUP LANGUAGE

Page 14: Themes Design

HTML STRUCTURE

<br /> is inside the <p></p> tag

<li></li> is inside the <ul></ul> tag

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

HYPERTEXT MARKUP LANGUAGE

Page 15: Themes Design

TRIAL AND ERROR

http://validator.w3.org

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

HYPERTEXT MARKUP LANGUAGE

Page 16: Themes Design

CASCADING STYLE SHEET

CSS is a stylesheet language used to describe the presentation semantics (look

and formatting).

In short, it’s like the make up

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

CASCADING STYLE SHEET

Page 17: Themes Design

CASCADING STYLE SHEET

Basicly, there are class, and ID.And then, properties.

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

CASCADING STYLE SHEET

Page 18: Themes Design

Body {background: #fff;text: 11px arial, verdana, “Trebuchet MS”;color: #ccc;margin: 0px; padding: 0px; }

#ID {margin: 0px auto;padding: 0px auto;width: 960px; }

.class {width: 500px;background: url(img/bg.jpg) repeat-x;padding: 20px;}

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

CASCADING STYLE SHEET

Page 19: Themes Design

TRIAL AND ERROR

http://jigsaw.w3.org/css-validator

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

CASCADING STYLE SHEET

Page 20: Themes Design

THEN, WHAT?

IMVHO, avoid using WYSIWYG editor.

Wait, I mean, avoid using Frontpage! :D

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

NEXT STEP

Page 21: Themes Design

WEB USABILITY

Consistency / Typography / Portability / Speed /Content / Accessibility / Technology / Interaction

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

USABILITY

Page 22: Themes Design

THE MANTRA

Optimize! Optimize! Optimize!

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THE MANTRA

Page 23: Themes Design

THE MANTRA

Why, you asked?Because loading MATTERS.

10/20/30 second. Big difference!

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THE MANTRA

Page 24: Themes Design

PROBLEMS?

- IE still exist! #doh

- Cross-browser compatibility

- Internet speed

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

PROBLEMS

Page 25: Themes Design

THEMES NOWADAYS

Header / Main Content / Sidebar / Footer

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THEMES NOWADAYS:

Page 26: Themes Design

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

HEADERHEADER

NAVIGATIONNAVIGATION

MAIN CONTENTMAIN CONTENT SIDEBARSIDEBAR

FOOTERFOOTER

THEMES NOWADAYS:

Page 27: Themes Design

THEMES DESIGN

* From Scratch* Theme Frameworks* Customizing Themes

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THEMES NOWADAYS:

Page 28: Themes Design

THEMES FRAMEWORKShttp://codex.wordpress.org/Theme_Frameworks

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THEMES NOWADAYS:

Page 29: Themes Design

CUSTOMIZING THEMESThe magic words are:

“wordpress themes” or “blogger template”

in google.com

:P

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THEMES NOWADAYS:

Page 30: Themes Design

CUSTOMIZING THEMESBut remember, read and respect the copyright.

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THEMES NOWADAYS:

Page 31: Themes Design

mauliate!

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER