Of course, some have become mainstays and are now part of our web surfing expectations: I’m thinking here of Asynchronous Javascript And XML that you and i know as “AJAX”; I remember playing with Google Suggest over 6 years ago and thinking what that the speed of the callbacks to a data set was something that would really enhance the web.

And you know it has, how we search using Google now has significantly changed since Google Suggest became Instant and was rolled out to the world.

Other technologies and platforms have come to change the way we think and work too. Take social networks for example: by radically changing the propensity for sharing across the social web, marketers can now tap into and measure latent demand for products and services like they’ve never before been capable of doing.

That’s subject all of its own, maybe ill come back to that.

The point I’m trying to get to there is that we have two practices that have become part of our natural day to day web use: assisted search and social sharing.

But of course these things are used in moderation and where appropriate.

Choose wisely Padowan

Personally i feel this is the key thing: deciding where the use of technology enhances the experience or aids the achievement of a particular goal, or set thereof.

Let me throw into the mix Flash. My first foray into coding was in Flash and it’s Actionscript language and, whilst it was enjoyable work and something i’m glad i did, there is dwindling demand for it these days.

I understand its demise, yet can’t help but find myself believing that for a long time, it was the single best platform for media streaming and online game development.

It had to be, or Miniclip would never have existed and guys like the stunning Justin at Cartoonsmart wouldn’t have existed.

But, it was often used and shoe-horned into websites where it just didn’t need to be: splash pages, ott menu systems et al were thrown into sites just because the designer / developer either loved the tech, believed it was the new standard or the client wanted it because well, it was all the rage and everyone was doing it.

Again I’ll say, it had its place, its bloody good at what it’s there for but not everyone needed it.

Hit 88mph

Move forward a few years and the whole Web 2.0 movement that brought us the AJAX revolution that I lovingly mentioned above, is largely responsible for the way we expect the we to work today. It offered us interactivity that we expect from today’s websites and applications; functions and actions that we almost demand of a website.

But you wouldn’t add an AJAX driven search bar to a website displaying this simple data set:

just because you know how to make the tech search those 4 listings and display a really pretty results system. If the information is presented well and fulfills the requirements, you wouldn’t need to.

Because that’d be inappropriate and gratuitous usage of the tech with no discernible difference in performance or user experience. I do know that the above is a very over simplified example, but the principle holds fast: why include features just because we can.

The end of the compass…

To finally get to my point: the pragmatic approach to developing web technologies and practices, brings me to the subject of the responsive web design movement.

This is something that I see as critical to the web, but something that I also see as another piece of know how to be applied as and when required to aid the user experience. Many of the websites that are built simply wouldn’t benefit from having their information and user experience re-profiled to suit a smaller screen.

Why?

Because of the way people use mobile devices.

As a marketer than happens to have a history with design & code, and as a marketer that sadly knows way too much geeky stuff about the way people browse (through spending too much time researching!) on their mobile devices, I can honestly say that the majority of  people don’t browse on these devices in a way that requires re-profiling of information.

However, that isn’t the de facto standard. As I said above, the responsive techniques are no doubt here to stay, and i know that there are projects and sites crying out for this fantastic lightweight solution to the multi-device problem, but I believe that this pragmatic “is it appropriate for the task at hand” approach is the current state of this trend and that the assessment should be the place to start.

As a businessman, that fits in with the honest and genuine way I treat our customers; a fair appraisal of the task at hand, the goals to be measured against then then fitting the technology around the problems to find a solution that delivers optimum results.

Whilst there is no harm in adopting whatever approach you see fit when considering any new web technology, and I do see sincere merit in adopting the “mobile first” approach to site development, I would always start with the basic “how does this benefit the end users of this site, is it something that the client needs to allocate budget for and will that budget allocation be justified in the returns from the tech inclusion”?

That’s all for now folks.

We’ve slightly tweaked up the e-commerce functionality to allow downloads of table plans that are then required as uploads to purchase the products. The site’s product pages also feature some stunning product photography by our very own Marc Wilmot.

Congrats to Sarah!

The client request was simple. “Can you embed a video on the web site if we give you the video on a cd – and we want it on YouTube too”.

“No trouble” we said.

Next day the cd arrives with the video on. We play the .avi file, 6 minutes of film with an audio music track playing in the background. (Completely unsuitable with the product BTW). But it’s client supplied so we move ahead and upload to YouTube, grab the embed code, pop it in and we’re away. Well nearly.

Next day, a nice email drops in from YouTube “Your video Life_After_Dark_In_The_Engine_Shed.avi may have content that is owned or licensed by Name_of_Band_That_Has_Seen_Better_Days” blah, blah, blah.

We inform the client who helpfully says “Oh didn’t know that. Can you take the music off and put something else on that is copyright free?”
“No trouble” we said.

But it was – a bit. After Googling and finding all sorts of convoluted so called solutions, we worked out a nice elegant one (but it is a Mac one, no idea if it will work on Windows).
And here it is…

1. You need to convert the .avi file (or.wmv) to a .mov file.
2. You can do this at the click of a button by downloading the free “Perian” plugin for Quicktime.
3. Install Perian then open Quicktime and open the .avi file.
4. Save as a .mov file.
5. Download the free “MPEG Streamclip”
6. Install and open the .mov file you have just saved.
7. File> Export to Quicktime.
8. Choose “Apple Intermediate Codec” THEN here’s the magic bit…
9. Choose “Sound: No Sound” from the drop down menu and click “Make Movie”

You now have a video ready to upload to YouTube with no background audio.
If you want to add your own soundtrack you can download some copyright free music (or create your own of course), crack open iMovie, bring in the soundless vid and add the sound track. Export, upload to YouTube and everybody is happy.

The design has been put together to reflect the brand Clearview has built and showcase the magazines on offer from the business.

We’re pleased to say that the site will endure more changes and refinements over the coming weeks and months and thank everyone at Clearview for their input.

Take a look: Clearview UK

I’ll take a full in depth look at how to set up iCloud to send & receive POP emails on iPhone, iPad & Mac once iCloud is officially with us and share my findings.

In the meantime, if you have any feedback, shoot it over!

One of the first things I did when we moved office was buy a trusty old Super Nintendo; why? Well for the simple reasons: I kick ass at Mario 3 and I want to chill out.

Another thing I’ve gotten back into this year is golf. Yes, I’m terrible and yes I get angry and yes it takes hours and hours to do. But, for the most part it chills me out.

One final thing I’ll mention before getting to the point is that I’ve started reading much more again. Thanks to Mr. Jobs, I can now carry my library around with me and read when I like.

When I say I’ve started reading much more, I dont mean books or articles about web, digital, marketing, business or any of that; I mean literature that I enjoy outside of work and outside of that mindset.

Of course, I still read the books and articles I “should” read, but not as obsessivley.

The reason I’m saying all of this is not to illustrate that I can hit a golf ball into some trees and then read Levitt’s text saying “that was crap, son” – no, the reason im saying this is:

Im much happier, I’m much more focussed and I’m much more productive.

I’m fortunate to work with the best guys I’ve ever known; I’m basically a guy that gets a bit stressed and these guys bring me round everytime. In fact one of the best pieces of advice I’ve ever had was from surrogate Dad Don who, after I’d had a tough day working on an assignment that had put me so far behind on work that I felt like I should spend all night catching up (and would have), said to me:

“Go out and play golf, let your brain work itself out”.

So I did.

The thing is, I came back working stronger, faster and more focussed; not because I’d played golf, but just because I’d done something else.

And so, to my real point: as a freelancer or small business owner it’s bloody hard to cut off. It’s hard to stop and its hard to actually allow yourself the time to breathe without feeling like youre letting yourself down or that you’ll get behind.

That’s actually the craziest thing ever. Working burnt out and tired, obsessing that “I could be doing something useful” and punishing yourself for having he time to relax that freelancing or working for yourself promised before you started actually doing it, will only lead to resentment of your time off.

Managed properly, things can wait a little while for you to chill out. Whether it’s half hour doing something you love, or taking the magical “weekend off”; just give it a whirl.

And, if you’re struggling, come down for a game of Mario Kart.

The site is really packed full of useful info from Darren, the creator of The Inform Group, and his style of presenting, delivery and thinking is really interesting and thought provoking. I really urge you to check out one of his talks if you get a chance.

Byeeee.

Drum roll…. it’s with the usual elation that we announce the launch of the new Jubb & Co Estate Agents website.

The site is a custom WordPress installation with a fantastic property management set up, allowing Jubb the flexibility to maintain a full portfolio of rental properties quickly and effectively.

The site was turned around extremely quickly, within 3 weeks from commission and, whilst maintaining a simple design, will prove very effective for Jubb & Co.

Thanks as ever to everyone at Jubb & Co.

First up, we’re pleased to have launched phase 2 of the fantastic Altogether Better website. The second phase brings with it a community blog, new image galleries, mailing list subscriptions and some fantastic forums where the ATB community can get together and chit chat. Also, integration of OpenID / Facebook / Twitter and Google logins will follow very shortly.

A little further afield for the next launch; Codebox.co.th – testament to remote working, these guys are clients in Thailand and the entire site was briefed, designed, built and populated without a single face to face meeting – ah the wonders of the net.

And finally, back to a local bunch of financial advisers with a brand new launch for Lifetime Financial Management.

And that friends, is a wrap!

Author’s note: I started writing this last year but never got the time to publish it out. The steps herein are still valid but Joe Audette has added some cracking new features to mojoPortal since then, so I recommend you head over to the mojoPortal blog to stay up to date.

mojoportal is a .NET driven CMS system developed by a great developer & personable guy, Joe Audette; and supported by a friendly and knowledgeable community. If you’re a regular reader of my blog you’ll know that I post quite frequently regarding development and tidbits surrounding mojoPortal, most frequently I blog or Tweet about mojoPortal skin design or things you can do with your mojoPortal themes.

For those unfamiliar with mojoPortal, here’s the opening gambit from mojoportal.com:

Need to develop a custom web application? Why start from scratch? Save time and money on your next web development project by developing your custom functionality on top of mojoPortal.

We’ve done the heavy lifting to provide elegant plumbing for role based security, navigation, skinnable design, and more, so you can focus on your application features.

- mojoportal.com

And that’s summed up perfectly.

Now, whilst mojoPortal can do so much more than build standard CMS websites – that is certainly the most obvious and common use for this fantastic .NET CMS system. I find it to be the best CMS for clients based on its flexibility and extremely wide range of features that come bundled with the initial download.

So, you’re keen on using mojoPortal for your new website, or for a client’s website? Well mojoPortal, as it says on the tin, does all of the heavy lifting for you. However, you’re of course going to need to customise the look and feel of mojoPortal. This is where mojoPortal skins / mojoPortal themes come in.

mojoPortal Skins & Themes – Colour Your Website As You See Fit, And Change Anytime!

As with most CMS systems, mojoPortal allows “skinning” – that is to change the look, layout and feel of your website by creating mojoPortal “skins” (sometimes called mojoPortal “themes”). Creating new mojoPortal skins requires a fair level of design ability couple with a sound level of HTML and CSS understanding, but if you’re in the right mindset to learn these things, even a new web designer can create a good looking mojoPortal skin.

The beauty of using mojoPortal skins as opposed to other CMS systems is the complete design flexibility you have with this system – you truly can create an entirely bespoke design on top of a fully featured website without any layout constraints whatsoever; a pleasant change from alot of CMS systems around right now. Make your mojoPortal themes as you want them, and change or upgrade them when you like – without sacrificing current content or functionality.

Creating mojoPortal Themes & Skins From Scratch

When creating your own mojoPortal themes or skins it’s important to find a process which you’re comfortable with. After being a mojoPortal skin designer for a while I’ve come up with my own process for putting together my mojoPortal skins.

Howeer, there is something I’d like to mention: this is purely a method that I use, It’s not set in stone, it’s nothing “approved” but it’s just how I work. I am totally open to suggestions, tweaks and improvements to help the mojoPortal community out.

What I’ve tried to do is cover as many bases as possible and answer as many questions as I can that cropped up when I started creating mojoPortal themes. Joe is forever evolving this fantastic system so I will try my best to keep this up to date as I find myself asking Joe more and more questions – alternatively, ask him yourself and share in the comments if you feel it is relevant.

My mojoPortal Skins / mojoPortal Themes Build Process

Here’s my process (this is based on the base process highlighted here: http://www.mojoportal.com/Forums/Thread.aspx?thread=3177&mid=34&pageid=5&ItemID=4&pagenumber=1#post13580):

• Download Firefox
• Download the Firebug extension for Firefox
• Create your design file, preferably in Photoshop or similar
• Slice and dice your Photoshop layout as you need, and create a separate “logo.gif” file for your site logo
• Once done, create a single page template in fully valid (X)HTML and CSS (note: I’ve created a free mojoPortal skins CSS starter sheet that you can use wich contains the classes assigned to the left, centre and right content columns all ready to code)
• Tip: Call your stylesheet “styles.css”
• Tip: Give your <body> tag a class of “pagebody” and apply all styles that you would normally apply to <body> to this class
• Tip: if you plan on using dropdown menus within your mojoPortal theme, I’d suggest using the Superfish dropdowns which are supported natively in mojoPortal. To do so, create a <ul> with a class of “sf-menu”:

  <ul class="sf-menu">
  <li><a href="" title="">Some link here</a></li>
  ....and so on
  </ul>

  Apply the relevant styles to this class and its children, then check out the documentation on using mojoPortal with SuperFish, along with the Superfish website

• Test your web page thoroughly in Firefox (the most standards compliant browser there is today), get it looking exactly as you want it and then be sure to run some cross browser compatibility checks on it. I normally test in Firefox, Safari, Google Chrome, Opera and (boo) Internet Explorer 6, 7, 8 and 9 (where possible). If you make any IE specific CSS changes or hacks, put them in files called “IESpecific.css” and “IE7Specific.css”. This will help the transition to a mojoPortal skin later on. Your web page needs to look as close to the same in each browser as you can get it – but that’s standard cross browser compatibility for you. What a pain!
• Once you have your basic HTML and CSS page looking great across all browsers, you’re ready to make it into a mojoPortal skin
• Jump off to the mojoPortal.com site and download the latest release, install either on a local machine or a remote hosting server (be sure to check out the hosting requirements before buying any web hosting)
• Run the setup at http://www.yoursite.com/Setup/Default.aspx
• Watch it fly

Making A mojoPortal Skin From Your Basic HTML Webpage

The next step is to transform your basic webpage into a mojoPortal theme. Here’s what I do:

• Run your mojoPortal website which will be installed with the default mojoPortal skin, “artisteer-greenlagoon”
• Head over to the “Data/sites/1/skins” folder and copy the “artisteer-greenlagoon” folder
• Paste the copied folder into the “Data/sites/1/skins” folder and rename it something meaningful – MySkin maybe? Your shout.

Ok this is where it gets a little complicated, but only a little. Read on…

At this point I’d advise you head over to mojoPortal.com and check out some of the mojoPortal skins documentation, namely the texts on understanding the Layout.Master file and the way that mojoPortal assigns dynamic classes throughout the system.

Once you’re fairly happy with the documentation jump right in and start tinkering with the mojoPortal skin you copied earlier. Remember, we copied the “artisteer-greenlagoon” skin and renamed the folder to our own name, it should be sitting in “Data/Sites/1/skins”.

From there this is what I do:

• Open up your skins folder and crack open Layout.Master
• Copy your “style.css” file from your dummy HTML page in to your skin folder
• Strip out all of the none mojoPortal controls including all of the layout HTML markup
• However, do leave in all of the mojoPortal controls (you can’t miss them, they look like a normal ASP.Net control but with a different tag prefix)
• Also, leave in the <html>,<head> and <body class=”pagebody”> tags.

Sounds weird right? If you’ve familiarised yourself with mojoPortal skins documentation you’ll recognise that what we’re actually doing is leaving in all of the mojoPortal controls that the layout.master file needs to function.

Now, if you’ve coded up your basic HTML file nicely, indented your code and maybe even laced it with comments, transferring this HTML markup to your new mojoPortal theme design is easy!

Let’s assume the following:

1. You have a centered website layout with a class of “websitewrapper”
2. You have a header (.header), a left column (.leftside), a right column (.rightside) and a centre column (.center-rightandleftmargins) along with a footer (.footer)

Note: if you’re wondering where the centre class of “.center-rightandleftmargins” comes from, check out the mojoPortal skins documentation or my blog post “mojoPortal Skin Design – mojo’s Dynamic Columns Explained”.

Ok now, what I do is:

• Copy each main element of my initial HTML page into the newly stripped layout.master file – I do this in a segmented fashion with care and purpose
  • Start with your wrapper (.wrapwebsite here), drop that around everything that you want included in the site including all of the, as yet unpositioned, mojoPortal skin tags
  • Next, copy all of your other main tags in, either one at a time or all together if you’re more confidentTypically I’ll drop my HTML into the page in this fashion so that I end up with the tested HTML from my dummy page within the mojoPortal skin layout.master file. The mojoPortal controls that were remnants of the original “styleshout-refresh” mojoPortal theme will, at this point, be below the pasted HTML – ready to just grab and drop in place of the “static” HTML markup already created.

All that’s left to do with your mojoPortal theme layout.master file is replace the static HTML markup that we used for testing with the mojoPortal controls that create the CMS’s dynamic content.

How to do this?

Let’s say that within the footer of your tested HTML page you have something like:

<ul>
<li><a href="sitemap.aspx" title="Sitemap">Sitemap</a></li>
<li><a href="privacy.aspx"  title="Privacy Policy">Privacy</a></li>
</ul>

Fairly standard footer markup isn’t it. You usually see these links and a couple of others (Terms & Conditions, “Top of Page” etc) in the footer of a page.

Let’s use the two example links above and look at how you can replace them with mojoPortal controls, and more importantly, why you would replace them in your mojoPortal skins.

First, the why: using mojoPortal’s built in controls for each allows you more flexibility and extensibility moving forward. The site map is fairly standard, however something like the Privacy Policy has a standard URL within the mojoPortal system “out of the box” – “privacy.aspx”.

This is normally fine, and you could hardcode it, but the benefit of using the mojoPortal skin control is that, should you change the URL of your Privacy Policy, you have no maintenance to carry out on the skin – you simply change the target URL of the Privacy Policy within the mojoPortal admin area (Administration > Site Settings) and the skin updates itself.

Setting mojoPortal's Privacy Policy URL from Administration > Site Settings

Note: when you set the Privacy Policy URL within the site settings, you still need to create the physical page within the website. The setting within the Administration panel simply acts as a convenient way to update your Privacy Policy URL without having to tweak your mojoPortal theme’s Layout.Master file.

Replacing Standard HTML Markup With mojoPortal Theme Controls

In the example we’re using, we’re going to replace the Sitemap and Privacy Policy links, which are currently hardcoded in to our dummy HTML markup, with two mojoPortal controls:

<portal:SiteMapLink id="SiteMapLink1" runat="server" />

which is taken from the “styleshout-refresh” skin, the one I use as a starting point. We’ll be using this along with

<portal:PrivacyPageLink id="pp1" runat="server" />

which is taken from Joe Audette’s response to a forum post regarding mojoPortal’s privacy link control.

The replacement is easy, simply copy the <portal:SiteMapLink> control and paste in place of your previous anchor tag. Then, just do the same with the <portal:PrivacyPageLink> control. The only other thing that you will need to add is an atribute to each: “RenderAsListItem=”true”.

This tells mojoPortal to display each of these links inside an <li></li> element – not essential to your mojoPortal skin but relevant to our example above.

A couple of other bits that I include in my footers tend to be:

<portal:SkinPreview id="SkinPreview1" runat="server"></portal:SkinPreview>
<portal:CopyrightLabel ID="cl1" runat="server" />

These show a link to a printable version of the page (using a printer friendly stylesheet) and a copyright label respectively; with the copyright name being pulled from “Your Company Name” within the Site Settings screen. There are a pile of other things that you may want to include but I’ve not mentioned here, the most common I guess being (X)HTML & CSS validation links.

I’m not going to list all of the controls available here but (sorry to keep saying it) instead I recommend you take (another?!) close look at Understanding The Layout.Master File on mojoPortal.com – it tells you the essential controls that mojoPortal needs to see to function correctly.

Note: Most of the mojoPortal skin controls have user options that can be assigned using attributes within the tag (such as the previously mentioned “RenderAsListItem”), the Intellisense (Ctrl + Space) within Visual Web Developer Express throws contextual attributes out so you and pick and choose on a control by control basis.

The only thing to do now is follow the same copy and paste process for all other portal controls you’d like to include in your new mojoPortal skin.

Obviously you’re going to want to create some sort of admin links (not to be confused with the admin toolbar which appears when you’re logged in), and most of these can be found within the Layout.Master file of “artisteer-greenlagoon” but if not, the Layout.Master file of the other pre-installed skins will give you a starting point for these – it’s actually following the same procedure as adding the copyright label and so on.

Test, test and more test

When you’re ready, switch your skin on by heading to “Administration > Site Settings” within your site and start fully testing!

There’ll no doubt be a pile of things that need tweaking but, this will give you a solid base to to work from and 95% of your skin should work just fine.

Good luck, and remember the forums are always open!