Not very long ago when we were planning the launch of our humble magazine BuildMobile, which you are reading right now, the content strategy included coverage of the nebulous WebOS mobile operating system. Come launch time, there wasn’t enough traction to include it in our platform categories, but we were hopeful for the future. WebOS in 60 Seconds WebOS is a mobile operating system based on the Linux Kernal Initially developed by Palm and first released in January 2009 Acquired by Hewlett-Packard in April 2010 for US$1.2b WebOS uses a “card” UI with a left-to-right flick for app swithcing, flick up for “off” The WebOS broswer, called simply “Web” is based on the WebKit layout engine WebOS “Synergy” feature integrates information from many cloud services into a single list Devices include the Pre , the Pixi and the Veer phones, then the HP TouchPad HP announced in March 2011 that WebOS would run within Windows by the end of 2011 On 18th August 2011 HP announced it would discontinue operations for WebOS devices Potentially even more HP TouchPads will be made and sold at a loss Web Standards based Native Apps A feature that was full of promise, and partly responsible for the underdog adoration WebOS attracted from developers worldwide, is that web technologies like HTML, CSS and Javascript are first class tools for developing native apps for the platform, with full access to hardware APIs like the camera.

Link:
BuildMobile: The Future of WebOS

In a figurative sense, the concept of visual balance is similar to that of physical balance illustrated by a seesaw. Just as physical objects have weight, so do the elements of a layout. If the elements on either side of a layout are of equal weight, they balance one another. There are two main forms of visual balance: symmetrical and asymmetrical

Originally posted here:
DesignFestival: Balance in Design

547-wordpress-thumbnails

You may have noticed the “Featured Image” box when editing a post or page. It allows you to upload or select an associated image for the article. It generally appears as a thumbnail when viewing a list of posts, perhaps in a category index or search results.

Thumbnail support must be enabled within your theme. You could add it to a plug-in so it’s available to all themes but that may not be appropriate in every case. Therefore, you’ll need to open or create a ‘functions.php’ file within your theme folder (wp-content/themes/theme-name/).

To add thumbnail support for all post types, append this command somewhere after the opening <php:


add_theme_support('post-thumbnails');

Alternatively, you can enable thumbnails for just posts:


add_theme_support('post-thumbnails', array('post'));

or just pages:


add_theme_support('post-thumbnails', array('page'));

Setting Thumbnail Sizes

Default thumbnail sizes can be set in WordPress’s Settings > Media screen. However, you can also set a default height and width in functions.php, e.g.


set_post_thumbnail_size(100, 75);

This will produce thumbnails with 100px width and a 75px height (a pleasing 4:3 ratio). However, what happens when a user uploads an image with different aspect ratio — say 100 x 150? In this case, the whole image is proportionally reduced to fit the space and the resulting thumbnail is 50 x 75.

Alternatively, you can define hard-cropping by passing ‘true’ as a third argument:


set_post_thumbnail_size(100, 75, true);

This will crop the image so it matches the aspect ratio. The resulting thumbnail will always be 100 x 75, but the top and bottom or left and right edges will be removed.

WordPress Featured Image

The “Featured Image” box should now appear on your WordPress post/page edit screen. If it’s not there, check it’s enabled in “Screen Options” or review your functions.php code.

Using Thumbnails

Three main thumbnail commands can now be used within any WordPress loop. Typically, you’ll want to use them in files named index.php, category.php, archive.php, author.php, taxonomy.php or search.php:

  • has_post_thumbnail() returns ‘true’ if a thumbnail has been set
  • the_post_thumbnail() echos a string containing the thumbnail <img> tag
  • get_the_post_thumbnail() returns a string containing the thumbnail <img> tag

One of the simplest implementations is therefore:


if (has_post_thumbnail()) {
	the_post_thumbnail();
}

Or we could add a link and a default thumbnail if one isn’t available:


echo '<a href="', get_permalink(), '">';
if (has_post_thumbnail()) {
	the_post_thumbnail();
}
else {
	echo
		'<img src="',
		get_bloginfo('template_directory'), '/images/thumb-default.png',
		'" width="100" height="75" alt="thumbnail" />';
}
echo '</a>';

Advanced Thumbnail Use

Two optional arguments can be passed to the_post_thumbnail() and get_the_post_thumbnail(). The first is the size — either:

  1. a string containing the text ‘thumbnail’, ‘medium’ or ‘large’ as set in in WordPress’s Settings > Media screen, or
  2. an array with new width and height dimensions, e.g. array(120, 90)

The second is an associative array containing the src, class, alt and title.

For example:


the_post_thumbnail(
	array(120, 90),
	array(
		'src' => 'image.jpg',
		'class' => 'thumbnail',
		'alt' => 'post thumbnail',
		'title' => 'my custom title'
	)
);

results in HTML such as:


<img width="120" height="90" src="image.jpg" alt="post thumbnail" title="my custom title" />

That’s about as complex as it gets. Have fun adding thumbnail support to all your WordPress themes.

Thumbnail

When most people think about grids, they think about engineering and architecture. However, the grid is an essential tool for graphic design as well, and the use of grids in website design have exploded in popularity in the last few years. Using a grid is more than just about making elements on the page be square and line up: it’s about proportion as well. That’s where the theory comes into grid theory

More here:
DesignFestival: Grid Theory

539-html-email-boilerplate

Web developers often moan about having to support five mainstream browsers, a few mobile devices and quirky behavior in a certain applications. If you think we have it bad, spare a thought for those creating HTML emails. They must contend with:

Forget about stylesheets, floats, negative margins, positioning, background images, animated GIFs, PNGs or any other fun time-saving techniques. If you think it’s tough making a site work in IE6 today, HTML emails must be coded like it’s 1998. That means tables, inline styles and images.

Fortunately, Sean Powell has taken inspiration from Paul Irish’s HTML5 Boilerplate and created the HTML Email Boilerplate. It includes various fixes discovered by industry leaders such as Campaign Monitor and MailChimp to produce a bullet-proof email template which works in Outlook, GMail, Hotmail, Yahoo Mail and other popular clients.

Sean admits it’s not plug and play — you will need to get your hands dirty with coding — but it’s a great first step which solves many of the common problems experienced when developing HTML emails.

The HTML Email Boilerplate code includes two HTML files: one with commented instructions and one without which can be used as the basis of your email. It’s issued under the MIT License, is free and can be used for any commercial or non-commercial project.

What have you got to lose? Please let us know if you’ve tried the boilerplate and, more importantly, whether it worked in your email application.

Thumbnail

Even from a nondesigner’s standpoint, defining a design that satisfies all the requirements I outlined previously is a simple task. It’s similar to making a phrase on your refrigerator with magnetic poetry words. Although there are millions of ways to arrange the words, only a few arrangements make any sense. The magnetic words are like the components, or blocks, of the web page

View post:
DesignFestival: Web Page Anatomy