themes design

Themes Design

Idbloglicious roadshowMEDAN CHAPTER

May 2011

THE VERY BEGINNING OF AN ENDLESS JOURNEY

Putra NasutionPROUD BLOGGER SINCE 2001

BLOGBUGS / ANGKRINGAN / BBV / TUKANG LENONG / AWAKMEDAN

www.ipoet.net / hi@ipoet.net / @poetra

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THIS SESSION:

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

CMS templating

demo: wordpress theme

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

Keep It Short & Simple

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

DESIGN PRINCIPLES

"Simplicity is the ultimate sophistication“

~ Leonardo Da Vinci

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

DESIGN PRINCIPLES

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

DESIGN PRINCIPLES

Standard / Widescreen

CRT Monitor / LCD Monitor / Tablet / Mobile Phone

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

DESIGN PRINCIPLES

WHY? You asked…

Avoid unnecessary scrolling

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

DESIGN PRINCIPLES

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

GRID SYSTEM

www.960.gs

12 collumns | 16 collumns | 24 collumns

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

GRID SYSTEM

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

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

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

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

TRIAL AND ERROR

http://validator.w3.org

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

HYPERTEXT MARKUP LANGUAGE

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

CASCADING STYLE SHEET

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

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

CASCADING STYLE SHEET

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

TRIAL AND ERROR

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

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

CASCADING STYLE SHEET

THEN, WHAT?

IMVHO, avoid using WYSIWYG editor.

Wait, I mean, avoid using Frontpage! :D

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

NEXT STEP

WEB USABILITY

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

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

USABILITY

THE MANTRA

Optimize! Optimize! Optimize!

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THE MANTRA

THE MANTRA

Why, you asked?Because loading MATTERS.

10/20/30 second. Big difference!

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THE MANTRA

PROBLEMS?

- IE still exist! #doh

- Cross-browser compatibility

- Internet speed

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

PROBLEMS

THEMES NOWADAYS

Header / Main Content / Sidebar / Footer

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THEMES NOWADAYS:

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

HEADERHEADER

NAVIGATIONNAVIGATION

MAIN CONTENTMAIN CONTENT SIDEBARSIDEBAR

FOOTERFOOTER

THEMES NOWADAYS:

THEMES DESIGN

* From Scratch* Theme Frameworks* Customizing Themes

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THEMES NOWADAYS:

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

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THEMES NOWADAYS:

CUSTOMIZING THEMESThe magic words are:

“wordpress themes” or “blogger template”

in google.com

:P

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THEMES NOWADAYS:

CUSTOMIZING THEMESBut remember, read and respect the copyright.

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

THEMES NOWADAYS:

mauliate!

THEMES DESIGN

IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER