Archive for August, 2012

Engaging Your Visitors

Friday, August 24th, 2012

One of the key goals of most websites is to communicate information – whether that’s information on your business’ services, your club’s events, or just a hobby you may have. Websites, however, are a passive form of information – your visitors need to read your information, watch your videos, and click your links… and the moment they leave your site, it’s no longer communicating that information.
So, logically, you want your visitors to stay on your site for as long as possible – this is why web developers pay such close attention to stats about the average length of a visit, and the ‘bounce rate’ (the number of visitors who see only your home page, and then leave immediately.) A well-made website should have a higher length of visit, and a lower bounce rate. So how do you make that happen?
The old adage ‘first impressions last’ is definitely applicable here. A quick will return pages of results on the subject. I’m not going to just reiterate what has written before, but this is one of the key factors in lowering the bounce rate, and it’s worth looking into.
More and more standout sites, though, are adopting unique and novel ways to present information in a way that engages their visitors, and keeps them on the site for longer. For business, this means a greater chance of converting a potential client into a sale. A lot of it ties into the idea that a picture is worth a thousand words – have a look at – and notice that whilst this site is a wealth of information, if it was a business site, it would see a very low conversion rate purely because it looks unappealing.
At the simplest end of the spectrum, imagery and videos placed properly create a visually engaging page with information presented in a variety of ways. At Morgan Creare, we actually offer ‘video presenters‘, made by our web video team, which communicate their information far more naturally than text – with a person speaking.
This doesn’t mean you should do away with text entirely – some information simply cannot be conveyed effectively using text, and a page that relies on images too heavily can easily become as visually distracting as one that contains none at all. Text also makes it easier to organise information, and is a lot faster to load than videos. It’s best to have a properly balanced combination of these three elements for the best effect.
Another aspect that can greatly increase engagement in a site is interactivity. This, however, needs to be used sparingly, according the the target demographic of your site. Younger web users tend to be more at ease with complex or unusual interfaces than older users, and if the interactivity gets in the way of usability or becomes frustrating to the user, they may leave on the spot.
website is a good example of a site with interactivity that has simple fallbacks (the ordinary navigation bar at the top) to prevent confusion. The content is delivered in small but meaningful amounts which don’t overwhelm the visitor, and the use of a variety of imagery keeps the site visually interesting.
Both of the previous points, though, are somewhat mainstream in their application. Modern media has meant a much wider range of possibilities, and if appropriate to your site/business, they are well worth a look. on Kill Screen Daily is a very clever review of the PlayStation game Ico. Instead of an ordinary box of text interspersed with with a few pictures, like an ordinary review, it’s almost made into a game, unlocked by solving a number of simply puzzles and following breadcrumbs. By engaging the user so actively, it’s ensuring they will want to get to the end.
Obviously, this technique would not be suitable, for instance, on a website about window installations, but it shouldn’t be dismissed out of hand – the writer knew his target demographic (gamers) and set out to engage them. Many users may find this site confusing, but for someone who is interested in the game Ico, it’s just right.
and also use this game concept to great effect in presenting their information (about an Iphone app, and a developer’s portfolio, respectively) – importantly, they have fallbacks for users who aren’t interested in the game versions.
This cross-media integration means the web is becoming richer and richer. A nuclear fuel company called actually had an entire standalone game made for mobile devices to add another facet to their website.
On a more practical note, the rise of mobile hardware and browsing software such as IE10 Metro, and the increasing number of people surfing the net on their phones, new possibilities are rapidly becoming available. Metro boasts support for ‘flicks’ (swiping your finger across a touchscreen) and tilting the screen – meaning you could now do things like navigating though a site without clicking a thing. Iphones already support things like intuitive zooming and reorienting the view based on the tilt as well.
These new techniques and possibilities mean that many current sites will, in the future, become as out-dated as the text-heavy, static, colourless websites of the last decade – and outdated sites never inspire confidence in the company they represent. Web developers need to continue to push boundaries, think outside the box, and innovate, or they will end up outdated as well.

Useful Resources For Web Designers

Friday, August 17th, 2012

Productivity is one of the most critical assets of a professional web designer or developer. Our day to day projects naturally lend themselves to an open minded approach to the acquisition of new resources, tools and services; ultimately making the increasingly vast techniques easier.

Thankfully there are an abundance of useful resources to equip the discerning web designer with all the firepower they need; in this post we will list but a few of the inspiring websites to fuel your creativity:

They like to think of themselves as the “DVD extras of design”, giving real life insight into the creation of professional work within the industry and covering who made it, how they did it, and even techniques developed by the creators over recent years.

A place to share inspiration, where designers are able to fuel each others creativity and discover what inspires them; A “one-stop shop for creative inspiration”.

Publishes lists of books identified as important, meaningful and informative by designers held in high regard on the international design scene, which gives fantastic exposure to a concentrated flow of useful, proven literature which otherwise might go missed.

This particular website is dedicated to UI details, frequently featuring the common social media companies such as facebook and twitter; highlighting precise aspects of excellence and why they work so well.

Likes to refer to themselves as the “show and tell” for designers, a place where you can share what you are working on in an exclusive environment. Aside from this, Dribble provides a unique opportunity to scout ( and therefore to be scouted ) for potential work; making Dribble a prime stage for self promotion or employment!

Like many showcasing websites, Awwwards, in essence; shares some of the best work in the industry on a daily basis. The defining factor that makes this particular site stand out is the jury of designers, bloggers and internet agencies which are responsible for ranking the submissions. The inclusion of such talented individuals reflects heavily on the quality of sites featured throughout the categories on a day to day basis.

Layered Navigation on Home Page or Any CMS Page Magento

Tuesday, August 14th, 2012

We recently had a client approach us and request that they want a navigation on the sidebar of every page of their new Magento shop. At first we thought this would be very easy to add and take a few hours to download a plugin and have the categories push to every page. We soon established they wanted the layered navigation to be present on the homepage and then filter through all of the attributes.

Unfortunately Magento does not allow this to happen and there are many plugins out there that charge a fortune for something which is relatively easily to do. We are going show you how to get the layered navigation to any of your CMS pages and how to give it a cool and sexy accordion effect using jQuery. There are a lot of forums which have this type of post but none of them work as well as this nor do they have an accordion effect too. This has been tested on Magento 1.5

The first step is to navigate yourself to your CMS pages in the backend and update the XML file for your home page. This can be done by going to:

CMS > Manage Pages > Homepage > Layout Update XML and in here please place the code below:

<reference name="left">
    <block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/homeview.phtml"/>
</reference> 

Second step is going navigate yourself through some code. Please go to /app/code/local/mage/catalog/model/layer.php and do not rewrite the original file, make a copy of it in the local folder.

Find this code:

public function getCurrentCategory()
{
  $category = $this->getData('current_category');
  if (is_null($category)) {
      if ($category = Mage::registry('current_category')) {
          $this->setData('current_category', $category);
      }
      else {
          $category = Mage::getModel('catalog/category')->load($this->getCurrentStore()->getRootCategoryId());
          $this->setData('current_category', $category);
      }
  }
  return $category;
}

Replace the above code with this code below:

public function getCurrentCategory()
{
  $category = $this->getData('current_category');
  if (is_null($category)) {
      if ($category = Mage::registry('current_category')) {
          $this->setData('current_category', $category);
      }
      else {
          $category = false;
          $this->setData('current_category', $category);
      }
  }

  //added to make this work for front page:
  if(is_null($category) || $category == false) {      
      $home_category = Mage::getModel('catalog/category')->load(40); //number must correspond to 'all products page' category
      $this->setData('current_category', $home_category);
      $category = $this->getData('current_category');
      //return $category;
  }
  //end addition

  return $category;
}

This is the only part where you will need to edit the core files but like suggested please place the code in the local folder rather then hacking the core files.

Next step is to create a file called homeview.phtml in /template/catalog/layer/ with the following code:

<?php if($this->canShowBlock()): ?>
<div class="block adv-search-nav">
    <div class="block-content">
        <?php echo $this->getStateHtml() ?>
        <?php if($this->canShowOptions()): ?>
 <?php /*?><p class="block-subtitle"><?php echo $this->__('Shopping Options') ?></p><?php */?>
            <dl id="narrow-by-list">
                <?php $_filters = $this->getFilters() ?>
                <?php foreach ($_filters as $_filter): ?>
                <?php if($_filter->getItemsCount()): ?>
					<?php if($this->__($_filter->getName() == "Category")): ?>
                    	<dt><a href="JavaScript:void(0);">Type</a></dt>
                        <?php 
						$category_model = Mage::getModel('catalog/category');
						$_category = $category_model->load(9); 
						$all_child_categories = $category_model->getResource()->getAllChildren($_category);
						?>
                        <dd>
                            <ol>
								<?php
									foreach($all_child_categories as $id):
										$childCategory = $category_model->load($id);
										if($childCategory->getName() == "shop" || ($childCategory->getEntityId() == 10 || $childCategory->getEntityId() == 11 || $childCategory->getEntityId() == 12 || $childCategory->getEntityId() == 13 || $childCategory->getEntityId() == 14 
										|| $childCategory->getEntityId() == 16 || $childCategory->getEntityId() == 17 || $childCategory->getEntityId() == 18 || $childCategory->getEntityId() == 19) ):
										else:
											echo "<li>";
											echo '<a href="/shop.php?cat='.$childCategory->getEntityId().'" id='.$childCategory->getEntityId().'>'.$childCategory->getName().' <span class="product-items">('.Mage::getModel("catalog/category")->load($id)->getProductCount().')</span></a>';
											echo "</li>";
		
										endif;
									endforeach;
                                ?>
                            </ol>
                        </dd>
 
                    <?php else: ?>
                        <dt><a href="JavaScript:void(0);"><?php echo $_filter->getName() ?></a></dt>
                        <dd><?php echo str_replace(array('?','/?'),array('shop.php?','/shop.php?'),$_filter->getHtml()) ?></dd>
                    <?php endif; ?>
                <?php endif; ?>
            
                <?php endforeach; ?>
            </dl>
            <script type="text/javascript">decorateDataList('narrow-by-list')</script>
        <?php endif; ?>
    </div>
</div>
<?php endif; ?>

<script type="text/javascript">
//<![CDATA[
		$j("dl#narrow-by-list> dd:visible").hide();
		$j(document).ready(function(){
		$j("dl#narrow-by-list> dt a").addClass('test1');
	});
		$j("dl#narrow-by-list> dt a").click(function(){
		if($j(this).hasClass('test1')){
			$j("dl#narrow-by-list> dt a").addClass('test1').removeClass('test2');
			$j("dl#narrow-by-list> dd:visible").slideUp("fast");
			$j(this).parent().next().slideDown("fast");
			$j(this).removeClass('test1').addClass('test2')	
		}
		else
		{
		$j("dl#narrow-by-list> dt a").addClass('test1').removeClass('test2');
		$j(this).removeClass('test2').addClass('test1')
		$j(this).parent().next().slideUp("fast");	
		}
});
//]]>
</script> 

Replace the category ids etc to match yours. This navigation should push through all of your attributes and all of you categories as well. The rest is up to you how you style it, if you have any question please comment on our blog thanks.

How To Build a Mobile Website

Friday, August 3rd, 2012

In the last couple of years, the use of mobile web has increased considerably to the stage where it can no longer be ignored by web designers and developers. This is being fuelled by cheaper data services and faster mobile connections in wealthy countries. In developing nations a large increase has been seen where people are going straight to mobile phones.

The introduction of mobile websites means that mobile development is more than cross-browser as there are a vast number of mobile devices available which makes it very difficult for thorough testing. Each device can also use different mobile web browsers. For example an Android phone can have Firefox Mobile or Opera Mini installed. As long as a progressive browser is used then it will be fine.

Also the development of the mobile web has reintroduced some issues that have been ignored in the past. These issues include bandwidth which affects mobile users and the reduced screen size which presents a problem for layout sizes. To deal with these issues we are going to talk about how to get around them:

Implementing mobile stylesheets

This is the first step for adding mobile support to a website by including a stylesheet to adjust the CSS for mobile websites.

Server-side Methods & The UA String

One method of implementing mobile stylesheets is to use a server-side language to detect the user agent string. This technique allows sites to detect mobile devices and either uses and appropriate stylesheet or redirects to a mobile domain such as m.facebook.com. This approach has some advantages: it allows a website to display special content to mobile users and guarantees a high level of compatibility.

Client-side Methods & Media Queries

The easiest method involves client side detection of the mobile device. This can be achieved by taking advantage media queries, which will target the styles to the width of the device. As most mobile devices have smaller screens, devices can be targeted by detecting screens that are 480px or smaller.

<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>

This method targets newer mobile devices but media queries aren’t supported by many older devices, so a hybrid approach will need to be taken to reach a bigger audience.

Firstly, two stylesheets will need to be defined, one for normal browsers and another to hide elements from mobile browsers. These will then need to be linked in a third stylesheet. Finally, another stylesheet will need to be created for additional mobile device styling.

What To Change With Mobile Stylesheets

Now that mobile stylesheets have been implemented, we can now decide what styles we want to change.

Increase & Alter Screen Space

The aim of mobile stylesheets is to change the layout for a smaller screen. This means reducing layouts with multiple columns to a single column and horizontal space also becomes ‘expensive’ so mobile layouts can rarely have more than one column for content. The next stage will be to reduce clutter by adding display: none; on elements that are less important.

Reduce Bandwidth

Reducing the bandwidth is essential for slower mobile networks. This can be done by replacing or removing large background images and setting display: none; on any images in the content that are unnecessary. Another way to reduce bandwidth is to replace the navigation with plain text and css if images are used.

Other Things to Consider

In addition to stylesheets, there are a few special mobile features that can be added in to the HTML.

Clickable Phone Numbers

All mobile devices have a phone so we can make phone numbers clickable. To do this you can use the code below:

<a href="tel:441788513408" class="phone-link">01788 513 408</a>

With this snippet of code, mobile users can just click the number and call it. This link will be clickable whether it is viewed on a mobile or a computer but depending on the method of detection a class can be added to hide that it is clickable. The phone-link class can be used to disable clicking in the normal stylesheet and enabled in the mobile stylesheet.

Special Input Types

Another concern with mobile browsing is the difficulty of typing compared to a standard keyboard. This can be made easier by taking advantage of some HTML5 input types:

<input type="tel" />
<input type="email" />

Using these input types will allow devices such as the iPhone to display a keyboard that is appropriate for the input type. The above code type=”tel” will display the numeric keypad to be able to enter phone numbers and type=”email” will show a keypad with the @ and . buttons.

Conclusion

As the shift to mobile continues across the globe, support for handheld devices will become more important. Hopefully this article has given you the necessary toolkit and the desire to create better mobile support for your websites.

Contact Us Today...

If you have any questions about our services or want to arrange a free no obligation consultation contact us today or call 02920 290 080 for Cardiff and 01179 000 482 for Bristol.

Bit Torrent Study Discovers Most File Sharers Are Now Monitored

Ever heard of torrents or used Bit Torrent to download movies, music or shared files over the internet? Researchers have discovered that anyone who does use Bit Torrent to download files over the World Wide Web will most probably be monitored. Studies were carried out by Birmingham University and they have discovered that if someone [...]
» more

Cardiff: 02920 290 080 Bristol: 01179 000 482