Date post: | 17-May-2015 |
Category: |
Design |
Upload: | putra-nasution |
View: | 644 times |
Download: | 0 times |
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 / [email protected] / @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