All posts by admin

11) Purpose

Target Audience

  • Demographic
    • age
    • ethnicity
    • gender
    • income
    • location
    • marital status
  • Psychographic
    • attitudes
    • behaviors
    • hobbies
    • interests
    • lifestyle
    • values

BOUNCE RATE

  • abandon a very slow website
  • website froze or crashed
  • purchase could not complete on first attempt
  • tried to access a website that was down temporarily
  • purchase, apparently completed, actually didn’t go through

define, build, measure

iterate, iterate, iterate, etc., etc…

Shift your thinking from the requirements of the system & business to the experience of the user. ~Jared M. Spool

01) Start Here

Blog Design is the art & science of delivering a message and perhaps exchanging ideas with others via the internet.

The online world allows the narrowest interests to be shared with the broadest base of the world’s web users. And vice versa: there could be a few who have your wide range of interests, but their physical location is many timezones away.

In essence, a good blog design enhances communication, whereas a bad blog design could negate it completely.


Although there is value in good communication itself alone, if your purpose is to showcase a product or service that you wish to sell, then the better your blog captures the interests of potential customers, the more opportunity you will have to pursuade them of the value of making a purchase. This demands that you attract attention first, and that is where the visual (and perhaps audio) elements of your blog come into play.

If you choose the right colors (to set the mood) and the proper fonts (to let the meaning of your words flow through better) then landing on your blog becomes an increasingly comfortable experience for the reader. The next thing you know, updating your blog frequently with fresh posts becomes incentivised, i.e., all of your hard work begins to pay off.

Look at blog design from five different angles:

  1. The Purpose of your communication.
  2. The Content of your blog.
  3. Its Appearance in terms of arrangement & layout.
  4. Navigation: where you want the reader to go to next and from where.
  5. Aspects of Technology: what is done by the code to produce the web page and facilitate dynamic interaction.

You can use the acronym PCANT for Purpose, Content, Appearence, Navigation, and Technology.

These areas of concern intersect in varying degrees. For example, the appearence of the content should reflect the blog’s purpose, and navigation is most dependent on the technology of hypertext.

P - Purpose: For example, to promote your product or service; to spread the word about a just cause in order to attract advocates and/or contributors; to showcase your hobby; or simply to exercise your creative webdesign talents.
C - Content: Advertising, Blurbs, Charts, Comments, Diagrams, Drawings, Graphics, Icons, Images, Labels, Maps, Photos, Phrases, Pictures, Quotes, Sketches, Text, Titles, Words, etc.
A - Appearance: Alignment, Balance, Clutter, Color, Columns, Fonts, Footer, Header, Layout, Padding, Sidebar, Spacing, Weight, Whitespace, etc.
N - Navigation: From a menu, finding the link that takes you there; or use the search feature.
T - Technology: Action, Attribute, Boolean, Class, CSS, Division, Element, Fieldset, Filter, Hook, HTML, Input, Function, Hypertext, Javascript, Loop, Method, MySQL, Parameter, Permalink, Permission, PHP, Selector, Slug, Tag, etc.

Codex Glossary

04) mindless choices

It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice. -Steve Krug’s Second Law of Usability

wide site = fewer levels

navigation_tree

 

deep site = fewer options at each level

deep

0) UX for Theme Development

Presenting a number of strategies for creating a meaningful site-visitor experience
beyond just usability.

This is brief – you don’t need to know everything (satisfice = satisfy + suffice):

  1. Don’t Make Me Think
  2. Muddling through the Web
  3. Billboard Design 101
  4. mindless choices
  5. needless words
  6. Navigation
  7. Home page
  8. Arguments
  9. Usability testing

define, build, measure

iterate, iterate, iterate, etc., etc…

The first UX skill anyone learns is to shift their thinking from the requirements of the system and business to the experience of the user. ~Jared M. Spool

Target Audience

  • Demographic
    • age
    • ethnicity
    • gender
    • income
    • location
    • marital status
  • Psychographic
    • attitudes
    • behaviors
    • hobbies
    • interests
    • lifestyle
    • values

BOUNCE RATE

  • abandon a very slow website
  • website froze or crashed
  • purchase could not complete on first attempt
  • tried to access a website that was down temporarily
  • purchase, apparently completed, actually didn’t go through

 

01) Don’t Make Me Think

Web Design (and internet marketing success) is tied to this idea:

Humans Love Convenience

thinking

notthinking

Interface Techniques

  1. Elements on demand
  2. Specialized controls
  3. Shadows around modal windows
  4. Empty states that tell you what to do
  5. Pressed button states
  6. Sign-up page links from the log-in page
  7. Context-sensitive navigation
  8. More emphasis on key functions
  9. Embedded video

smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques

goodusability.co.uk/2009/01/12/easy-as-123

 

06) Navigation

Navigational Menus – position in the header or along left or right-hand side, or even in the footer of the site.

Street signs: Up & Horizontal

Who wants to talk to you?

Page Name should match what was clicked.

Scope of Search

  • whole site
  • part
  • whole Web


Breadcrumbs

about.com

Tabs: Every browser has them; how about your theme?

wordpress.org/themes/search/tabs

Dropdown Menus / Pulldowns: Good (conserve real estate) & Bad (too twitchy!)

EVALUATE

  1. Site ID?
  2. Page name?
  3. Welcome Blurb?
  4. Major sections/subsections?
  5. Local navigation?
  6. Location indicators?
  7. Search?

7) CSS Rule Structure

Rules defined in CSS file

Declarations grouped within a block:

selector {
     property: value;
     property: value;
     }

Element selector:
ul { padding-left: 5em; }

Selectors grouped within a rule:
ol, ul { margin-left: 5em; }

Class selector:
.entry-content { background-color: #c0c; }

Combination of element and class:
span.warning { font-weight: bold; }

ID selector:
#blog_title { font-size: 17px; }

Element within a class:

 .entry-content ol {
     background-color: #cc0;
     padding-left: 5em;
     }

Group combination & comment:
ol, ul { margin: 16px 0; padding: 0 0 0 40px; }  /* top, right, bottom, left */

Inline syle:
<div style=”font-weight:bold; color:red”>content.php</div>

 

BTW (off topic):

en.wikipedia.org/wiki/Indent_style#Ratliff_style

en.wikipedia.org/wiki/Em_(typography)

4.1.1 Post Formats

post formats

wp-content/themes/twentyten/functions.php
add_theme_support( ‘post-formats’, array( ‘aside’, ‘gallery’ ) );

wp-content/themes/twentyeleven/functions.php
add_theme_support( ‘post-formats’, array( ‘aside’, ‘link’, ‘gallery’, ‘status’, ‘quote’, ‘image’ ) );

wp-content/themes/twentytwelve/functions.php
add_theme_support( ‘post-formats’, array( ‘aside’, ‘image’, ‘link’, ‘quote’, ‘status’ ) );

wp-content/themes/twentythirteen/functions.php
add_theme_support( ‘post-formats’, array( ‘aside’, ‘audio’, ‘chat’, ‘gallery’, ‘image’, ‘link’, ‘quote’, ‘status’, ‘video’ ) );

wp-content/themes/twentyfourteen/functions.php
add_theme_support( ‘post-formats’, array( ‘aside’, ‘image’, ‘video’, ‘audio’, ‘quote’, ‘link’, ‘gallery’, ) );

wp-content/themes/twentyfifteen/functions.php
add_theme_support( ‘post-formats’, array( ‘aside’, ‘image’, ‘video’, ‘quote’, ‘link’, ‘gallery’, ‘status’, ‘audio’, ‘chat’ ) );

wp-content/themes/twentysixteen/functions.php
add_theme_support( ‘post-formats’, array( ‘aside’, ‘image’, ‘video’, ‘quote’, ‘link’, ‘gallery’, ‘status’, ‘audio’, ‘chat’, ) );

wp-content/themes/twentyseventeen/functions.php
add_theme_support( ‘post-formats’, array( ‘aside’, ‘image’, ‘video’, ‘quote’, ‘link’, ‘gallery’, ‘audio’,) );

virgin.zapmap.com

11) Theme Support for Formats

theme support

theme files twentytwelve

Theme Twentyfifteen only has the template for displaying link post formats. It is used for both single and index/archive/search. The styling in its CSS pertains to all of the formats:

2015 css
from style.css of theme twentyfifteen

Theme authors define what formats they support, and they should style those formats appropriately. Before version 3.1, categories were used in arbitrary ways to show different formats.

Some standardization by theme authors is expected. For instance, Asides should not display a title. Galleries should display a photo on the left hand side with the title shortened and to the right. Long format posts should have a double line underneath them.

If your theme takes advantage of these Post Formats, you will have any easy way to display each format with a unique style.

08) Cats & Tags

 

Arid Gardening

Categories are assigned to a post in a methodical, organized, and structured way.

Tags are a more casual way to relate these otherwise arbitrary posts to each other. Tags have no hierarchy; there’s no relationship from one Tag to another.

04) Add New Post

1-2010
Add New Post in theme TwentyTen

Show on screen

  • Author
  • Categories
  • Comments
  • Discussion
  • Excerpt
  • Featured Image
  • Format
  • Likes and Shares
  • Revisions
  • Send Trackbacks
  • Slug
  • Tags
  • Writing Helper

Screen Layout

  • Number of Columns: 1 or 2
  • Enable full-height editor and distraction-free functionality.
2-2013
Add New Post in theme TwentyThirteen

01) Saratoga Meetup 2015

  • Jan: New To WordPress?: Here’s How to Get Started
  • Feb: Creating and Using Posts, Categories & Tags
    • POSTS are timely and can be categorized & assigned tags
    •  Let’s talk about not just how to post, but also how the PHP makes it happen.
    • And we’ll look at ways a theme influences the presentation of your posts.
    • If you have yet to install Version 4.1 from WordPress.org onto your server, experts will be standing by to answer your questions.
  • Mar: Creating and Using Pages & Templates
    • PAGES are organized hierarchically and are constructed to present the relatively timeless information of your website.
    • How to create pages and add links to them in the menu.
    • Templates are the files which take information from the database and in combination arrange the HTML pages to be displayed in the browser.
  • Apr: Using Themes
  • May: Using Plugins
  • Jun: Creating Child Themes
  • Jul: Permalinks & Other Settings
  • Sep: The MySQL Database: Overview & Details
  • Oct: Blog Design and Layout
  • Nov: Writing Plugins: All about the API and Resources
  • Dec: Profit from Documentation & Development

– Welcome –

Welcome to WordPress-Saratoga

  • Attendance: / Sign-in Sheet / password
  • Survey 1: Macintosh, Windows, Linux?
  • Survey 2: Freelance, Startup Team Member, Corporate Employee?
  • Survey 3: Beginner, Intermediate, Advanced User?
  • Fundamentals
    • Blogging
      • Write & post, categorize & tag; fresh content, from time to time.
      • Content consists of text, photos, and/or audio/visual media.
      • Accept comments from visitors.
    • WordPress.com
      • Free Hosted Service, Themes, and Widgets (limited)
      • Optimized Resource Utilization, Load Balancing
      • Automatic Version Updating
    • WordPress.org
      • Host a CMS* website on server of own choosing.
      • Unlimited Customization, Access to Code
      • Maintenance is your own Responsibility!
  • This Month’s Question?
  • Introduce Yourself
    • Name, Title, and Background
    • Tell us about your experience with WordPress so far.
    • Where do you plan to go with WordPress?
  • Next Month’s Topic?
  • Other Meetup Groups 

 <- Twitter Site

* Content Management System (CMS) is a computer program that allows publishing, editing and modifying content on a website as well as maintenance from a central interface. Such systems provide procedures to manage workflow in a collaborative environment.


Coding Format – Banner Ratlif Style

6) Happy New Year – 2015!

Jan: New To WordPress?: Here’s How to Get Started
Feb: Creating and Using Posts, Categories & Tags
Mar: Creating and Using Pages & Templates
Apr: Using Themes
May: Using Plugins
Jun: Creating Child Themes
Jul: UX for Theme Development
Aug: Permalinks & Other Core Settings
Sep: The MySQL Database: Overview & Details
Oct: Blog Design and Layout
Nov: Writing Plugins: All about the API and Resources
Dec: Profit from Documentation & Development

iblog