Pricing for e-commerce web projects
A post of mine explaining some of the factors influencing the price of e-commerce websites has just been published by FreelanceSwitch:
“I would like an e-commerce site just like someothershop.com – how much would that cost me?” - It’s a common enough question, and one that always leads your average freelance web designer to take a deep breath and sigh ‘Well, let me see …’. There are many factors that influence the cost of an ecommerce web project, but when you communicate the vagaries to clients, there tend to be three that can have a huge impact – and are often only dealt with summarily: products, postage and payments
You can read the full article here: Pricing Ecommerce Web Design Projects
Online Marketing Training – resources from recent presentations
Right then – this post is primarily for those who attended my recent online marketing workshops which took place in Derry through September – but there’s plenty here for anyone interested in understanding more about how websites work – especially in relation to search engines and social media.
So, I’ve broadly categorise the resources as follows:
My Presentation
- My presentation as a PDF
- My presentation as a power point document – which contains my notes for each slide where applicable.
Setting Goals / Objectives for your website
- an extremely good book I read which covers this subject is Paul Boag’s Website Owners Manual I recommend it without reservation
- Paul has also written good articles about the business of owning a website – check out his blog and in particular when he writes about marketing and web strategy
Working with Search Engines
During the course, the area we spent most time on was working with the search engines – and search engine optimisation. Probably the best single resource for this area is Google’s own guide – you can read their web page here and at the top of that document there is a link to their PDF guide which I recommend everyone reading. Download it here.
- I also used this book for some background research into the topic – Search Engine Optimisation, an Hour a Day. It’s a good book and a good methodology – but it’s hardly essential reading for most of you.
- A great resource from a company I mentioned in a couple of the presentations – SEO Moz. They have a free guide – written from a more commercial perspective than Google’s guide, and you can download it here from a link on the right hand side of the page
Getting started with Social Media
A couple of presentations I used to get statistics / information from:
- a good intro ‘What is Social Media‘ which contains some basics and some good stats
- here’s a really good book that I again recommend without hesitation – but really only if you’re determined to get stuck in to facebook: ‘Successful Facebook Marketing‘ – which is also available as an eBook here: NetTuts Marketplace
That’s about it. I should point out that where I’ve linked to books, I’ve used affiliate links – i.e. if anyone finds this blog post and purchases a book from one of the links above, I’ll make literally Some Pence from the sale. That said, all the books mentioned above I own and recommend – and all were used to varying degrees when preparing the seminars I gave in September.
Great. If you’ve got any questions, just holler.
Web design podcasts, coding with SASS, a mobile framework and the Boston Globe
Okay, so here’s a motley collection of useful links I’ve found lately.
Since I moved office to Donegal Town I’ve found myself with a 20 minute each way commute. No big deal, but I had no desire to extend my working day to regain those 40 minutes – and my day is anyway constrained at one end by the school run and at the other end by my desire for some dinner – so I wanted to make sure I used those 40 minutes at least reasonably well.
So, I turned to look for some podcasts. Outside of the excellent Boagworld, which I already knew all about, I found the superb Big Web Show curated by none other than Jeffrey Zeldman and kept on track (mostly) by Dan Benjamin. It’s excellent – truly valuable insight into the workings of a design agency from one of the industries founding fathers, really. They also have interviews etc. but the ones I like best are just Zeldman and Dan chatting away.
Then, in .net magazine just today – there’s a good list of web design podcasts which has a few I hadn’t heard of. It’s nice to be able to use my time effectively. (I also consider listening to the new Laura Marling album an excellent use of my time).
So, also with .net magazine – an interesting article on coding better CSS using SASS. SASS builds on CSS frameworks but, importantly, takes a more programmatic approach to writing CSS – it allows for variables and mixins, giving much greater flexibility to your style sheets and – hopefully – speedier coding.
Sass is an evolution of the CSS syntax that has been enhanced to provide sophisticated tools for intermediate and advanced CSS developers. These tools make it easier to create and maintain style sheets over time by giving greater expressiveness to the style sheet itself.
What else, what else … oh yes, Mulberry – a mobile framework for app development. I’ve not had a proper play with it – and I don’t know when I will, but it looks quite interesting. When these things come along I always get slightly nervous about the learning curve but this seems to build on what I already know (HTML5, jQuery and CSS3) to streamline the process of mobile development … although I’m always wary of frameworks promising to ‘transform’ anything of mine into something else. It’s a bit ‘oooh, the mystery!’.
Mulberry helps web developers rapidly create content-rich native mobile applications. Powered by HTML5, CSS3, and JavaScript and built on top of PhoneGap, Mulberry transforms your content and data into a responsive, native, cross-platform mobile experience
Finally, I’m the only web designer in the world who has an interest in responsive web design and hasn’t yet name checked the Boston Globe’s responsive re-design. I am genuinely excited about this … it seems to be the first major, corporate sponsored, launch of a website using responsive techniques to serve content to all devices. Nice stuff – and there’s a good write up of it in .net magazine (again!).
The screenshots below show 3 different sizes (although the images themselves have had to be resized – they roughly correspond to screens of 1024px wide, 700px, and 410px) – this is the same content just in differently sized browser windows. There’s no server side trickery to achieve this – this is all done with CSS media queries. Good stuff.
Full Screen:
Next size down:
And then for mobile / small screen devices:
Right, that’s quite enough from me …
Prioritising features in web app development
A nice article from Contrast.ie about prioritising features in app / software development.
When you’re drawing the line around your software, make sure you’re not leaving in marginal utility features in an attempt to add more value.
And, as a sucker for a nice infographic – this image from their post sums it up nicely. Draw up a grid which plots features on 2 axes: % of people using the feature, and amount of time they’ll use it for. Nicely illustrates where development priorities should lie.
The Semantic Grid System
Really, this should be filed under ‘probably too good to be true’ … but let’s hear it out.
So, here’s the problem: there are a ton of great grid based CSS frameworks for designers to work with – frameworks which provide a baseline for dividing up the page into a usable grid via a series of <div>’s with class names that, whilst not being very helpful, are at least descriptive.
For instance, if you used the popular 960.gs you’d have a ton of div’s that look like this:
<div class=”grid_3″>
<div class=”grid_6″> … and so on …
… the complaint here is you’re mixing presentational information with what would otherwise be semantic mark up. Additionally, the frameworks are not fluid – they all appear to be fixed width, and they’re not responsive – they don’t adapt to small screen sizes (with the notable exception of Less Framework 4) or changes in device orientation
So … long story short … using LESS (confusingly, nothing to do with the Less Framework … grrr …), the dynamic stylesheet language – which enables you to use variables and mixins within your CSS – someone far smarter than me has built the Semantic Grid System. From the website:
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
All without any ugly .grid_x classes in your markup. Oh, and did we mention it’s responsive?
You can read about the whole thing on Smashing Magazine or cut out the middle man and go straight to the source.
Nice work.
Definitive Guide To Forms based Website Authentication
Ah – this is great, a complete low down on how to set up your forms for web based authentication. I love Stack Overflow … I have it set up as a standalone application using Fluid App. Whenever I have a web-dev question, it’s Stack Overflow first, google second.
The Definitive Guide To Forms based Website Authentication.
jQuery plugin for select elements / long dropdowns
A while ago, I wrote a wee post on a good solution for long drop down menus. Okay, at the time I said it was a ‘great’ solution … but y’know, times change.
So now, Chosen exists. Chosen is a plugin for jQuery or Prototype that makes select boxes better. Simple. But it’s great, and intuitive, and unobtrusive – without javascript, you’re left with standard select boxes (ta-da!) … but for most users it’s a greatly enhanced experience. I particularly like the Multiple Select with Groups. Good stuff.
I’m going to use this almost straight away … I’ve been looking for a more intuitive ‘user chooser’ for a recent web app that I’ve been working on … and this should be just the job.
Password Strength
So, this made me think – the latest cartoon from XKCD.com. I urge everyone to be using strong passwords for their email, their FTP information, their wordpress installation – etc. etc. And I normally go with the approach outlined in the first row of images below – choose a common enough word, throw in a couple of common substitutions, some capitals, some punctuation – make it about 12 characters long, and job done. Right? Wrong.
As neatly illustrated with this cartoon, you’d be better off with 4 random common words. D’oh.
Now, y’know, don’t change all your passwords to ‘correct-horse-battery-staple’, but you get the picture.
Beautiful design systems
So, I was reading this article from Happy Cog and it struck a chord with me as regards systems for design.
Whenever I start a web design project, I’m looking for elements from previous projects that can be re-used in planning the new project. I might lift an HTML code base from one, a set of responsive style sheets from another, or a collection of jquery plugins from a third. The goal is consistency – I want my projects to be coded and developed using a consistent base of ingredients … this way, it makes it easier for me to re-use items in the future, it makes it quicker to develop future projects, and it makes it clearer for any developer I’m working with to interpret the code (and my intention) going forward.
Of course, the people at Happy Cog are able to express it better than me, plus, they get to use a Cupcake analogy, which further marks them out as a bit special!
A beautiful design system is about finding the same balance of consistency and variety. Too systematic and the design becomes predictable and repetitive. Too much variation and the system is confusing and overwhelming.
One of our design goals is to create work that is sustainable, and our design process always aims for the right amount of consistency without homogenization. We like to create design systems that are easy to build, evolve, and use.
Check out the full article: Sweet Systems