Internet Assets

PrestaShop – Open Source E-commerce Software

Mark Hesketh — Tue, 23 Mar 2010 23:02:33 +0000

Recently out of beta stages, PrestaShop is a piece of ecommerce software that I discovered a couple of years ago while looking for a free, open source, capable and customisable e-commerce software package that I could use to create an online store for my father’s family-run sports shop in the UK.

I came across and tried a number of popular packages such as ZenCart and osCommerce, but found them to be clunky, unsupported or dated.

Enter, PrestaShop!

What is PrestaShop?

PrestaShop is a new, free, open-source, scalable, modular, light, fast, modern, sleek, and intuitive piece of ecommerce software.

A bunch of reasons to use PrestaShop…

Its completely free and open-source

All it costs is time – and with a growing community for 50,000+ users providing themes and advice, this time can be significantly shortened.
Open-source means you can edit and customise to your hearts content. Something you don’t like? Change it! You’re not locked into the ‘rules’ and limitations of commercial software.
You don’t even have to mention your store is powered by PrestaShop, if you wish. (Though more exposure means a growing community, which is good news for everyone!)

Lightweight and speedy

At around 6mb in total, PrestaShop is very lightweight making it fast to download, install and update!
Efficient and clean code structure mean that stores run quickly, and don’t needlessly tie down your database or abuse your bandwidth.

Modern, Sleek and Intuitive

Completely CSS driven layouts – No more clunky table-based e-commerce solutions.
Web 2.0 features such as customer comments and ratings modules.
Uses the Smarty Template Engine, separating application code used by developers from your presentation code used by designers.
PrestaShop uses dynamic jQuery/AJAX powered code to make your store front as intriguing and interactive as possible.
Object Orientated PHP5 and MySQL.

SEO in mind

‘Pretty URLs’ functionality included – ‘/product.php?id=2’ becomes ‘/paper-shredders/dahle-safetec-strip-cut-shredder.html’ automatically for accurate and stronger indexing!
Automatically take care of canonical URLs to avoid your store being flagged by search engines as containing ‘duplicate content’.
Generate Google XML Sitemaps featuring all your categories, products, images and CMS pages in seconds.

Customisable and Modular

Want to offer a request option when an item is out of stock? Create your own modules, or edit the current ones to bring unique features to your store without the worry of interfering with PrestaShop’s core code.
Modules for most popular payment options available, such as PayPal, Google Checkout etc (you can also create your own too, of course!)
Or if you prefer, purchase premium modules by community developers over at PrestaStore.
Add additional content pages using the inbuilt TinyMCE CMS editor in the back office.

And much more of course… For a full list, PrestaShop also provide their own impressive full listing of features available here.

You may also be interested in the Live Shop Showcase they provide. This gallery of online stores that use PrestaShop clearly demonstrates the customisation potential.

Great! So are there any disadvantages?

Unfortunately there are a couple of issues with using PrestaShop, aside from the growing community forums, little documentation is offered in terms of development (creating modules, Smarty Engine etc) via the official wiki.

Another issue of note would be that as the PrestaShop team are located in France, the community itself was largely French speaking for a long while. This is rapidly changing however as awareness grows, and there now appears to be around 3x more English speaking users than as recent as 3 months ago.

Here to help

Getting started with PrestaShop was very much mostly trial and error to begin with, but it was time well spent.

Having created multiple stores powered by the PrestaShop software (including a largely customised prestashop system running multiple store fronts across differing domains via a single back office), as well as many custom modules based on client’s requirements, I now feel more than comfortable with the PrestaShop’s format and structure.

Therefore I intend to begin writing detailed tutorials regarding PrestaShop, sharing the knowledge I have gained over the last 12 months (some were more enjoyable than others).

Sound like too much work? Hire Us!

Looking to set up, or improve an online store of your own but don’t have the time, or knowledge of web development to do it yourself?

Have a look through some of previous client work and get in touch to find out how we can help you. We offer web design services of all sizes, from custom PrestaShop payment modules, to full ecommerce packages.

With rapid concept to delivery turn-around, and reasonable rates flexible dependant on the scale of work required, Internet Assets are a team of experienced e-commerce developers capable of any sized project.

Creative Custom 404 Error Pages

Mark Hesketh — Thu, 07 Jan 2010 16:13:33 +0000

404 errors are displayed when a web page you’re trying to view cannot be found.

There are several reasons for being shown a 404 error:

You may have got the address wrong
The page may have been deleted
The link you clicked was incorrect.

Its basically a dead end. They’re stuck, trapped, lost and alone!

Internet Explorer's default 404 error page

Usually, its not such a nice ”web experience’, especially if you’d been merrily browsing through a website to be suddenly greeted with your browser’s “This page cannot be found” 404 error. Urgh.

These pages are neither seamless with the rest of your web site, nor appealing to your visitors. This doesn’t have to be the case.

What can be done?!

Web Designers can create their own customised 404 error pages, designed to be integrated with their website. This has a bunch of advantages, allowing your visitor to seamlessly navigate back onto your website for instance, or having the ability to search for the correct page they were looking for.

Note: There is also the possibility that someone arriving at your site from elsewhere, may see a 404 page and just assume that your entire web site is down! Not good!

Simply put, custom 404 pages are marvelous.

Get creative!

Your pages can be used to reflect the feel, or look of your web site. Or they could just be a bit humorous.

Here are few examples of some of the more interesting and witty custom 404 error pages around.

Hopefully these examples can provide some inspiration when looking to retain visitors to your website by creating your own custom 404 page!

CSS Sticky Footer

Mark Hesketh — Wed, 23 Dec 2009 13:15:07 +0000

Sometimes when designing a web page, you just want that footer to stick to the bottom of the window, even when your page is thin on content. I don’t mean permanently as you scroll, but on those pages where due to a lack of content there is no vertical overflow, and so you’d like the footer to actually remain at the ‘foot’ of the browser window. Not freely hiking up to the middle of your page, uninvited!

Well, the clever chaps over at CSSStickyFooter.com have devised a way to do this more cleanly than the ’solutions’ of the past.

As you can see in this quick example, due to the sparse content on the page, the footer has decided to wander up the page leaving a gap beneath

This looks a bit messy. However, it easily be fixed and become…

The footer has now rooted itself to the foot of the browser window, regardless of the page's content.

Why is this solution better than others?

Works in all major browsers. Chrome, Firefox 2/3, IE 6/7/8, Opera 9/10, Safari… and loads more. Full list of browser support.
Works with columned CSS layouts.
No overlaps in resized windows.
No empty ‘push’ div clogging up your code.

Okay, so how do I do it?

Full credit here of course goes to those chaps at CSSStickyFooter.com.

I will only include the raw HTML/CSS code here, however you can get the full instructions over at the CSSStickyFooter website.

The HTML

<div id="wrap">
        <div id="main" class="clearfix">
        </div>
</div>
<div id="footer">
</div>

The CSS

/*

Sticky Footer Solution

by Steve Hatcher

http://stever.ca

http://www.cssstickyfooter.com

*/
* {

margin:0;

padding:0;

}
/* must declare 0 margins on everything, also for main layout components use padding, not

vertical margins (top and bottom) to add spacing, else those margins get added to total height

and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body, #wrap {

height: 100%;

}
body, #wrap {

height: auto;

min-height: 100%;

}
#main {

padding-bottom: 150px; /* must be same height as the footer */

}
#footer {

position: relative;

margin-top: -150px; /* negative value of footer height */

height: 150px;

clear:both;

}
/* CLEAR FIX*/

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}
.clearfix {

display: inline-block;

}
/* Hides from IE-mac \*/

* html .clearfix {

height: 1%;

}

.clearfix {

display: block;

}

/* End hide from IE-mac */

Mockingbird

Mark Hesketh — Fri, 18 Dec 2009 16:52:11 +0000

Mockingbird is an online tool created to assist in the early stages of web design. While still in ‘beta’ stages, Mockingbird already looks to be a useful utility.

Create mock ups of your layouts

Mockingbird allows you to ‘mock up’ designs and layouts using a wire frame mesh, in a web-based environment – there’s no downloads, its straight from your browser window. It doesn’t even require Flash.

The opening shot shows how Mockingbird could be used to mock up YouTube

With Mockingbird, you can lay out your pages in its most simplistic form – where your headers and text will appear, breadcrumb links, perhaps even embedded videos or form elements, all by drag and drop.

What this means is you can very quickly turn your ideas into pages, considering the focal points, rearranging text, decide whether or not you need a bit more navigation. All that kind off stuff. But, without having to mess about with a pile of layers within Photoshop.

Using Mockingbird

The workspace in Mockingbird has a whole host of features. From Undo/Redo, grouping your elements, sending them from back to front, and the most useful of all, Align. All the things you might expect from your average design software package.

Your first mock up starts as a bit of a mess, but it gets the point across.

Its also all very easy to understand and use. There’s the usual toolbar on the left hand side, where as your workspace is the white area to the right – which expands to fit your work as you drag and drop.

The workspace also includes a wide range of your typical web and UI elements, such as input boxes, tab containers, and link bars as well as your more uncommon features such as star ratings, tag clouds and volume sliders.

Just a sample of some of the drag-drop elements available

Many of the elements can also be customised – the ‘progress bar’ for instance will fill to whatever percentage you specify, or the star ratings will highlight the number of stars you specify.

Save and Share your designs

One of the major benefits to Mockingbird is that you can save your designs, as well as share them with fellow designers or even your clients for approval.

A mock up of the Internet Assets homepage

This was a quick design I did a few months ago when designing the Internet Assets layout. If you’ve seen our homepage, hopefully you can see the resemblance. This Mockingbird mock-up was very quickly put together – but allowed guidance and allowed me to stay on track while using Photoshop.

The point is, even though it was done a number of weeks previously, I was instantly able to reclaim my design untouched by logging in with an email address.

Your designs can also be exported as PNG images of PDF files, to be able to share with your clients, and share with them your ideas before throwing hours into Photoshop to find they’d rather not feature embedded videos on the front page (for example!).

You could maybe even allow a client to have a go, and send you their thoughts on element positioning without them ever having touched Photoshop or HTML.

Some other nifty features!

Create multiple pages for your layout, under the same saved design.
Link these pages together as if they were on a live website.
Snap to grid – will try to auto align the elements you drag to features of your design.
Produce clean layouts without getting hung up and bogged down in the details.
Auto resizing of text and elements by dragging their corners – no need to fiddle with your pixels!
…completely free!

Or you could hire us!

If you’re looking for a new web site, web design, or even have a website and want it re-designed. Take a look at our portfolio of work, the many web design services we provide, and contact us today to own a website that you’ll be proud of.

Clients from Hell / iStock Hell

Mark Hesketh — Thu, 17 Dec 2009 10:40:47 +0000

Clients from Hell is a humorous blog where anonymous contributors can share quick quotes from their previous clients that likely left them lost for words.

Have a look through and we’re sure there will be a few laughs in there, not at the clients expense of course, but it certainly brightened up our Wednesday afternoon in the office!

Some of our favourites

Here are a few of our favourite quotes available.

“You’re the designer, Why do you need information from me?”

“Please leave the jpegs on the desk so I can verify them, thanks.”

“See this MySpace page, I want our website to look like that. Can you also make it play music? You can take away the stop button, I’ve seen it done before.”

“Also pop in a dark kid , Asian or kid with glasses from time to time.”

iStock Hell

The guys responsible for Clients from Hell have also recently opened up iStock Hell, a “collection of the worst of the worst on iStockPhoto”.

I have quite often been baffled by some of the seemingly misguided, poorly lit, bizarre or plain cheesy stock photos that appear on iStock, only to then realise that over 100 people have already purchased the said horrific image already. I find myself wondering where those images could have possibly been used?!

Unfortunately, iStock Hell doesnt shed any light on this, but it does offer an interesting catalogue of some of the more worrying images available for purchase.

A few examples

Creative uses of Typography in Design and Advertising

Mark Hesketh — Tue, 15 Dec 2009 15:13:44 +0000

Ever since one particular project during my University days I’ve been consistently amazed by purely type-based design, and how much type can be overlooked as a fundamental piece of any design task, print, web or otherwise.

What is Typography?

“Typography refers to the arrangement of text on a page, and appears in some form or another in all instances of written communication. Depending on the purpose, typography can be used for optimum readability, impact, or an artistic statement. Some graphic designers work totally in text, and study typography extensively while they perfect their art. Quality typography can make a big difference in communications, because it can impact the way the reader sees and feels about the topic being discussed.” – Acuity Designs

Stunning Typography

Typography on a most basic level can be used to reflect a company’s brand, retaining a ’style’ across different media and platforms. There are designers however who specialise purely in typography and can create some truely stunning works of art.

These examples demonstrate how Typography can be used to craft something beautiful, and the benefit well-thought Typography has in any piece of design work.

Creative Custom 404 Error Pages

Firebug: Add-on for Firefox

Mark Hesketh — Fri, 06 Nov 2009 13:33:18 +0000

I thought I would share this wonderful little Firefox add-on, Firebug. I must use this extension every 30 seconds at work, and would strongly recommend it to web designer/developers of all skill levels.

Firebug in essence allows you to bring up a frame at the bottom of your web browser, displaying all of the ’source code’ for the page you are viewing, including a side window revealing related CSS. However, it contains many powerful features that take it beyond just simply displaying a page’s source.

The Firebug window pops up along the bottom of your browser

One of my favourite, and most used features of Firebug, is the ‘Inspect’ tool. You are able to roll over objects within your page (images, links, paragraphs, form elements.. whatever), and be taken straight to its reference within the source code, as well as all the areas of your CSS that are relevent to that object!

Tweak your HTML/CSS on the fly and see instant changes in your browser

If you’ve ever had it where you’re scratching your head at why a link’s font size is 14px when you clearly told it be 12px, you can use the right hand column (image above) to scroll through each area of your CSS that is interacting with your selected object.

Disable individual features of your CSS, and see which is relevant to your selected object.

This makes debugging design work amazingly quick and efficient, there’s no need for trial and error changes. Just ‘inspect’ the object, and reveal the fault instantly!

Once you’ve found the issue, you may of course then want to fix it. With Firebug you don’t even need to back into your editor. HTML and CSS can both be edited on the fly within the Firebug window, showing your changes instantly on your browser with no need for refreshing. This way you can tweak objects pixel by pixel to get them just right! When you’re happy, just make the final changes in your editor.

In the same way you can completely remove whole aspects of the CSS piece by piece. These changes will too be reflected in your web browser instantly. I often use this function to see if my newly imputted CSS code has actually made any changes whatsoever!

You may also note the ‘line-height: normal’ being crossed out at the bottom of the image above. This is another feature whereby it will reveal parts of your CSS that are being overridden. In this case ‘line-height: normal’ is not being used due to a second ‘line-height’ being specified within the ‘.post-body’ tag (image above).

I cant overemphasize how much I use this tool. I am currently working on a pre-made shop template, and finding the relevant areas of CSS to edit within the 2500 line monster .css file supplied would have been hell without this.

You can download, and read about its other many features here: http://getfirebug.com/

Add Javascript snippet code to your Blogger post

Mark Hesketh — Thu, 05 Nov 2009 17:43:29 +0000

If you’ve ever tried to add Javascript code into a blog post, such as when displaying a ’snippet’ for your readers to copy and paste, you’ll no doubt have found that Blogger stops your code snippet being displayed at all. I can only assume this is to stop malicious javascript exploits.
There is a simple online tool that can help you over at eBlog Templates. This tool will convert your javascript code into a form that Blogger / Blogspot will be happy to publish!

Put in your javascript snippet code like so… and click to convert.

Select your converted code, then copy+paste it straight into your blog post.

The tool simply converts characters to their raw HTML form, for instance ‘<‘ becomes ‘<’
The output may look a mess, but once you publish the blog post your web browser will revert the inputted snippet back to the its original state. Blogger and your readers are none the wiser! How handy!

Disable Flash in Firefox

Mark Hesketh — Wed, 04 Nov 2009 18:05:35 +0000

You may wish to disable Firefox showing you Flash objects while browsing the web.

‘But Flash is amazing’! you may cry. Well, there’s a couple of reasons you may wish to disable it:

As a web designer/developer, its important to be aware that some of your users won’t have Flash installed, or even have it disabled. If your website is Flash-heavy, disabling temporarily will allow you to view your page as your users would, and weed out any bugs you might find. This is especially helpful when using sIFR for custom typefaces for instance.
You could simply dislike some of the more troublesome Flash creations the Internet can provide! We’ll look at how to disable Flash more permanently as well.

To disable Flash / Flash objects temporarily:

In Firefox, along the top menu select Tools and then click Add-ons.

Once the Add-ons window pops up, select the Plugins tab.

Scroll down through your available plugins until you come across Shockwave Flash, then click Disable.

This will remove all Flash objects from the pages you browse (you may require a refresh).

To Enable Flash again, just follow the same process and click the Enable button within the Firefox Plugins menu.

To disable Flash / Flash objects permanently

There are a few ways that you can go about doing this:

1. Uninstall Flash

Adobe/Macromedia provide an uninstaller application to remove Flash from your system http://kb2.adobe.com/cps/141/tn_14157.html.
The downside with this method is that some websites will prompt you to reinstall Flash on every visit, so this method is not recommended, where blocking rather than removing is probably a preferred method by most.

2. Flashblock – Firefox Add-on

This free, and quite frankly brilliant add-on will simply remove the Flash object from view, but allow you click onto the element if you decide you would like to view it. Flashblock will also give you the option to ‘white-list’ particular websites that you would always like to see Flash objects for. Youtube, for instance.

You can download Flashblock here: http://flashblock.mozdev.org/

Internet Assets

PrestaShop – Open Source E-commerce Software

What is PrestaShop?

A bunch of reasons to use PrestaShop…

Its completely free and open-source

Lightweight and speedy

Modern, Sleek and Intuitive

SEO in mind

Customisable and Modular

Great! So are there any disadvantages?

Here to help

Sound like too much work? Hire Us!

Related Links

You may also like

Creative Custom 404 Error Pages

What can be done?!

Get creative!

Related Posts

CSS Sticky Footer

Why is this solution better than others?

Okay, so how do I do it?

The HTML

The CSS

Related Posts

Mockingbird

Create mock ups of your layouts

Using Mockingbird

Save and Share your designs

Some other nifty features!

Or you could hire us!

Related Posts

Clients from Hell / iStock Hell

Some of our favourites

“You’re the designer, Why do you need information from me?”

“Please leave the jpegs on the desk so I can verify them, thanks.”

“See this MySpace page, I want our website to look like that. Can you also make it play music? You can take away the stop button, I’ve seen it done before.”

“Also pop in a dark kid , Asian or kid with glasses from time to time.”

iStock Hell

A few examples

Related Posts

Creative uses of Typography in Design and Advertising

What is Typography?

Stunning Typography

Related Posts

Firebug: Add-on for Firefox

Related Posts

Add Javascript snippet code to your Blogger post

You may also like

Disable Flash in Firefox

To disable Flash / Flash objects temporarily:

To disable Flash / Flash objects permanently

1. Uninstall Flash

2. Flashblock – Firefox Add-on

Related Posts