Web design and development in London and Surrey » wordpress http://zorinweb.com Just another Web design and development weblog Fri, 13 Jan 2012 14:56:03 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 New Site for Surrey Contact Sports Specialist http://zorinweb.com/2010/09/new-site-for-surrey-contact-sports-specialist/ http://zorinweb.com/2010/09/new-site-for-surrey-contact-sports-specialist/#comments Fri, 03 Sep 2010 19:09:14 +0000 ZorinWeb http://zorinweb.com/?p=282 Whipped up version two of a site for the guys at Nova Forca. Along with a new design, the site moves up to the much improved WordPress 3.

]]> http://zorinweb.com/2010/09/new-site-for-surrey-contact-sports-specialist/feed/ 0 WordPress Coding for LegionLive.org http://zorinweb.com/2010/05/wordpress-coding-for-legionlive-org/ http://zorinweb.com/2010/05/wordpress-coding-for-legionlive-org/#comments Mon, 03 May 2010 18:16:42 +0000 ZorinWeb http://zorinweb.com/?p=264 I implemented a new front end design for LegionLive, The Royal British Legion’s online community. The site has a very engaging look and feel, and leverages a good number of web 2.0/social community mediums, providing a hub of activity for Royal British Legion members and friends alike.

I provided an interface for CMS functions, customised a slideshow for the home page, all the while making sure it was fully integrated with WordPress Mu.

]]> http://zorinweb.com/2010/05/wordpress-coding-for-legionlive-org/feed/ 66 PSD to WordPress of London based Social Media Blogger http://zorinweb.com/2010/04/psd-to-wordpress-of-london-based-social-media-blogger/ http://zorinweb.com/2010/04/psd-to-wordpress-of-london-based-social-media-blogger/#comments Wed, 14 Apr 2010 21:07:40 +0000 ZorinWeb http://zorinweb.com/?p=235 I recently took a very user orientated design, laden with the kind of best practices espoused in Steve Krug’s, “Don’t Make Me Think”, from Photoshop to WordPress. The site’s called Social galaxies, and is run by Ed Thompson, a social media and social games analyst. Interesting commentary and analysis is served up on social games, with a particular emphasis toward the Facebook platform.

As an aside, content from Ed’s old Blogger account was transported via the handy WordPress ‘import’ function. Although imported in an untidy spaghetti like inline code fashion, it certainly relived the burden of having to paste each and every blog post. All in all, it’s a great function for a prolific Blogger based blogger looking to upgrade to a self hosted WordPress outfit.

For the actual programming of the blog, customised template pages were utilised for the ‘about’ , ‘newest’, and ‘archive’ pages. The ‘about’ page saw the use of custom fields to extend WordPress’s CMS capabilities to allow Ed to post both images and descriptions of his favourite books. The ‘newest’ page leveraged a custom page template so as to order and limit the latest posts by date, while similarly, the ‘archive’ displays category headings and related posts by date.

In addition to customised Facebook and Twitter plugins, a user subscription and Google sitemap plugin rounded out the build.

]]> http://zorinweb.com/2010/04/psd-to-wordpress-of-london-based-social-media-blogger/feed/ 104 PSD to WordPress of Sharply Designed Craftsman Website http://zorinweb.com/2010/03/psd-to-wordpress-of-clean-design-craftsman-website/ http://zorinweb.com/2010/03/psd-to-wordpress-of-clean-design-craftsman-website/#comments Wed, 10 Mar 2010 15:50:22 +0000 ZorinWeb http://zorinweb.com/?p=229 Coded up a talented designer’s clean tradesman layout. The design focuses on usability and straight to point content. Images play a large role as they’re an immediate endorsement of the craftsman’s ability and skill.

In order for the website owner to manage his own content, WordPress was used as a CMS (content management system). Each page is editable, while images can be uploaded to a specific category, which will then appear on the website automatically re-sized. The quotations and contact pages feature forms that check for incorrect email addresses and make sure compulsory fields are satified. Here’s a screenshot of the site:

To see it in action, go to here.

]]> http://zorinweb.com/2010/03/psd-to-wordpress-of-clean-design-craftsman-website/feed/ 102 Problem with WordPress Plugin Activation http://zorinweb.com/2010/01/problem-with-wordpress-plugin-activation/ http://zorinweb.com/2010/01/problem-with-wordpress-plugin-activation/#comments Mon, 11 Jan 2010 23:29:08 +0000 ZorinWeb http://zorinweb.com/?p=200 If you’re running a number of memory hungry plugins, you might exceed the 32mb worth of memory allotted by the standard WordPress install. I’ve used an e-commerce solution plugin before that used significantly more memory than the others.

So, if you try to activate a WordPress plugin, but can’t, due to a memory allocation problem, you can either modify the wp-settings.php script, or, if that has no effect, increase the ‘memory_limit’ variable in the php .ini file. If you can access the php .ini file yourself, great, if not, contact your host.

To change the wp-settings.php file, open it up and locate the following lines:


if ( !defined('WP_MEMORY_LIMIT') )
define('WP_MEMORY_LIMIT', '32M');

Now change ’32MB’ to ’64MB’, so it reads:


if ( !defined('WP_MEMORY_LIMIT') )
define('WP_MEMORY_LIMIT', '64M');

Again, if this doesn’t and you can’t change the php .ini file yourself, contact your host. Incidentally, if you’d like to see your ‘memory_limit’ allocation, pop the following code into a php web page and upload it to the server:


<? php echo phpinfo(); ?>

]]> http://zorinweb.com/2010/01/problem-with-wordpress-plugin-activation/feed/ 0 Collection of Handy WordPress Tips http://zorinweb.com/2009/12/collection-of-handy-wordpress-tips/ http://zorinweb.com/2009/12/collection-of-handy-wordpress-tips/#comments Wed, 30 Dec 2009 14:26:02 +0000 ZorinWeb http://zorinweb.com/?p=147 When developing WordPress driven websites for Surrey and South London based businesses, more often than not, I find myself referring to a handy list of WordPress tips. Commonly, it’s the SQL commands for transferring the local site to the remote host.

This is a convenient little resource featuring the abovementioned tip and plenty of others.

]]> http://zorinweb.com/2009/12/collection-of-handy-wordpress-tips/feed/ 0 Converting a Design to a WordPress Website http://zorinweb.com/2009/12/converting-a-design-to-a-wordpress-website/ http://zorinweb.com/2009/12/converting-a-design-to-a-wordpress-website/#comments Thu, 17 Dec 2009 19:09:22 +0000 ZorinWeb http://zorinweb.com/?p=103 There doesn’t appear to be too many psd to HTML tutorials on the net, so I thought I’d write one. Given the popularity of the WordPress blogging software, I’ll code the design up for WordPress rather than a static HTML site.  To reiterate, this is about taking a design (in whatever format), slicing it up in Photoshop, or similar (Gimp), then applying the CSS to the HTML. WordPress features intuitive markup, so I’ll base the HTML around theirs.

The slicing of the design will be dealt with first, followed by a look at the HTML, then proceeded by the all important CSS. To begin with, let’s look at the design in the slicing environment.

1-overview

This is the psd of a recently completed website opened up and ready to slice in Photoshop. It’s a clean, uncomplicated design, so should be ideal for a tutorial. For demonstration purposes, I’m using the ‘crop’ tool instead of slicing tool, and saving each piece as a jpg in turn. There’s not a particular preference for image formt, so use what you wish; jpgs load up quicky, that’s all. Right, let the cutting begin.

background-slice

A slice is taken from the top of the psd going through the white space to just below the thick green line. It will be repeated across the <body> of the document, covering the width of the screen. Next, the little house with the lightbulb is cut out.

cutting-out-the-little-hous

The house is cut out from the top to just beneath the green like. It will later be layered over repeated background strip. Now for the logo and introductory text.

cutting-out-the-logo

cutting-out-logo

A similar effect for the text could have been gained using sIFR, but on this occassion opted for a CSS text replacement technique. After cutting out the navigation buttons – both the blue and ‘hover effect’ orange – and other bits and pieces, the last substantial piece of cutting is the Twitter section.

cutting-out-twitter

That’s all the cutting; let’s run through the pieces.

  • Background strip
  • Logo
  • Introductory text
  • House with lightbulb
  • Navigation buttons
  • Twitter section
  • Twitter button
  • Contact and Twitter headings

The HTML

Assuming you’ve installed a copy of WordPress, let’s navigate to the default theme to inspect the markup – ‘wp-content’, ‘themes’, ‘default’ directory. Open the index.php to view the following:

<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
get_header(); ?>
<div id="content" role="main">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div>
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>
<div>
<div><?php next_posts_link('&laquo; Older Entries') ?></div>
<div><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>
<?php else : ?>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

The WordPress loop, in bold, doesn’t have any bearing on this tutorial, so we can ignore it. get_header() renders the header part of the HTML, while get_sidebar() and get_footer() render the sidebar and footer, respectively. I’ve gone through the index.php file to avoid confusion; what I’d like to do is go through the rendered HTML as that’s what we’re going to style. Here’s the rendered HTML of index.php without the PHP ‘loop’ (I’ve deleted a few unordered lists fro the sidebar as they’re not relevant):

<body>
<div id="page">
<div id="header" role="banner">
<div id="headerimg"><h1><a href="Blog name"</a></h1>
<div><?php bloginfo('description'); ?></div>
</div>
</div>
<hr />
<div id="content" role="main">
</div>
<div id="sidebar" role="complementary">
<ul role="navigation">
<li><h2>Archives</h2></ul></li>
<ul><li><h2>Meta</h2></li></ul>
</div>
<hr />
<div id="footer" role="contentinfo">
</div>
</div>
</body>

Minus a few unordered listed from the sidebar, the above is more or less the standard HTML from the default theme. The site we’re working on in this tutorial is customised, so has slightly different HTML, but importantly, a similar structure. Here’s the HTML from DRC Electrical:

<body>
<div id="page">
<div id="header">
<h1><a href="http://drcelectrical.co.uk/" onfocus="if (this.blur)this.blur();"><span>DRC Electrical Services</span></a></h1>
<ul id="nav">
<li><a href="http://drcelectrical.co.uk/" onfocus="if (this.blur)this.blur();">Home</a></li>
<li><a href="/services/" onfocus="if (this.blur)this.blur();">Services</a></li>
<li><a href="/testimonials/" onfocus="if (this.blur)this.blur();">testimonials</a></li>
<li><a href="/blog/" onfocus="if (this.blur)this.blur();">blog</a></li>
<li><a href="/contact/" onfocus="if (this.blur)this.blur();">contact</a></li>
</ul>
<div><span>Hello, we are a company offering electrical services</span></div>
<div></div>
</div><!--end of header-->
<div id="content">
<div id="sidebar">
<div>
<div>
<h1><span>Contact DRC Electrical</span></h1>
<p>We always like to talk to people.
Just drop us an email or call us.</p>
<div>020 8287 7907</div>
<p>Mobile:</p>
<div>07985 279916</div>
<p>Email:</p>
<div>info@drcelectrical.co.uk</div>
</div>
<div>
<h1><span>Twitter</span></h1>
<div>
Going to elex expo at sandown should be good <a href="http://twitter.com/DRC_Electrical/statuses/6218208623" class="twitter-link">Go</a> <span class="twitter-timestamp"><abbr title="2009/12/01 00:24:04">2009/12/01</abbr></span>
</div> <!--end of twitter-message-->
<a href="http://twitter.com/DRC_Electrical/"></a>
</div><!--end of Twitter-div-->
<ul><li>
</ul>
</div><!--end of sidebar-content-->
</div><!--end of sidebar-->
<div id="content-left"><!--post/content goes in here-->
<div id="post-3">
<h2>DRC Electrical….</h2>
<div>
<p>provide electrical services to the London and Surrey areas. Fully qualified, and with years of experience on hand, our typical jobs range from electrical testing to full rewires. Emergency callouts, or jobs booked well in advance, we cover them all.</p>
<p>Our work is balanced between domestic and corporate customers alike. Onsite commercial electrical work is an area we’re very familiar with. From quotation to completion, we handle everything including sourcing products to disposal.</p>
<p>If you’re after a competitive rate from an company that’ll provide peace of mind, please don’t hesitate to get in touch. For emails, we aim to respond within 12-hours, while for enquiries that need immediate attention, please telephone.</p>
</div>
</div><!--end of post-->
</div><!--end of content-left-->
</div><!--end of content-->
<div id="footer">
<div><a href="http://www.zorinweb.com" target='blank' title="Website by Zw">Site by Zw</a></div>
<div>&copy; 2009 DRC Electrical</div>
</div><!--end of footer-->
</div>
</body>

That’s the generated HTML from the home page which I’ve commented as best as possible. The structure’s very similar to the default theme; we still have the ‘page’ DIV, ‘header’, ‘content’, ‘sidebar’ and ‘footer’. Assuming you’ve cut out the images, place them in an appropriate folder, and set up the development environment (if you use one), and let’s begin the styling.

The CSS

First, the body:

body {
margin: 0;
padding: 0;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 13px;
color: #fff;
height: 100%;
background: #1479c7 url(images/background-repeat.jpg) repeat-x;
}

Importantly here, we’ve taken our initial bit of slicing, ‘background-repeat.jpg’, and repeated it across the body’s x axis, and set the background to #1479c7. That’s the top of the sorted out, margin and padding zeroed in, etc.. As for the structure:

#page {
width: 810px;
margin: 0 auto;
}

The outer DIV, page, is set to 810px wide and placed in the centre.

#header {
width: 810px;
height: 380px;
position: relative;
}

With the header’s styling in place, we can now plonk the logo, navigation and introductory sentence in.

#header h1 {
margin:0px;
font-weight:bold;
}
#header h1 a {
height:100px;
width:350px;
background: url(images/logo.jpg) no-repeat 0px 10px;
float:left;
margin:20px 0 0 0;
}
#header h1 a span {
display: none;
}

Adhering to best practices and accessibility, the logo’s attached to a link within an H1 one heading. The actual HTML for DRC Electrical is inserted between span tags set to ‘display: none’. Here’s the navigation’s CSS:

#nav {
width: 800px;
position: relative;
padding: 3px;
margin: 0 0 0 7px;
height: 30px;
float: left;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
#nav li {
width: 120px;
float: left;
list-style: none;
}
#nav a {
height: 26px;
color: #FFF;
display: block;
text-decoration: none;
text-align: center;
background: url(images/nav-button.jpg) no-repeat;
padding: 4px 0 0 0;
}
#nav a:hover {
background: url(images/nav-button-hover.jpg) no-repeat;
}

‘#nav’ sets the container’s dimensions, ‘#nav li’ sorts out the individual elements, while ‘#nav a’ style’s out the actual links assigning the background of each to ‘images/nav-button.jpg’, the blue button cut out earlier on. Lastly for the navigation, ‘#nav a:hover’ gives a nice little hover effect with the orange button, ‘nav-button-hover.jpg’.

The introductory sentence is encased within ‘hello’ DIV.

.hello {
background: url(images/intro-text.jpg) no-repeat;
float: left;
height: 140px;
margin: 30px 0 0;
width: 470px;
}
.hello span {
display: none;
}

Again, the background’s set to images/intro-text.jpg, with a span styled to display none for the HTML to make it accessible. Closing out the header section, a DIV with a class of ‘lamp’. The following should be self explanatory:

.lamp {
float: right;
height: 200px;
margin: 16px 70px 0 0;
width: 230px;
background: url(images/lightbulb4.jpg) no-repeat;
}

Moving onto the ‘content’ portion:

#content {
width: 810px;
float :left;
}
#content-left {
width: 530px;
min-height: 650px;
position: relative;
float: left;
}

‘content-left’ is simply floated to the left to make way for the sidebar which appears before ‘content-left’ in the markup. Here’s the sidebar and it’s paragraph element:

#sidebar {
margin: 0 0 0 6px;
min-height: 600px;
width: 258px;
float: right;
display: table;
}
#sidebar p {
margin:4px 0;
color:#B8B291;
width:220px;
}

Incidentally display is set to ‘table’; I’ll explain about that in another tutorial. The next DIV in the sidebar is ‘side-content’.

.side-content {
float: left;
width: 258px;
padding: 0;
min-height: 500px;
}

The first piece of content in the sidebar deals with contact details, which is inserted in:

.contact {
border-bottom: 1px #7ab3df solid;
}

This gives us a nice border at the bottom.

h1.contact-sidebar  {
width: 226px;
height: 38px;
background: url(images/sidebar-contact.jpg) no-repeat -6px 0;
margin: 0;
}
h1.contact-sidebar span {
display: none;
}

The above styling’s for the ‘contact’ heading. sidebar-contact.jpg is cut out of the psd and assigned to an H1 heading with a class of .contact-sidebar. The same applies to the Twitter heading.

h1.twitter-sidebar  {
width: 226px;
height:38px;
background: url(images/sidebar-twitter.jpg) no-repeat -6px 0;
margin:0;
}
h1.twitter-sidebar span {
display:none;
}

Finishing off the sidebar is Twitter feed box and the corresponding ‘follow me’ button:

.twitter-div {
background:transparent url(images/twitter-box.jpg) no-repeat -10px 55px;
border-bottom:1px solid #7ab3df;
height:205px;
padding:10px 0;
}
.twitter-message {
color:#B8B291;
margin:18px 0 0 8px;
padding:0;
width:240px;
height:82px;
}
.followme {
background:url(images/follow-me-button.jpg) no-repeat;
display:block;
margin-top:25px;
height:30px;
width:145px;
}

The .twitter-div has it’s background set to  url(images/twitter-box.jpg) no-repeat -10px 55px; this is the Twitter box cut out earlier on. The ‘twitter-message’ fits in the box and styles the input, while ‘follow me’ button has it’s background set appropriately.

That takes care of all the images; here’s the rest of the CSS to go with the remaining markup:

#footer {
float:left;
height:39px;
padding:40px 0 0;
width: 810px;
color:#7ab3df;
}

Hope you enjoyed the tutorial.

]]> http://zorinweb.com/2009/12/converting-a-design-to-a-wordpress-website/feed/ 5 Web and SEO Services for Surbiton, Surrey based Electrical Firm http://zorinweb.com/2009/12/web-and-seo-services-for-surbiton-based-electrical-firm/ http://zorinweb.com/2009/12/web-and-seo-services-for-surbiton-based-electrical-firm/#comments Thu, 17 Dec 2009 16:24:00 +0000 ZorinWeb http://zorinweb.com/?p=96 drc-portfolio

Having left full employment to start their own electrical business, DRC Electrical wasted no time in commissioning a website. The site was built using WordPress for both blogging and content management purposes. It was also integrated with Twitter for quick fire communication.

As a new business in a saturated industry, SEO is crucial for DRC. After keyword analysis, it was determined that the search term ‘electrician surbiton’ is key for generating bread and butter business. Following further SEO work, the site now appears at the top of Google’s page-one; and consequently, is enjoying a steady flow of quality traffic.

]]> http://zorinweb.com/2009/12/web-and-seo-services-for-surbiton-based-electrical-firm/feed/ 1 Web design and SEO services for Surrey based MMA Business http://zorinweb.com/2009/12/web-design-and-seo-services-for-surrey-based-sports-fir/ http://zorinweb.com/2009/12/web-design-and-seo-services-for-surrey-based-sports-fir/#comments Wed, 16 Dec 2009 15:48:19 +0000 ZorinWeb http://zorinweb.com/?p=70 nova-portfolioNova Forca are a successful BJJ (Brazilian Jiu Jitsu) and MMA house based in Surrey and with operations in London. Their existing site was treated to a redesign and a content management system (CMS) to allow staff members to performs updates, blog posts, and upload galleries. The CMS has put them in charge of their content and encouraged them to post more articles, which among other good points, benefits search engine optimization (SEO).

For updating the site via a mobile when out and about, a Twitter feed was incorporated and placed prominantly at the top. When needing to post results live from a competetion, short sharp Tweets are perfect.

SEO figured highly in the remit; like any other business, it’s important to reach new members through appropriate search terms. For ‘bjj surrey’, Nova Forca has climbed to third position on page-one of Google beneath the local business listings. It’s not long before they’ll adorn the top spot. For ‘bjj london’ – a very competitive search – they’re at the top of page-two and climbing.

As the site’s coded well and utilises a semantic CMS such as WordPress, it’s well poised to do well in the search rankings under a variety of seach terms. Naturally, the site’s SEO process requires ongoing analysis of keywords related to their industry, and its data from Google Analytics. Additional inbound links will serve as a bonus.

]]> http://zorinweb.com/2009/12/web-design-and-seo-services-for-surrey-based-sports-fir/feed/ 0