Cheesetoast » wordpress http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.9 Highlight Post Categories in WordPress using the_category() http://www.cheesetoast.co.uk/highlight-post-categories-wordpress/ http://www.cheesetoast.co.uk/highlight-post-categories-wordpress/#comments Fri, 16 Nov 2012 19:41:35 +0000 http://www.cheesetoast.co.uk/?p=1000 Here's a quick code snippet that allows you to style the post categories displayed alongside each Wordpress post by wrapping them in a span tag using the_category function. Continue reading

The post Highlight Post Categories in WordPress using the_category() appeared first on Cheesetoast.

]]>
Categories "Featured" and "Services" have been separately highlighted in blue.Here’s a quick code snippet that allows you to style the post categories displayed alongside each WordPress post.

Basically, during ‘the loop’ you’d use the_category() function to output the categories that the current post belongs to. Here is a simple example of the_category function in use:

<p>Posted in <?php the_category(', '); ?></p>

Example output: Posted in Featured, Services

The first parameter in the_category() function is the separator. In the above example I’ve used a comma to separate the categories listed but it’s also common to add arrows, blank spaces, or bullet points.

What I want to accomplish is to highlight each category by wrapping them in a span tag. The problem is that the separator is only placed between categories so in order to wrap each one I need to place an open span before and after I call the_category function. Then I can place a closing and opening span as the separator. Like so:

<p>Posted in <span class="round label"><?php the_category('</span> <span class="round label">'); ?></span></p>

Which will output the following code for two categories:

<p>Posted in
<span class="round label> <!-- First category link code --> </span>
<span class="round label> <!-- Second category link code --> </span>
</p>

Read more about the_category function and it’s parameters from the WordPress codex.

The post Highlight Post Categories in WordPress using the_category() appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/highlight-post-categories-wordpress/feed/ 0
Add a Responsive Slideshow to your WordPress Theme http://www.cheesetoast.co.uk/add-responsive-slideshow-wordpress-theme/ http://www.cheesetoast.co.uk/add-responsive-slideshow-wordpress-theme/#comments Tue, 16 Oct 2012 18:50:03 +0000 http://www.cheesetoast.co.uk/?p=879 Add a responsive slideshow to the front end of your Wordpress theme and to the admin area, so users can add their own slides. Continue reading

The post Add a Responsive Slideshow to your WordPress Theme appeared first on Cheesetoast.

]]>
I’ll walk through how you can add a JQuery responsive slideshow to both the front end of your WordPress theme and to the admin area, so users can add their own slides.

An instance of the slideshow as viewed from a tablet.

The Slideshow Files

In searching for a slideshow I wanted to find one that not only looked great but met the following criteria:

  • I wanted it to be open source.
  • It had to be responsive so that it worked well with mobile devices.
  • I wanted to be able to add HTML text which overlaid the images (and remained responsive).
  • It needed to come with options so that I could customize the timing and effects.

Finding a slideshow the delivered on all of these counts took me a while but I eventually found what I was looking for with the excellent responsive slideshow from Codrops. Codrops not only provides the necessary download files but includes a step by step walk through for all the HTML markup, CSS and javascript code.

Include the Files in Your Theme Header

Download the slideshow files and add them to your WordPress theme folder. If you want to create a child theme but aren’t sure how, take a look at the WordPress codex section on child themes.

Now that you have the slideshow files in your folder you need to include them into your theme. There are a couple of ways to do this. One way is to manually add the <script src=”…”></script> code to your header file, but the recommended way to is use the WordPress functions wp_enqueue_script() & wp_enqueue_style().

For directions on how to do this read my previous post on how to safely include scripts in the WordPress header. Make sure to include all the necessary javascript and CSS files that come with the slideshow.

Adding Slides to the WordPress Admin Panel

To make it easy for users to add their own slides we’ll create a new post type in WordPress. To do this we use the register_post_type() function in our functions.php file (located in [Wordpress root] > wp-content > themes > [current theme] > functions.php).

Add the following code:

// Creates Slides post type
register_post_type('slides', array(
'label' => 'Slides',
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => array('slug' => 'slides'),
'query_var' => true,
'supports' => array(
'title',
'editor',
'excerpt',
'revisions',
'thumbnail',
'author',
'page-attributes',)
) );

A new 'Slides' menu has been added to the WordPress admin panelOnce created, this new post type will show up in the admin menu and will act separately from regular posts (they won’t appear in your blog or your RSS feed, etc.).

Now you can make your own slides in the same way you’d create a new post. The image for your slides comes from assigning a ‘featured image’ to each post. The title and content will make up the overlaid text on each slide.

The next step is to create a page template that combines the slideshow files and the newly created slide posts to display them on your site.

Creating a Page Template

Open up a new file in your editor and paste in the following code:

<?php
/*
Template Name: Slideshow
*/
get_header();
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<?php
//This is for our custom Slides menu
$args = array( 'post_type' => 'slides', 'orderby' => 'menu_order');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
   <li>
      <?php the_post_thumbnail('full');?>
      <div class="ei-title">
         <h2><?php the_title(); ?></h2>
         <?php the_excerpt(); ?>
      </div>
   </li>
<?php
endwhile;
?>
</ul>
<ul class="ei-slider-thumbs">
   <li class="ei-slider-element">Current</li>
      <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
   <li><a href="#"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
</div><!-- ei-slider -->

/* Include any code you want in your page */

<?php the_sidebar(); ?>
<?php the_footer(); ?>

In that snippet I’ve taken the Codrops slideshow markup and modified it to generate the slides dynamically using the WordPress loop. I also used the new post type (slides) for the WP_Query.

The slideshow template is now available from the page attributes panel.Save the file as template-slideshow.php and keep it in your theme folder. You’ll now be able to select the template for any of your pages.

Side Note: because we’re displaying the content of the post on our slideshow we don’t want it to be so long that it’ll run off the bottom of the slide. That’s why, to limit the length of the output, I used the_excerpt() function instead of the_content(). This will trim the content if it gets too long. You can also read how to limit the word length of the excerpt further if you need to.

Not so fast. Updating the Slideshow Files

We’re almost there but there’s one catch with using WordPress to display the slides. The slideshow is configured to display it’s text as h2 and h3 elements. When we display the content of our post, however, we use the_excerpt() function which displays the basic content as paragraphs. To make sure these paragraphs are displayed properly in the slideshow we need to open up one of the javascript files and tinker a little.

Go into your the folder containing the slideshow files and open /js/jquery.eislideshow.js
Look  for this block of code:

// titles animation
$nextSlide.find('div.ei-title > h2')
.css( 'margin-right', 50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
.end()
.find('div.ei-title > h3')
.css( 'margin-right', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )

Add the following after the last line of that block of code:

.find('div.ei-title > p')
.css( 'margin-left', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginLeft : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )

This will ensure that paragraphs are displayed properly on the slides.

Give it a Try

Now that all the code is together go ahead and try it out. Make sure you assign the template to one of your pages then add a slide post with a featured image.

You can also edit the file [slideshow folder]/css/style.css to play around with the styling of the slides. Have fun!

The post Add a Responsive Slideshow to your WordPress Theme appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/add-responsive-slideshow-wordpress-theme/feed/ 0
Safely Include Scripts or Stylesheets In WordPress Header http://www.cheesetoast.co.uk/safely-include-scripts-style-files-wordpress-header/ http://www.cheesetoast.co.uk/safely-include-scripts-style-files-wordpress-header/#comments Thu, 11 Oct 2012 21:23:43 +0000 http://www.cheesetoast.co.uk/?p=892 There are a couple of ways to include files in your Wordpress header. One way is to manually add the code to your header file. Although this works just fine, the recommended way to is use the Wordpress function wp_enqueue_script() function. Continue reading

The post Safely Include Scripts or Stylesheets In WordPress Header appeared first on Cheesetoast.

]]>
There are a couple of ways to include files in your WordPress header. One way is to manually add the <script src=”…”></script> code to your header file. Although this works just fine, the recommended way to is use the WordPress function wp_enqueue_script() function.

Use this code in your functions.php file:

<?php 
add_action( 'wp_enqueue_scripts', 'add_custom_script' ); 
function add_custom_script() { 
   wp_enqueue_script( 
      'custom_slideshow_script',
      get_template_directory_uri() . '/js/custom-script.js',
      array('jquery') 
   ); 
}
add_action('wp_enqueue_scripts', 'add_custom_script');
?>

This particular use of the wp_enqueue_script function loads a script that is dependent on another WordPress script, in this case JQuery. There are several variations of this function that you can find on the WordPress Codex.

The function wp_enqueue_style can be used for stylesheets.

The post Safely Include Scripts or Stylesheets In WordPress Header appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/safely-include-scripts-style-files-wordpress-header/feed/ 0
Customize the WordPress Login Screen CSS http://www.cheesetoast.co.uk/customize-wordpress-login-screen-logo-css/ http://www.cheesetoast.co.uk/customize-wordpress-login-screen-logo-css/#comments Mon, 01 Oct 2012 15:42:24 +0000 http://www.cheesetoast.co.uk/?p=861 Here's a useful little code snippet that you can use to edit the Wordpress login screen styling without altering the core CSS files. In this example I'll demonstrate how to replace the Wordpress logo on the login page. Continue reading

The post Customize the WordPress Login Screen CSS appeared first on Cheesetoast.

]]>
Here’s a useful little code snippet that you can use to edit the WordPress login screen styling without altering the core CSS files. In this example I’ll demonstrate how to replace the WordPress logo on the login page.

Open up your functions.php file and paste this function:

function my_custom_login_logo() {
echo '<style type="text/css">
.login h1 a { 
background-image:url('. get_stylesheet_directory_uri() .'/images/your_logo_file.jpg) !important;
background-size: 145px 62px !important;
}
</style>';
}
add_action('login_head', 'my_custom_login_logo');

To set the background image url I’ve used the function get_stylesheet_directory_uri(), which retrieves the stylesheet directory of the current theme/child theme. You should always use the dynamic WordPress functions to locate files, as opposed to using a static address.

Since this styling code is called before the default WordPress CSS for the login page I’ve used the !important property to ensure that it’s not overwritten. This apples to any other changes you decide to make.

For reference, here’s the default styling for the login page header anchor:

.login h1 a {
background-image:url('../images/wordpress-logo.png?ver=20120216');
background-size:274px 63px;
background-position:top center;
background-repeat:no-repeat;
width:326px;height:67px;
text-indent:-9999px;
overflow:hidden;
padding-bottom:15px;
display:block
}

Good luck customizing your own login screen.

The post Customize the WordPress Login Screen CSS appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/customize-wordpress-login-screen-logo-css/feed/ 0
Add Custom Theme Options to WordPress Admin Menu http://www.cheesetoast.co.uk/add-custom-theme-options-wordpress-admin-menu/ http://www.cheesetoast.co.uk/add-custom-theme-options-wordpress-admin-menu/#comments Fri, 14 Sep 2012 20:53:33 +0000 http://www.cheesetoast.co.uk/?p=805 Learn how to add your custom options page to one of the existing Wordpress admin menus.
In this example I'll demonstrate how to create a simple options page that allows the user to add a telephone number which will be displayed in the top right corner of a site. Continue reading

The post Add Custom Theme Options to WordPress Admin Menu appeared first on Cheesetoast.

]]>
A custom theme menu under the 'Appearance' tab of the WordPress admin areaLearn how to add your custom options page to one of the existing WordPress admin menus.

In this example I’ll demonstrate how to create a simple options page that allows the user to add a telephone number which will be displayed on a theme.

Creating an options.php file

Although it’s possible to add the necessary code to your functions.php file, it’s considered good practice to keep your menu code in a separate file. This is especially true if you’re adding lots of options, since it keeps your code organized.

Create a new PHP file and name it options.php. You can either save it in your theme’s root directory ([Wordpress root] > wp-content > themes > [current theme]) or, if you have other important theme files, you can create a sub-folder called ‘library’ and save it there.

Now we need to make sure this new file is called by including the options in your functions.php file. Open up your functions file (located in [Wordpress root] > wp-content > themes > [current theme] > functions.php) and add the following code:

require_once ( get_template_directory() . '/library/options.php' );

Or if you’re using a child theme:

require_once ( get_stylesheet_directory() . '/library/options.php' );

Now you can populate your options.php file and it will be included by WordPress.

Writing your options.php file

Adding an options menu involves 3 main steps:

  1. Create a function that tells WordPress to build a new menu item.
  2. Register the function using a ‘hook’.
  3. Create a function that displays the contents of the options page.

1. Create the function that builds your menu

This step is fairly simple but very important. This is the function we’re going to use:

function add_custom_theme_options()  
{  
    add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function );  
}

The add_theme_page function will add our options page as a sub-menu to the ‘Appearance’ main menu. Here are the parameters for that function:

$page_title
The HTML title tag of the page.
$menu_title
The title of the page as displayed in the menu.
$capability
Used to determine which role the user requires to be able to use the menu.
$menu_slug
A unique name for this menu item.
$function
The name of the function called on to display the HTML code for your options.

Here is an example of the function is use:

function add_custom_theme_options()  
{  
    add_theme_page('Theme Options', 'Theme Options', 'manage_options', 'custom_options_slug','custom_theme_options');  
}

Read more about the add_theme_page() function.

2. Register the function

Now that we have our menu-creating function we need to add it to WordPress using a hook. Just add the following code:

add_action('admin_menu', 'add_custom_theme_options');

3. Create a function that displays the contents of the options page

We’re going to write the HTML code for the options page and put it in a function. This function is the one we called in step 2 so make sure you use the same name (in this case ‘add_custom_theme_options’).

function add_custom_theme_options()
{  
if ( !current_user_can( 'manage_options' ) )  {
	wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
}
?>
<div class="wrap">
<h2>Theme Options</h2>
<form method="post" action="options.php">
<?php wp_nonce_field('update-options'); // Security - used to validate source.
<p><strong>Tel No:</strong><br />
<input type="text" name="telno" size="15" value="<?php echo get_option('telno'); ?>" />
</p>
<p><input type="submit" name="Submit" value="Save Options" /></p>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="telno" />
</form>
</div>
<?php } ?>

Now when you look in your admin area you’ll see your new sub-menu titled ‘Theme Options’ under the ‘Appearance’ menu. In the new options page you’ll see the form that we just wrote. You can use it to save the telephone number to the WordPress database.

Using the new options in your theme

Now that we have the telephone number saved we can use it in the theme.

<?php if (get_option('telno')){ ?>
<div id="telno">
<p>Tel: <?php echo get_option('telno'); ?></p>
</div>
<?php } ?>

If the telephone number has been saved in the options page then it will display it in the theme. Otherwise it will be left blank.

For more information on adding custom menus read the WordPress Codex.

The post Add Custom Theme Options to WordPress Admin Menu appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/add-custom-theme-options-wordpress-admin-menu/feed/ 0
Exclude Category from WordPress RSS Feed http://www.cheesetoast.co.uk/exclude-categories-wordpress-rss-feed/ http://www.cheesetoast.co.uk/exclude-categories-wordpress-rss-feed/#comments Tue, 28 Aug 2012 19:21:15 +0000 http://www.cheesetoast.co.uk/?p=665 A useful little code snippet to remove categories from the Wordpress RSS feed. Continue reading

The post Exclude Category from WordPress RSS Feed appeared first on Cheesetoast.

]]>
A useful little code snippet to remove categories from the WordPress RSS feed.

Just add the following code to your function.php file:

function exclude_RSS_cat($query) {
if ($query->is_feed) {
$query->set('cat','-12');
}
return $query;
}

add_filter('pre_get_posts','exclude_RSS_cat');

This will remove the category with the ID of 12.

The post Exclude Category from WordPress RSS Feed appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/exclude-categories-wordpress-rss-feed/feed/ 4
Exclude Category from WordPress Blog Page http://www.cheesetoast.co.uk/exclude-include-category-wordpress-blog-page/ http://www.cheesetoast.co.uk/exclude-include-category-wordpress-blog-page/#comments Mon, 27 Aug 2012 18:37:26 +0000 http://www.cheesetoast.co.uk/?p=642 Often when designing Wordpress themes you'll want to exclude certain post categories from appearing in your blog page. Luckily it's very easy to do. Continue reading

The post Exclude Category from WordPress Blog Page appeared first on Cheesetoast.

]]>
Often when designing WordPress themes you’ll want to exclude a category from your blog page. Luckily it’s very easy to do.

Open up your index.php file (or whichever file you’re using to display your blog posts) and add this line of code right before the loop:

<?php query_posts('cat=-12'); ?>

Add the code right before this line:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

This will exclude the category with id of 12.

If you want to exclude more than one category you can use:

<?php query_posts('cat=-4,-12,-14'); ?>

Include a specific category

If you only want to include a certain category you just remove the minus character from the query:

<?php query_posts('cat=12'); ?>

Additional arguements

You can also add additional arguments to the query. In this example I will only display posts from a specific category and time period:

<?php query_posts('cat=12&year=2012'); ?>

You can take this a step further and only display posts from the current month by adding some php:

<?php query_posts( $query_string . '&cat=13&monthnum=' . date( 'n', current_time( 'timestamp' ) ) ); ?>

There are plenty of other arguments available to further filter your posts. Read more from the WordPress Codex: Query Posts.

The post Exclude Category from WordPress Blog Page appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/exclude-include-category-wordpress-blog-page/feed/ 0
Add Your Own Widget Area in WordPress http://www.cheesetoast.co.uk/add-custom-widget-sidebar-area-wordpress/ http://www.cheesetoast.co.uk/add-custom-widget-sidebar-area-wordpress/#comments Fri, 06 Jul 2012 21:43:21 +0000 http://www.cheesetoast.co.uk/?p=508 A straight forward code snippet showing in 2 easy steps how you can easily register your own sidebar in Wordpress to create your own widget area. Continue reading

The post Add Your Own Widget Area in WordPress appeared first on Cheesetoast.

]]>
WordPress now makes it extremely easy to create your own widget area by registering a custom sidebar.

Step 1 – Register the Sidebar

All you have to do is place the register_sidebar() function in your function.php file like so:

if ( function_exists('register_sidebar') )
register_sidebar( array(
'name' => __( 'Custom Widget Area'),
'description' => __( 'This is my custom widget area.'),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

The custom widget area will be added to your WordPress admin area.Customize as you see fit. In this example I’ve used the HTML5 <aside> element. Note that the ‘id’ must be in lowercase with no spaces.

Now that you’ve registered your new sidebar you’ll be able to view it in the WordPress admin area under ‘Appearance > Widgets’.

Step 2 – Add the Sidebar to Your Theme

Of course just because you’ve registered a sidebar doesn’t mean it’s going to show up anywhere unless you add it to your theme.

Add the following snippet to your site code (e.g. your footer.php):

<div class="widget-container">
<?php
// Custom widget Area Start
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Custom Widget Area') ) : ?>
<?php endif;
// Custom widget Area End
?>
</div>

The name of the sidebar must match the name your specified when you registered it. In this example I surrounded the php code with a container div to help with presentation.

Now when you load up your page you’ll see your shiny new widget area.

Read more about registering a sidebar from the WordPress Codex.

The post Add Your Own Widget Area in WordPress appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/add-custom-widget-sidebar-area-wordpress/feed/ 0
Is Responsive Web Design Important? http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/ http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/#comments Wed, 23 May 2012 16:32:44 +0000 http://www.cheesetoast.co.uk/?p=380 There’s a huge buzz around responsive web design at the moment. As I mentioned in my previous article, mobile web browsing is expected to overtake desktop browsing within a few years. Now designers are using responsive design to ensure their sites adapt to different devices. But is it worth jumping onto the responsive bandwagon? Is responsive design an important step in the evolution of web design or is it just a gimmick? Continue reading

The post Is Responsive Web Design Important? appeared first on Cheesetoast.

]]>
There’s a huge buzz around responsive web design at the moment. As I mentioned in my previous article, mobile web browsing is expected to overtake desktop browsing within a few years. Now designers are using responsive design to ensure their sites adapt to different devices. But is it worth jumping onto the responsive bandwagon? Is responsive design an important step in the evolution of web design or is it just a gimmick?

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” Jeffrey Veen

Responsive design makes use of flexible grids and CSS media queries to make a website that responds to varying resolutions. Although fluid layouts have been around for over a decade now, responsive design takes things a step further. Not only is it used to change the basic structure of a page but it can also be very useful for re-scaling images, text, and video.

Ironically, HTML has always been responsive. It was only when CSS popularized fixed widths that layouts became less flexible. Now CSS media queries aim to solve the problem of rigid layouts. To learn more about the subject I recommend you read this article from Smashing Magazine.

Usability Benefits

The whole point of responsive design is to improve the user experience through flexibility. The page adapts to the screen size to better suit the way the user interacts with it. Although smart phones have the ability to zoom, either by multi-touch ‘pinching’ or the double-tap, it’s not without problems. This is especially apparent when filling out forms, the process of which can be cumbersome and frustrating.

Here are some of the benefits of adopting a responsive design:

Future Proofing
As mentioned earlier, mobile browsing is set to overtake desktop browsing. To accommodate mobile users it’s important to design for smaller screens and touch based interaction. While some experts recommend developing a separate mobile-optimized site, a responsive approach is usually much less time consuming and less expensive.
Reduce Download Times
To improve download times on mobile devices designers can be use ‘adaptive images’ whereby image files can be optimized for mobile devices. Unfortunately this technique hasn’t been perfected yet, as it requires javascript that isn’t quite semantic. Luckily, those working on the issue have formed the Responsive Images Community Group (RICG) to “facilitate conversations with standards bodies and browser representatives”.
Creativity
The great thing about responsive design is that it urges designers to put more thought into what’s really important on the page. Unnecessary clutter can be scrapped and navigation elements can be made larger for mobile devices with touch screen interfaces.
Responsive Presentation
To improve usability on a site, it’s important to consider not only the device, but the user requirements and the context of use. Mobile users tend to spend less time browsing a site so it’s important to implement simple navigation and quicker conversion funnels. Responsive layout allows designers to optimize presentation for mobile users.

“Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order.” Katrien De Graeve

Not For Everyone

Although there are obvious benefits to using a responsive layout, it’s definitely not for everyone.

Aesthetics
Some designers, who put a lot of work into creating expansive, artistic layouts might not want to sacrifice their canvas for a narrower window where navigation takes center stage. Although responsive design can be used to improve UX, it can dramatically alter the visual appeal of the site. The balance between aesthetics and usability is a subject rife with debate.
Tables
It’s not just aesthetics that conflicts with responsive layouts. Tables are notoriously difficult to display well on smaller screens. Although there are some very elegant solutions to the problem, they don’t work across all browsers yet.
Time/Money
Going all-out to design for phones, tablets, desktop monitors and uber desktop monitors essentially involves designing 4 separate layouts. If you’re one of those people or organizations where time = money, this can be a major concern.

Conclusion

Although responsive design isn’t suitable for all websites, it’s definitely something to consider due to the relative ease at which it can be setup and benefits it can offer. It’s important for designers to keep up with the latest technology and responsive design is a great way to accommodate for the shift in browsing devices.

A lot of people seem to be concerned that through responsive design mobile browsers are given a stripped down version of the site. I agree that is most cases this should not be the case; mobile users shouldn’t be excluded from content. However, designers are given the opportunity to optimize the user experience by customizing aspects such as navigation, and this should be embraced.

Responsive web design is cheaper and less time consuming than developing a separate mobile-optimized website and with loads of great responsive WordPress themes out there it doesn’t take much to get setup.

Here are just a few examples of great wordpress themes that offer responsive layout:

If you have any thoughts about this post I’d love to hear about them!

Update: For an interesting discussion on Responsive Layout you can read and comment on the article “5 Reasons Why Responsive Design is Not Worth It“.

The post Is Responsive Web Design Important? appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/feed/ 2
SEO – Optimize Your Website for Search Engines http://www.cheesetoast.co.uk/seo-optimize-your-website-for-search-engines/ http://www.cheesetoast.co.uk/seo-optimize-your-website-for-search-engines/#comments Sun, 10 Jul 2011 18:46:51 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=136 If you want to improve your search engine ranking, here are some tips for search engine optimization (SEO).

This article talks about how to write well written content, how interlinking can help with page rankings and, if you're using Wordpress, which plugins can help.

Continue reading

The post SEO – Optimize Your Website for Search Engines appeared first on Cheesetoast.

]]>
Looking to improve your search engine ranking? Here are some tips on how to optimize your site for search engines such as Google, Yahoo! and Bing.

Well Written Content

A lot of people look for shortcuts to give their site a high search ranking but the truth is that one of the best ways to get your site a good spot on Google is simply to produce good, well written content.

By writing detailed, useful information you’ll not only engage your users but you’ll be populating your pages with relevant key words and phrases. If your content is interesting, your users are more likely to recommend it to other people and link to your site.

Inverted Pyramid

The Inverted Pyramid

To write well written content you should use the ‘inverted pyramid’ style of writing. This style is used by in newspapers and involves putting the most important information at the top of the page and with additional information following in descending order of importance.

Since users generally scan content, instead of reading everything on the page, writing in this style will ensure that they get the most out of the article (especially if there is content beneath the ‘fold’). Make sure that you’re using header tags (e.g. <h2></h2>) where appropriate.

I wrote more about this style of writing in a previous article called ‘What Makes Good Usability?’. For more tips on how to produce well written content, I recommend reading “Writing for the Web” by Jacob Neilsen, especially his article on How Users Read on the Web.

You should also bear in mind that a picture is worth o words to search bots. Images and flash elements cannot be interpreted by search engines (with the exception of HTML tags).

Interlinking

Have you ever gone onto Wikipedia to look up an article and found that you just kept bouncing from article to article. That’s because Wikipedia has fantastic interlinking (linking within the page content) that makes it easy to find related content. Not only does interlinking make navigation easier for users, but it will contribute to your search rankings.

Here are a few interesting bits of information you may not have known about:

  • Links originating from the main body of your page will generally hold more sway than those in sidebars and footers.
  • Links higher up in the markup will count for more than those lower down.
  • Links to external sites will be more influential than internal links.

Speaking of external links, you may be interested in this article from seomoz which goes into more detail about linking.

Titles and Descriptions

It’s always good to give your pages relevant titles and descriptions. Ideally each one of your pages should have it’s own title and description. If you’re coding your own site then you’ll need to use the following code at the top of your HTML code (between <head> and </head>):

<title>[Page Title goes here]</title>
<meta name=”description” content=”[Description of page goes here]” />

Your title should be 60 characters or less and your description should be 160 characters or less. Make good use of your characters; make them keyword rich, but don’t overdo it.

If you’re using WordPress then you can (and should) use the ‘All in One SEO’ plugin (I’ll go into more detail about this further down).

It’s also important to give your images relevant filenames as well as descriptive alt tags. In addition to helping with SEO, it’s also very important for accessibility; users with screen readers rely on these alt tags so don’t overlook them.

SEO for WordPress

WordPress Plugins – All in One SEO Pack & Google XML Sitemap

If you’re using a WordPress site then these plugins are a good place to start. The ‘All in one SEO pack’ will give you greater control over your titles, descriptions and keywords. It also helps by limiting duplicate content that wordpress creates by archiving. The XML sitemap plugin creates a search engine readable file in your sites root directory that helps with your rankings.

Update: Yoast has developed a plugin called WordPress SEO which offers complete search engine optimization for WordPress. It combines many of the features from All in One SEO Pack and Google XML Sitemaps (page titles, meta descriptions, XML sitemap generation, etc.), while adding new features such as robot meta and .htaccess configuration, breadcrumbs and more.

Note: If you’re using All in One SEO Pack or Headspace and want to switch over to WordPress SEO, it also comes with a migration option that makes it easy. If you want to want to read more about migration or have any concerns about switching over, read the Yoast migration article and check out the comments too.

For more tips I recommend you read this article from Yoast on SEO.

The post SEO – Optimize Your Website for Search Engines appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/seo-optimize-your-website-for-search-engines/feed/ 2