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

2. Putra Nasution PROUD BLOGGER SINCE 2001 BLOGBUGS / ANGKRINGAN / BBV / TUKANG LENONG / AWAKMEDAN www.ipoet.net / hi@ipoet.net / @poetra THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

3. THIS SESSION: design principles / HTML / CSS / usability / mantra / problems / CMS templating demo: wordpress theme THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

4. Keep It Short & Simple THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER DESIGN PRINCIPLES

5. "Simplicity is the ultimate sophistication“ ~ Leonardo Da Vinci THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER DESIGN PRINCIPLES

6. THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER DESIGN PRINCIPLES

7. Standard / Widescreen CRT Monitor / LCD Monitor / Tablet / Mobile Phone THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER DESIGN PRINCIPLES

8. WHY? You asked… Avoid unnecessary scrolling  THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER DESIGN PRINCIPLES

9. THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER GRID SYSTEM

10. www.960.gs 12 collumns | 16 collumns | 24 collumns THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER GRID SYSTEM

11. 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

12. 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

13. 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

14. 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

15. TRIAL AND ERROR http://validator.w3.org THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER HYPERTEXT MARKUP LANGUAGE

16. 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

17. CASCADING STYLE SHEET Basicly, there are class, and ID. And then, properties. THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER CASCADING STYLE SHEET

18. 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

19. TRIAL AND ERROR http://jigsaw.w3.org/css-validator THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER CASCADING STYLE SHEET

20. THEN, WHAT? IMVHO, avoid using WYSIWYG editor. Wait, I mean, avoid using Frontpage! :D THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER NEXT STEP

21. WEB USABILITY Consistency / Typography / Portability / Speed / Content / Accessibility / Technology / Interaction THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER USABILITY

22. THE MANTRA Optimize! Optimize! Optimize!  THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THE MANTRA

23. THE MANTRA Why, you asked? Because loading MATTERS . 10/20/30 second. Big difference!  THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THE MANTRA

24. PROBLEMS? - IE still exist! #doh - Cross-browser compatibility - Internet speed THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER PROBLEMS

25. THEMES NOWADAYS Header / Main Content / Sidebar / Footer THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THEMES NOWADAYS:

26. THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER HEADER NAVIGATION MAIN CONTENT SIDEBAR FOOTER THEMES NOWADAYS:

27. THEMES DESIGN * From Scratch * Theme Frameworks * Customizing Themes THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THEMES NOWADAYS:

28. THEMES FRAMEWORKS http://codex.wordpress.org/Theme_Frameworks THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THEMES NOWADAYS:

29. CUSTOMIZING THEMES The magic words are: “wordpress themes” or “blogger template” in google.com :P THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THEMES NOWADAYS:

30. CUSTOMIZING THEMES But remember, read and respect the copyright. THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THEMES NOWADAYS:

31. mauliate!  THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER