Basket
Your basket is empty.
Web Log
Facebook agile development by Mike Schroepfer
Sunday 21 November 2010 by
A perfect example that agile software development is viable development model even in big companies.
“If you’re not embarrassed by your first version, you waited too long to ship it.”
Reid Hoffman
“It is a little bit intimidating, but we don’t do two-year product planning, where we design what the screens are going to look like – because, I think, we don’t know what it’s going to be.”
Mike Schroepfer
Source: Telegraph
Lexicon Business English
Monday 18 October 2010 by
Our original design commissioned by Lexicon Business English (Hong Kong). It's not exactly following our strategy not to use any decoration in our design, but still at the end a nice example of 90's boxed web design style overusing sterile stock photography, as we call it "plastic people".
What is different with Onxshop hosting
Wednesday 4 August 2010 by
One of my recent converts to Onxshop experienced a devastating server disaster last year and thought it would be a good idea to share what we learned.
The whole ecommerce industry has really only existed for about 10 years. It is constantly changing and evolving in response to technological developments. Many websites are built without any kind of a support contract with the web design company (the builder) and they are doing things for you as they occur. Most web design companies, even those which are highly reputatable, are not aware of the potential for disaster. You cannot blame them, they have genuinely believed this cannot happen with a sophisticated web hosting infrastructure, i.e. Bytemark VPS. when all data are in RAID. What they should do is tell you that need long term support for the web server itself.
When this disaster happened, the builder helped to reinstall the operating system on a new machine provided by Bytemark. They immediately restored the site from the latest available backup, which was unfortunately one year old. Then they worked intensively with Bytemark on the latest data recovery from corrupted RAID and put a fully functional website back, two weeks after the disaster occured. Basically, there was a server disaster and the web design studio (the builder) fixed everything in two weeks at a cost of £600.
The client realised that to prevent a similar situation happening again, some additional protection would be required. This is exactly what the Onxshop service delivers.
Please read my comparison, which should help you to understand why choosing Onxshop is the best option.
Common web design studio (the builder)
Server hosting
A web design studio has no legal obligation to keep your website up and running, because the contract is between you and web hosting company (not the web design studio). You usually pay server hosting.
Server maintenance
Most maintenance contracts will cost on average £300 per month and will cover for this three essential ongoing tasks:
1. send you a backup file every week
2. run every week a security upgrade for the operation system
3. do an operating system upgrade each couple of years.
Server disaster recovery
A web design studio would be able to do a recovery and charge for it on an hourly basis, probably about £50 per hour. Recovery could take 8 hours.
Bytemark (hardware provider)
Server hosting
An average contract for server hosting with Bytemark will cost £27 per month.
Server maintenance
Bytemark offers a full management service for £80 per hour, so the estimated cost for a standard type website would be £160 per month. Bytemark guarantee that backup is working properly and the latest version is immediately available.
Server disaster recovery
Bytemark will charge for recovery on an hourly basis, just the same as any web design studio.
Laposa Onxshop (fully managed service)
Server hosting
Server hosting is included in the Onxshop package.
Server maintenance
Server maintenance is included in the Onxshop package.
Server disaster recovery
Recovery is completely FREE. It's secured by disaster recovery plan and completed within 24 hours.
TCO Onxshop vs Wordpress
Wednesday 28 July 2010 by
Wordpress - The cost
Initial setup:
- web design consultancy £500
- first year hosting £120
- installation cost £100
- templates and modules £500
Running cost
- web hosting £120/year
- Wordpress CMS support (1 hour a month) £480/year
TOTAL COST IN THE FIRST YEAR: £1320
RUNNING COST: £600/year
Onxshop - The cost
Initial setup:
- web design consultancy £500
- first year of complete Onxshop service £240
- installation cost £0.00
- templates and modules £0.00
Running cost
- complete Onxshop service (hosting, unlimited support, security updates) £240/year
TOTAL COST IN THE FIRST YEAR: £740
RUNNING COST: £240/year
* costing based on a typical 10 page custom branded website with a blog
Two columns for everything
Wednesday 21 July 2010 by
This article will describe how to build any layout from a combination of two columns.
Building layout in web design is considered to be the hardest thing. The most popular method at the moment seems to be the grid layout. It's not really natural. In my opinion it's something like using a bitmap graphic when you should be using a vector graphic.
To understand this article you do not need to have any knowledge of HTML, CSS, or any Adobe products. You only need to switch off everything you know about web design and try to look at it as normal human being. Tons of material has been written about how to create 2 or 3 column layout for your website, like the "holy grail" articles or grid design.
The key thing is to use nested sets of two column layouts, i.e. Fibonacci number based set below. Insert the same code into [CONTAINER.1] or [CONTAINER.2] recursively and it does the trick.
<div class="twoColumnLayout {NODE.css_class}"> <div class="layoutWrapper"> <div class="top"><span></span></div> <div class="layoutContent"> <div class="layoutContentWrapper"> <h2 class="layoutTitle">{NODE.title|htmlspecialchars}</h2> <div class="layoutColumnOne"> <div class="layoutColumnWrapper"> [CONTAINER.1] </div> </div> <div class="layoutColumnTwo"> <div class="layoutColumnWrapper"> [CONTAINER.2] </div> </div> </div> </div> <div class="bottom"><span></span></div> </div></div>
Fibonacci number based layouts
| Class | Name | layoutColumnOne | layoutColumnTwo |
| fibonacci-1-5 | Fibonacci 1/5 ratio | 16.6% | 83.3% |
| fibonacci-1-3 | Fibonacci 1/3 ratio | 25% | 75% |
| fibonacci-2-5 | Fibonacci 2/5 ratio | 28.6% | 71.4% |
| fibonacci-1-2 | Fibonacci 1/2 ratio | 33% | 66% |
| fibonacci-3-5 | Fibonacci 3/5 ratio | 38.2% | 61.8% rounded to Golden Ratio * |
| fibonacci-1-1 | Fibonacci 1/1 ratio | 50% | 50% |
| fibonacci-5-3 | Fibonacci 5/3 ratio | 61.8% | 38.2% rounded to Golden Ratio ** |
| fibonacci-2-1 | Fibonacci 2/1 ratio | 66% | 33% |
| fibonacci-5-2 | Fibonacci 5/2 ratio | 71.4% | 28.6% |
| fibonacci-3-1 | Fibonacci 3/1 ratio | 75% | 25% |
| fibonacci-5-1 | Fibonacci 5/1 ratio | 83.3% | 16.6% |
Examples how to build different 1, 2, 3, 4, 5 and more columns layouts using just Fibonacci 2 columns are on Onxshop documentation page.
* The ratio of consecutive numbers in the Fibonacci is close to 1.618, the Golden Ratio - convergence of Fibonacci number in infinity. Fibonacci number for 3:5 would be 1:1.666, Golden Ration is 1:1.618
** 1.666:1, convergence to golden ratio, 61.8/38.2 (Golden ratio 1.618:1), convergence of Fibonacci number
Typical web design process
Wednesday 14 July 2010 by
This article describes our ideal process during web site development.
Setup goals
Describe the bits of information you want to include.
Create functional specification
This is the technical bit, you will need to get this done from a web design company, i.e. using our consultancy service. Here you should define page structure - information architecture.
Write your content
This is the creative bit. After your functional specification is finished and you know what page titles will be, then you can start to write text and compile some images and photographs.
Define brand and buy domain name
This is the artistic bit, especially choosing your brand colour and drawing logo. Buying domain name is not really an art, but choosing the right brand name / domain name is.
Create wireframes/prototype directly in CMS
This is the construction bit. This will produce browsable pages with logical layout focusing on usability. Best practise is to complete this directly in your favourite CMS i.e. Typo3 or Onxshop. You should use actual content, not just lorem ipsum.
Apply branding
This a the graphics designer bit. The challenge here is to format the wireframes/prototype in an aesthetically pleasing way.
Provide CMS training
This is final bit. Completing this will give you the necessary skills to control your website content.
Access a bigger market with your ecommerce
Wednesday 7 July 2010 by
Here you will find tips on how to enter a bigger market place, which will increase your traffic and sales and help target qualified shoppers.
Before you start make sure you monitor and measure your current traffic using Google Analytics with enabled ecommerce tracking or similar facility.
Submit your products to different markets
Google Product Search
To ensure your products are listed in Google Product Search, you need to submit an XML data feed. It's a free service.
More information http://www.google.co.uk/products
Amazon
- acquire a Pro Merchant Account for £28.75/month
- having EAN, UPC, or ISBN code would be useful
- Prepare a bulk upload of your products to Amazon
eBay
- open a PayPal account. Verification will take a couple of days
Promote international business
- highlight that you do international deliveries
- show prices in different currencies
These are just tips on how to access a bigger market place. Remember the value of your existing customers. Concentrate on current customers - create a mailing lists and send newsletter. Make sure you can export your current customers as CSV for MailChimp.
Creating Thumbnails Using the CSS Clip Property
Thursday 1 July 2010 by
I had an idea of creating a clip image by using CSS, so the CSS clip property looked like the perfect way to achieve that. After some googling I found Joe's article at seifi.org. Joe advocated an entirely functional, but unnecessarily complex solution.
I came up with a much simpler way. The trick is that you don't need to use the CSS clip property when you want to clip an image. Here is a simple way to clip an image to 300x200px, push 20px top and 30px left:
div.imageWrapper {width: 300px;
height: 200px;
overflow: hidden;
}
div.imageWrapper img {
margin-top: -20px;
margin-left: -30px;
}