The document summarizes a presentation on web design principles and best practices. It covers topics like design principles, HTML and CSS standards, grid systems, usability mantras, and themes. It encourages optimizing sites for speed, avoiding WYSIWYG editors, and customizing or building themes from frameworks.

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