August 19 Meeting Cancelled!

Due to a scheduling conflict, I have to cancel the August 19th Web Design SIG meeting.

Next meeting will be September 16th.

Enjoy the summer!

Posted in Upcoming | Comments Off

July 15, 2014 Image Optimizing & WordPress

Before uploading images or photos to a website, they need to be checked and optimized. This is important not only to avoid long downloads – especially important when viewed on alternate media  - and can to boost SEO results.

Things to consider and optimize as needed:

  • The actual size of the image in pixels – set it at the largest size it may be viewed on screen, but NO larger!
  • The actual file size in kb’s. Images should be run through an optimizing process that will convert the resolution to 72 dpi.
  • The image color space needs to be RGB, (sRGB) or “index” for .png’s.  Most photos will be RGB. (CMYK is used for print.)
  • Best file format options are .jpg, .gif and .png.
    • .jpg: best for photos and any graphic that has gradient colors. No transparency.
    • .gif: best for graphics with flat areas of color and animated gif’s. Transparency possible.
    • .png: suitable for both gradient and flat images, used more now. Transparency possible.

When an image needs a transparent background, a “matt” has to be set, this is a color closest to the anticipated background color that will show behind the image.

Process:

Check the image file properties. In Windows right-click an image and chose Properties. The “General” tab will show the file size, the “Details” tab will show the pixel dimensions. If the image is already 72 dpi or 92 dpi, and the pixel width is no larger than an “average” screen width of 800px, and the file size is under 300-kb or so, it may be ok to use as-is. But if the image is much larger, in weight or pixel size, it will need to be optimized.

Graphics editing software is useful to have, top choice is PhotoShop, but there are cheaper alternatives. The software has to be able to reduce the resolution, edit the pixel size, and optimize (compress) the file, and save as one of the chosen file types, without too much image quality loss. Each image should be optimized individually for best results.

Too much compression and pixelation starts to appear – too little compression and the file size is larger than necessary.

Never up-size a “too-small” image file in HTML pixel dimensions, it will look terrible.

Online options:

http://www.imageoptimizer.net/Pages/Home.aspx http://tools.dynamicdrive.com/imageoptimizer/
http://jpeg-optimizer.com/
http://mashable.com/2013/10/29/image-compressors/

There are also image optimizer plugins for WordPress, which will automatically reduce the file size.  Some are mentioned on this site:
http://premium.wpmudev.org/blog/10-best-image-optimization-plugins-to-speed-up-your-wordpress-site/

If your site has large images where quality is important, and you anticipate these being viewed on ‘Retina’ displays, this plugin will create duplicate images to be served when viewed in media with Retina display:
http://www.meow.fr/wp-retina-2x/

 

Posted in Image gallery, Image Optimizing, WordPress | Tagged | Comments Off

June 17th, WordPress Widgets

Widgets are an integral part of any WordPress theme, and their locations and options change depending the theme structure. Widgets are small pieces of functionality (PHP code) that can be placed in widget locations within a theme. Widgets can be simple text (a text widget can contain hand-coded HTML or PHP), or ‘WYSIWYG’ functions with multiple settings to control the way they work. (No code wrangling required!)

Available widgets in default 2012 theme. (Click for enlargement)

Available widgets in default 2012 theme. (Click for enlargement)

A brand new default WordPress installation will use a default theme which comes with a limited set of widgets and widget locations. But as soon as you install and configure a custom theme, different types of widgets and other locations will become available. The theme designer will determine what widgets are available for use, and where they can be positioned on the site. Many plugins will also add plugin-specific widgets that can be placed in the available widget areas. The WordPress templates [used by pages or posts] specify which widget areas will be displayed when that specific template is in use. Most common is for widgets to display in a sidebar. But specific page templates can be coded to include “widgetized” areas elsewhere on a page.  For instance – a template that is “full width” won’t have a side bar location coded in, and therefore no place for a widget to display.

Available widget areas in the Responsive theme, and widgets added by a plugin

Available widget areas in the Responsive theme, and widgets added by a plugin. (Click for enlargement)

Its important to know how to recognize and use  the options available in your specific theme, as well as any widgets that are added as part of a plugin. To become familiar with a new theme, it’s helpful to add a text widget to each widget area, and title it the name of the widget location. The widget locations will become apparent when viewing the pages.

Posted in WordPress | Comments Off

Configuring WordPress – Basic Structure and Menus

Populating the WordPress website, adding pages, posts, categories and setting up menus.

Pages are static pages that can be edited, but generally remain the same. Pages do not get archived, once edited the old content is overwritten.

Posts are texts that are displayed in a post template ‘page’.  They are saved in chronological order and (depending on the theme settings) can be displayed with short intros on a category “home” page. Clicking their ‘read more’ link displays the entire post . Posts are sorted into (already set up) categories. Posts can be searched by category and other identifiers such as date published, author, tags, etc.

Categories: WordPress ships with a default “Un-categorized” category, so before writing posts, it’s important to establish some additional categories to organize the site’s posts. The categories will depend on the content and organization of the site. A post is then assigned to one of the categories as appropriate. If no category is assigned, WordPress will give it the default “Un-categoriesed” category.

Tags: Post also need ‘Tags”. Tags are similar to ‘keywords’, they are words found in the post text, and are usually words that are used in multiple posts.   Menu interface

Menu options:
WordPress has a default menu system, and location depends on the theme, however,  most themes allow for custom menu(s).

Default menu: When creating a PAGE, WordPress has the option to set the location of the link by numerical order, and whether it’s a sub-link or not.

Custom menus: Custom menus are easy to set up, and allow full control over which and where each page/post/category link appears.

Open the Menu page, under “Appearance”. It will show the location options, depending on the theme. Menu items can be pages, categories, tags, URL’s etc. Select and insert them into the menu, and then drag them into the required order. Options include dragging them ‘offset’ to create a drop-down.

Many themes have additional locations specified for menus. Select which menu you need to edit. When choosing a theme consider how many menu links you’ll have, and whether the theme has enough menu locations built in. Most themes have a main menu and a footer menu, but some have secondary menu’s at the top of the design. A menu can also be used in a widget area.

Posted in WordPress | Comments Off