Eminent Style Four Point 0

5 plus years is a long time. On the web it’s a life time.

According to TechCrunch, Twitter had a little over 1m users in 2008 and now numbers 500m+. Facebook numbered a paltry 100m users and has now scaled 1 billion. Back in 2008, Google+ numbered…. well for Google back then Google Reader was still a good idea. Yes I am still a little bitter about them shutting it down but in case you wondered its now around 342m active users according to IBT.

Devouring the 1st edition of the excellent Designing for Web Standards by Jeffrey Zeldman was the kick in the ass I needed. It helped motivate me and opened my eyes to taking web design seriously. The web was just getting in to gear and realising that there was another way to nested tables; redesigning the previous version of Eminent Style website, the right way, was an achievement I felt proud of. While the site’s been gattering dust over the last few years, taking a back seat to client work and working at Namesco, this has allowed me to seriously sharpen my tools.

Responsive web design, jQuery, CSS3, Sass and Compass (all of which lavishly applied right here) have come along but the same principles of web standards still apply.

5 years IS a long time in web design but some things stay the same. Stand by your guns, keep learning everyday and if you are gonna do it, do it right. Welcome to Eminent Style 4.0

Tips: Hide a Magento Test Site

With every Magento e-commerce website I create for my clients, I create a carbon copy for use as a test environment that is accessible on the web.

There are a number of benefits associated with doing this before making changes on a live environment:

  • The ability to upgrade on the test server as updates become available.
  • Test extensions from Magento Connect.
  • Developing, testing and implementing new features.
  • Get sign off from the client while still in a test environment.

I can then quite easily and efficiently role out these enhancements without fear of complication.

What is vital though is that search engines don’t crawl and index the test environments. This can be done quite easily from within the Magento Dashboard.

Navigate to Configuration -> Design -> HTML Head and set the Default Robots option to ‘NOINDEX, NOFOLLOW’. This should add a ‘NOINDEX, NOFOLLOW’ meta tag to your site.

Eminent Style Twitter Customisation

I have just completed the customisation of my Twitter account.

From Wikipedia:

Twitter is a free social networking and micro-blogging service that enables its users to send and read messages known as tweets. Tweets are text-based posts of up to 140 characters displayed on the author’s profile page and delivered to the author’s subscribers who are known as followers. Senders can restrict delivery to those in their circle of friends or, by default, allow open access.

Twitter has become an increasingly important tool for businesses today from a marketing aspect and it is important to validate your profile with your company branding. Its a great way to stay in contact with your customers and its significance should not be overlooked.

Don’t hesitate to contact me regarding your customisation options for your twitter account.

How to: Magento Product Import

Applies to 1.3.2.3

I have recently been importing a customers products into Magento with varying success. Hopefully this post will point you in the right direction to avoid many of the pitfalls I have discovered.

I have found that the best way to import your products into Magento is to manually create a single product in each category, export the csv file of products, edit the CSV for the new products and then import again.

Export

  1. From the Admin Panel. ‘System’ -> ‘Import / Export’ -> ‘Profiles’.
  2. Select ‘Export All Products’
  3. Click ‘Run Profile’ from the left hand navigation
  4. Click the button ‘Run Profile in Pop Up’
  5. Download the export from your ‘varexport’ directory.

Import

  1. After editing and inserting your products, save the file as something like ‘Import Products.csv
  2. From the Admin Panel. ‘System’ -> ‘Import / Export’ -> ‘Profiles’.
  3. Click ‘Import All Products’
  4. Click ‘Upload File’ from the left hand navigation
  5. Click ‘Browse’, select the file and then click ‘Save and Continue Edit’
  6. Select ‘Run Profile’ from the left hand navigation and select the uploaded csv file from the select box. It will have been renamed.
  7. Click the button ‘Run Profile in Pop Up’
  8. Take note of any products that are skipped.

Notes

  • If you have recently upgraded Magento, some of the field titles and values may have changed. For example, make sure the ‘store’, ‘website’ and ‘type’ fields are lower case.
  • Some fields are mandatory like ‘SKU’ and ‘weight’
  • ‘tax_class_id’ and ‘visability’ fields are now uppercase
  • Regarding images, even if you have the same image for the main image, small image and thumbnail, Magento appears to need different values in here. e.g. productimage1.jpg, productimage1-sm.jpg and productimage1-th.jpg

Hopefully this will clear up some of the issues with importing large quatities of products into Magento.

I am happy to offer this import service if requried on your install of Magento. Please contact me for a quote.

Analytics360 – Stats In Your Dash

MailChimp has very kindly released an excellent plugin that hooks into your Google Analytics account to display your website statistics in your Dashboard. Analytics360° also ties into your MailChimp account to track your newsletter / email effectiveness and mashes up this information in relation to blog post and newsletter frequency – brilliant!

n.b. You do not need a MailChimp account to make use of this (but its recommended!)

From a client point of view, I have made a decision to include this with all my future client installs of WordPress and have begun using this on EminentStyle.com.

From a technical standpoint, your hosting must support PHP5 for the plugin to work.

Analytics 360 - website stats in your WordPress Dashboard (courtesy of mailchimp.com)
Analytics 360 – website stats in your WordPress Dashboard (courtesy of mailchimp.com)

Business Cards

Now I know I have made it! In true Gordon Gekko style, take a look at my new business cards.

business-cards

Though I am based in the UK, the service and value I got from Print 100 was excellent. If you need some designing, give me a shout.

Google Webmaster Central YouTube Channel

Following on from my last post on WordPress.tv, it seems Google has started a YouTube channel focusing on managing and ranking your website.

The Google Webmaster Central channel has the following introduction.

This is the official YouTube channel for Google Webmaster Central, your one-stop shop for webmaster resources that will help you with your crawling and indexing questions, introduce you to offerings that can enhance and increase traffic to your site, and connect you with your visitors.

I am impressed that Google is continuing in its effort to be more transparent and is becoming more SEO and developer friendly. This comes after Google making their ‘Beginners Guide to SEO’ available back in November last year, I talked about it here.

Here is the first video from Google’s Matt Cutts.

Photoshop Tip: Set Print Design Work to CMYK

Applies to Windows XP / Vista.

Just a quick tip. I have just designed my new business cards and needed to ensure that the artwork was correctly set to the CMYK colour space needed by my printers.

There are two areas you need to check, ideally before you complete your work else there is probably gonna be some colour correction required.

  1. ‘Edit’ -> ‘Color Settings’ and ensure your working spaces and color management settings are setup correctly. If you are not sure about this, contact your printers.
  2. ‘Image’ -> ‘Mode’ ->’CMYK Color’.

Easy eh?

BenBishop Blog Redesign: Refracted

In the three years since I last redesigned benbishop.me.uk, my personal blog, there have been significant developments in web design. From CSS frameworks like The Blueprint, JavaScript library’s like jQuery to development WordPress themes like Sandbox, all have been designed to decrease development time from concept to implementation.

‘Refracted’ is the product of three years experience with commercial clients and the implementation of many of these techniques.

Design

I had the idea of the logo image in my head for a while and was quite determined to go with a light and vibrant design. Contrasting significantly with the previous ‘Satin’ theme, a light text on dark background theme, I wanted ‘Refracted’ to feel like a change from the old.

The layout was sketched out with old fashioned pencil and paper (!) and the design was composed in Photoshop with Illustrator being used for the 3D typeface effect in the logo. Then Photoshop was used again for the rainbow striped effect for the backoground to the logo and the footer.

Coding

Using the Sandbox wordpress theme, I was able to rapidly convert the design into the valid xhtml and css WordPress theme that you see on the site at the moment. Using Dreamweaver, the code editor is excellent, I began the process of adding the header image, and then working methodically through the design as I got dirty with the CSS, making use of the semantic mark up included with Sandbox.

With the basic design done, I installed and configured the widgets to the preconfigured 2 sidebars and finally did the cross browser compatibility changes requried.

End Result

With the theme 90% finished, I still need to monetise it asap, I have gone live. More information can be found here or take a look at the site itself, benbishop.me.uk