WordPress.com is purposely censored today in protest.

Wikipedia is about to Join the Blackout as well

To learn more about SOPA, The “Stop Online Piracy Act”, visit the wikipedia page dedicated to explaining the details - Stop Online Piracy Act. We have no doubt that anti-Piracy is being used as a guise to clampdown in the freedom of spreading information and on legitimate free speech. Personally I’m not concerned about  prevention of actual piracy as i support this in that stealing other people’s products is obviously wrong. I am more concerned of the hidden agendas and ripple effect of consequences which this piece of legislation attempts to establish.

Some of the big players opposing the Bill include Facebook, Google, Twitter, eBay, Yahoo!, Mozilla, Wikipedia, WordPress.

Check out what Mashable had to say about Why SOPA is Dangerous.

Join the protest - http://sopablackout.org/

A Wide range of WordPress Plugins exist to support the Anti-SOPA movement - http://wordpress.org/extend/plugins/search.php?q=sopa Some are even going to the extent of laying the ground for establishing an alternative internet to circumvent censorship and governmental controls by working on a plan to launch an Internet in space – German Hacker Group Working on Space Internet

Grab the Pencil & paper just to be sure

I didn’t want to end up diving in too soon with photoshop and ending up shooting myself in the foot by spending too much time on prepping a look and feel without a clear layout approval, so I quickly threw together a couple of sketches based on the elements the client requested.

First Draft Sketch

I made a quick pencil sketch with some important bits highlighted to outline my thinking on how I planned to approach the page layout followed by a phonecall to make sure I’m understanding what each element actually is and what it’s function/priority is. In cases like this one there’s no need to go the full digital wireframe and a well planned pencil sketch could very much suffice.

Finalised Wireframe Sketch

Using Pre-designed graphic elements to speed up the process

Based on the concept I knew I had to create a box for the competition they were running as their concept relied on the users guessing what’s inside the box. Soi a quick search on google for some freely available vector graphics gave me a few options to work with.

I also regularly collect web elements and graphic styles which provide photoshop layered documents when I need to throw together a quick UI in emergency situations like this one, so I tapped into that folder and threw together a few Photoshop layouts within an hour or 2.

No time to think, just whack it out now

I initially decided to just hunt down an existing free HTML template which had enough of the ingredients to bash into shape. I had to make some quick decisions about how we’d approach the design & build due to the limited timeframe, but also wanted to explore some newer un-chartered territory.

Draft 1 - Graph Paper bg

Draft 2 - Brownpaper bg

I’d been eyeing the CSS3 & HTML5 framework called Less which is now in version 3 of it’s development. With it one can quickly build HTML 5, cross browser web layouts which re-adjust themselves to the specific media or device resolution being used to view it. I also employed a few simple CSS3 techniques to give the design a little spice without needing to use too many complicated background graphics or image text. This included text-shadow, border radius and box shadows as well as background gradients.

Granted not all of these techniques are completely cross browser compatible, but at least with the text-shadow being the least supported feature, I could still have a decent enough looking design in lower end browsers without too many graphics needed.

The full width was really the main focus, so most of the design and styling considerations were applied to work better in this width.

Studentology Full Page Width

This is the main layout suitable for average computer screen resolutions

Once that was established, I had to use the maximum width for smaller more tablet like screens like the iPad for a slightly narrower layout. In this site, CSS media queries are used to switch the width and layout styles for certain elements so they realign and reorder themselves to fit into the new screen width. For example, most of the elements within the blue content area are 30% width and floating to arrange themselves next to each other, which will be switched to a different percentage for smaller screens.

Scripts, scripts and more scripts

To avoid needing additional pages I made use of a jquery fancybox script to allow the video and entry form to popup over the page. I also used Jquery solutions to save space with the competition steps, using a slider to show each step of the process, and for the twitter feed in the footer. JQUERY is your friend, as long as you don’t mix it with too many other Javascript libraries which leads to script conflicts.

iPad width

This is the main layout suitable for tablet screens like iPad

As you can see that some elements are now 50% of the full width of the layout while others are 100%, now changing the layout and order of the elements.

On another note, and even though CSS3 is completely capable of generating the effect I’ve used on the call to action buttons, I stuck to using graphics instead there as I didn’t want to run into too many degradation problems with the call to action items. At least for those elements it doesn’t matter what browser you’re using you’re pretty much going to get a nicely styled call to action without too many hours or device specific code.

Mobile Width

This layout configured to display for small screens like mobile phones

I ran into a few problems with older versions of Internet explorer as you would imagine, so ended up employing a javascript solution called If Oldie, which redirects the Internet Explorer viewer to a plain HTML version of the site which has a fixed width and makes use of XHTML instead of HTML5. I didn’t have enough time to troubleshoot the HTML5 shiv script which comes with the Less Framework and is meant to allow IE to recognize HTML5 tags, so that part didn’t work out as planned.

Even though due to time constraints I wasn’t able to craft everything to perfection I’ve learnt some really valuable lessons by tackling this project in the way that I did.

1. Use frameworks and existing tools instead of always building from scratch, it helps with rapid development.
2. Building device specific web pages is easy when you use the right tools.
3. When you run into problem, don’t waste too much time trouble shooting, change direction quickly.
4. Collect freely available web resources for emergencies, it’ll save your life when you need it most.
5. Use 1 Javascript library for all your needs to avoid script conflicts, JQUERY is your Friend!
6. 24 Hours is a ridiculous timeframe so never agree to design & code a page in that amount of time unless you’re gonna hack & smack.

This post basically outlines some of the decision making, tools and processes I employed to whack out a really quick but effective minisite which looks good, works across devices yet still employs some of the latest development tricks. It’s not perfect nor 100% bulletproof but it did the job in the time and budget available.

If I had a little extra time I think I could have implemented a much more HTML5 compliant solution which works across most browser using many of the fallback methods available at this well organised resource.

Look & Feel

I suppose explaining where I’m going with this desert scene might help for starters. The nomad concept has been with me for some time, though not in this form. As you may know, I’m no city slicker. I’m also very much set on remaining as independent as possible, something the Bedouin values extremely highly. I’m a traveler at heart. So this is partly where the desert scene comes in.

Saving Space with some Ajax/Design Patterns

Regarding the layout and general interface, there’s a few space saving design patterns I want to build into the homepage, which include using some jquery tabs, a slider and an accordion to fit everything into a smaller space. My current design is way too long and lacks a few features above the fold. I don’t want to loose anything but feel I need to tuck lots of excess away in a more logical manner.

Integrating Social

I definitely need to integrate my social links into the interface much higher up the page, as well as include a twitter feed, what would we do without twitter. I like the idea of a user generated feed or post wall but am uncertain how this might impact the space on the homepage.

Showing my Portfolio work

Something I have failed hopelessly at s keeping an up to date portfolio area. I don;t even have a latest work feature on my current site so this is a must have i think. Of course it needs to be coded in such a way that it’s easy to maintain as well me always being pressed for time.

Quick Contact & Chat widget

I’d also like to include a few quick ways of getting in touch, like a mini form as well as skype me & gtalk widgets which allow people to chat with me directly when I’m online, which is like all the time.

My Blog area will remain pretty much the same in terms of it’s location and general functionality, but of course in needs some space saving neatening up. I also need to get a featured post sorted. I’ve been toying with the idea of having 3 main areas of featured posts, and running titles of these in the header area somewhere but haven’t fully embraced this idea yet.

Menu with Subtext

I really love the idea of menu links with sub text explaining the links in more detail so these are almost definitley going to be part of my next menu. I also need to rework the way I display my pages, what stays, what goes and what needs to be added. Lots of information-architecture work lies ahead, and the dreaded writing!

Header Message

My header will have to have a brief explanation of where you are and who i am, some kind of elevator pitch style slogan. I’m considering having a few messages, one for first timers and a few others for returning visitors. I like the way yoast.com addresses the visitor based on where they have come from.

What do you think? Want to earn your own design/redesign?

I’m thinking of turning this into some kind of competition, asking for feedback and awarding the best advice a design of their own. What you you think? Would you be interested in participating in something like that?

I’m still at wireframe stage but would appreciate some feedback from anyone out there with regards to the little mockup above and also how you think I should improve on my site based on the current design & layout.

So I need to know about:

Colour, Graphic Elements, Layout, Usability, Readability, Functionality and last but not least, Content, the area I think probably needs to most focus.

One or 2 fixes later and I’m glad to say WP 2.7 RC1 has given me no more problems and is a huge pleasure to use. I recommend upgrading, but be sure to disable all plugins, and follow the regular upgrade process very strictly by backing up all files, backing up your database and taking it a step at a time. If there’s anything special you’ve done within your wordpress install be sure to pay attention not to overwrite any custom mods.

Once you have WP RC1 running upgrading is as simple as one click away once the official release is out.

I’m currently working on a detailed step by step dashboard guide for 2.7 which I hope to make available in pdf format in the next week or 2.

WordPress 2.7 sees a major overhaul of the administration interface, integration of some great previously external plugin functionality. The menu and easy to use dashboard customisations are my favourite improvements making managing yoru wordpress site easier than ever. You can also quickly swicth off certain panels which are of no relevence to you or your clients.

Grab a copy of the latest release at www.wordpress.org, or stay tuned for the official version which should be available in the next few weeks. I just couldn’t wait anymore.

I was spurred into action to revive my Web Guru Spotlight Series of interviews when I came across the release of Quirk e-Marketing’s latest online marketing e-book. Rob Stokes, the brains behind Quirk has been a key figure in shaping the online marketing landscape in South Africa.

I have been watching Quirk with interested over the last few years due to the fact that they just seem to be staying ahead and being innovative in a seemingly saturated space.
So enough about Quirk, let’s chat with Rob, the man responsible for getting the Quirk Ball rolling.

Hi Rob, thanks for giving us some of your valuable time to chat and answer a few questions.
So you started Quirk the year after I graduated from design School. What lead up to the founding of Quirk?

I’ve always been a bit of a serial entrepreneur and Quirk was simply the next step for me. Quite honestly at first it was just a way of making some extra cash so I could stop delivering pizza like a poor student…

Are you positive about the direction the online media space is taking in South Africa.

I think we still have a long way to go, but it’s only going up. With SA being a relative laggard in global tech this also has some long term positives. For example you don’t see Neotel laying down copper cables. They will be fibre from the start and that will really benefit us in the long term.

Yes, I’m a glass half full type of guy

Your team are called QuirkStars and your office is called the Quirk Station, tell us a bit about this and the working environment you’ve created.

I absolve myself from all blame on these names! The seemingly silly names have evolved from my staff over the years and whilst we know they are a bit geeky, we’re proud of being QuirkStars so I guess it’s just stuck. As for the working environment, I think we have the best coffee in Cape Town! Seriously though, I think we have created an open working environment where the creative juices can flow.

Do you think the Online Industry is saturated or do you think there’s space for more players?

Definitely not saturated, but definitely fragmented. I think as the industry evolves we will start to see some consolidation and within 10 years I’m sure the online marketing industry will mirror the structure of the traditional ad industry today. I’m happy to mirror their structure as long as we don’t mirror their stereotypical marketing beliefs

What is the potential for the online industry to have an impact on the unemployment rate in South Africa

At the end of the day, pretty much anything that stimulates an economy will benefit unemployment. Ferdie Bester said to me the other day that the best thing we can do as South Africans is start a business and employ people and the internet has made that easier than ever. Now, if only our government would support entrepreneurship as well as the internet does…

How do you think we can nurture better skills in the online space in the strategic, creative & technical spaces? Should the focus be on educational institutions or industry players?

I think there needs to be partnerships between the private and academic sectors. The reality is that cutting edge online tactics evolve from industry and not academia – this is as a result of competition driving innovation.

I’d like to see more companies across the board doing their bit to work with the tremendous academic institutions in SA.

The team you have working for you seem to be a really uniquely chosen bunch and are stars in their own right. Could you give us some insight into your hiring approach?

For starters it is our goal to have a brand which people want to work for. Solving this is half the problem.

Secondly we will experiment with pretty much anything to find people. From Facebook ads to hiring bounties we have tried many things, some have worked, some haven’t, but that’s what online marketing is all about.

Once someone cracks an interview, they are generally seen by their possible team leader and our COO. It might take a few interviews, but if they prove that they have the skills, they then get to be grilled by me to ensure they will fit into our culture. I ask a lot of strange questions, but if you make it through, chances are you rock.

Apart from that, the only other unusual thing is that we work on one man one vote. Inpsired by Ricardo Semler, this means that I, as the CEO, can get outvoted on hiring people. In fact I’ll admit that in the past I’ve voted against hiring someone who the team wanted. We hired that person and I’ll admit that I was wrong and they turned out to be awesome… ah the power of democracy.

Is there a difference between online & offline entrepreneurship?

The fundamentals remain the same only the tactics change.

Many people see online entrepreneurship as this ultimate money making space similar to the way they did before dot bomb. Do you think a crash might be headed our way?

No. Some will fail, some will succeed, but I don’t see an industry wide crash.

I’ve spent the last few weeks teaching some newbies XHTML, CSS & WordPress. What do you think would be the most essential additional skills to pass on to newbies.

Basic HTML, SQL, SEO and PPC. Once you’ve wrapped your head around those concepts, marketing on the internet becomes a far easier and more intuitive process.

You’ve been very involved in the web community since I started getting into the whole meetup / (un)conference scene, has this added value to your organisation?

I think it’s important that we are a contributing member of the community in which we work. Being part of these events goes a long way to achieving that so yes, I do think we have benefited.

Would you recommend all businesses go social in this way?

I think businesses need to interact with their customers and community on their terms and in their space. If this means an unconference then so be it.

I’ve always been an advocate for giving before receiving and admire your gesture of releasing your e-marketing textbook. Does the cost of producing it really justify this type of approach?

Publishing a book is not an easy or cheap exercise. The Quirk eMarketing book took us 8 months and all in all cost us almost half a million Rand.

On the surface we will make a massive loss, but we’re not looking at book sales to drive any sort of ROI for us on this.

This is an example of capitalist driven social development. Quirk will gain from this if we can get thousands of students each year to enjoy learning from our book. These students will become our future staff and customers and it’s very difficult to put a price on that.

So that’s how we justify it from a business perspective. From a personal perspective we have done something really good here. This book will improve the lives of many people and that makes us feel incredibly good.

Lack of access to information and knowledge tools & resources is a big disadvantage for the majority of South Africans.

Do you think there is a serious business case for corporates developing capacity in this area?

YES!

We want the Quirk book to be an example to companies in all industries to do the same.

Open Education began primarily as an initiative at school level, but eventually I hope it will permeate all areas where skills are required. Imagine if De Beers wrote a Geology textbook…

Have you focused much on mobile strategies and where do you think the coming mobile revolution could have the most impact?

No, this version of the textbook is very thin on the mobile side. However as we needed to have the book ready for the second university semester of 2008 we left out a few chapters.

We plan to update the book over the next few months with about 5 new chapters of which mobile is definitely one.

Do you think consumer action or provider competition could ever have an impact on the cost of bandwidth in South Africa?
Without doubt. Both are fundamental to economic efficiency and the internet itself promotes both by giving consumers a voice and lower barriers to competition.
I found the launch of Brandseye very interesting. How has the uptake of this innovative solution been so far?

It’s been OK. Internationally it has been well received but locally the mindset isn’t fully there yet and I do acknowledge that the price makes it pretty exclusive.

However we have a plan to cater to a wider audience so watch this space…

Do you guys use Brandseye for Quirk?

Of course!

Do you think knowledge work and mobile workers are on the rise in South Africa?

Definitely!

What are your favourite tools you use as a knowledge worker on a daily basis?

Twitter, our internal Wiki, RSS

Mac or PC?

Sigh…. PC

Firefox or Safari?

The Fox… it’s the only way!

How do you feel about IE6?

Poef

What’s next for South Africa Online?

Video. Currently it’s a pain to watch online video locally. I’d like to think that in the next 2 years South African’s will forget what “buffering” means…

Any last words?

Thanks for a thought provoking interview…!

Thanks to “YOU” Rob and we look forward to hearing you speak at the Heavy Chef session on the 27th.

This month’s Heavy Chef session will see Rob Stokes, author of the e-marketing textbook and founder & CEO of Quirk e-marketing, giving an introduction to e-marketing.

Heavy Chef sessions are run by the guys at World Wide Creative on a monthly basis. They’ve been hosting top events for the last 1.5 years. I missed the last one which focused on e-commerce but definitely don’t want to miss this one.

Here are the details:

Aug 31 (Cape Town), 5.30pm – 7.30pm:introduction to eMarketing

Speaker: Rob Stokes, CEO of Quirk eMarketing

Want to attend? Email Rowan to enquire about booking your seat.

Seeya’ll there!

They haven’t forgotten to follow a few simple rules though and by first collecting your email address and asking if u’d like to subscribe to their newsletters, they’re definitely taking their own advice and using this great resource to build their own database.

I’ve got great respect for the Quirk way of doing things and for many of the guys who form part of their sterling team. they’re a truly community focused Agency always around, chipping in and showing their faces when anything online goes down.

Download the entire eMarketing textbook for free, or per chapter and learn holistic and integrated eMarketing tactics from the team at Quirk.

The table of Contents Include:

• Email Marketing
• Online Advertising
• Affiliate Marketing
• Search Engine Marketing
• Search Engine Optimisation
• Pay Per Click Advertising
• Social Media Marketing
• Viral Marketing
• Online Reputation Management
• WebPR
• Web Development
• Online Copywriting
• Web Analytics and Conversion Optimisation
• Glossary of Terms

After reading Ramon Thomas’ post which is his response to an article by Mandy Dewaal in ITWeb, I thought I’d give the topic a bit of focus, not just because Ramon mentioned me in his article, but because it is an issue which I feel needs to be addressed.

The White Boys club

Mandy’s article was specifically focused on web 2.0, and she admittedly calls it a white boys club. I would say the issue spans across the majority of media & communications focused industry. I’ve been a designer for close on 10 years now, not the best by a long shot but I’ve been around the block a few times and seen my share of Brands and communications campaigns.

What does BEE really mean?

I spent some time specifically in the Advertising industry and found it to be a place where the old South Africa is alive & well. I remember not too long ago working in on of the big Agencies we were sent a notice saying that our agency is now BEE compliant. So naturally I took a look around me and found a handful of people of colour, mostly in junior or non-decision making positions. The “Black” people filling mostly kitchen & cleaning roles.

I asked what the BEE status was supposed to mean and got a very poor response to my pointing out that in fact there were only a handful of people of colour out of the majority white staff compliment.

When pitching for a huge SA Brand, most of the coloured & black people were summoned into the boardroom along with some other creatives & strategic people to shoot a video on the agency brainstorming ideas.

Currently I have been looking around to find some good designers and web developers to partner with or outsource work to and have found a lack of talent form the non-white communities. I think one of the factors is economics, especially if you consider what it costs to study design nowadays. The majority of young non-white people studying design is also significantly lower than their fairer skinned counter parts.

Signs of racial disharmony and a coming storm

We take a step out of this scenario and look at the recent spate of Xenophobia which has shaken up our country and ask those in decision making positions in companies across South Africa. Do you think you will remain in the driving seat forever? I am amazed that people do not fear the racial tensions finally reaching their own doorsteps. We need to reach out to each other before it’s too late.

Can Affirmative action work without proper development

Affirmative action, though it has been heavily abused in many cases has a rightful place in the society we find ourselves in. If we don’t implement a sustainable plan of affirmative action and affirmative development or empowerment, in the not too distant future we will be staring a Zimbabwe type situation in the face. Development initiatives are crucial. Young black talent needs to be nurtured in the web & other communications arenas so the messages moving across the many media can be more representative.

I think companies can make a big difference as well by providing training for interns or fresh graduates from the more colourful side of the divide. I for one have been trying to track down young black graduates to employ on a part time basis or to outsource certain functions to though it’s tough finding them from where I am standing as well.

Web 2.0 community needs to be more open

As many have pointed out before, the web 2.0 community is very much a closed community though it should by it’s very nature be the opposite. Why then is it that we find the same names mentioned over & over to a degree that you can read the title of a post or project and give a very calculated guess at who’s names will be mentioned.

I do agree, many of the names have achieved success in their respective fields, though in many cases, when initiatives are conceptualised, gatherings co-ordinated and opinions disseminated, many people are perpetuating the problem by involving the same people over & over making it a very boring and incestuous scene.

I’m not going mention any names here, but I’m sure you know what I mean. One positive development which has opened me up to some of the non-white professionals in our industry is the Tech Leader Platform, which I have been invited to contribute towards as well.

Darren Ravens, who I only stumbled across by tracking this conversation, commented on his own site saying:

What these two pieces highlight is that there exists a network failure. The nature of social networks (the real world kind) is that there’s a tendency for homogeneity, especially in the short to medium term (long term always trends towards the diverse). Birds of a feather and all that.

To create diversity within specific sectors it’s important to sow the seeds of integration. Once you’ve done that things are more likely to naturally become inclusive.

With all of this in mind, for a while now I have been looking at creating an online network of black web professionals.

http://www.darrenravens.com/2008/06/02/where-are-all-the-black-web-professionals/

It’s an idea which has it’s pros and cons. By creating a non-white network will probably perpetuate some of the problems we are experiencing.

I was thinking of this issue in relation to general integration of the races in our society and wondered how to go about establishing more connections between people of different races.

We are still very much living in our racial silos faced with barriers like language, culture, religion and economics. What can be done on the whole to mix us up a little more.

I think an Online Social Network which allows people from opposite sides of our colourful spectrum to connect and interact, share ideas and solve problems together would be a great start.

What do you think?

A free customizable website just a few clicks away

Don’t fret, there are many ways you can get your hands on a free website which you can customize to suite your needs. WordPress.com is one of the easiest ways, in my experience, and provides you with a platform from where you can eventually launch your own, fully customized website on your own domain, when you are ready to do so.

All you need to do is go to wordpress.com, sign up for a free wordpress.com account and follow the quick, step by step process. In a matter of seconds you can be online for free and speaking to an international audience. Your new web address will however have wordpress.com attached to it at the end. Once you have some cash in your pocket, registering your own domain(web address) and installing WordPress is not too much of a mission. You can then export all the content from your freely hosted website and upload it to you new site very easily. Not many other solutions provide this feature.

VeloCITI Cape Town startups using WordPress

On the VeloCITI business development program I have introduced a few of my collegues starting their businesses to WordPress. They’re now online and communicating with their markets quicker than they thought they would. Visit them online:

http://rainbowitgen.wordpress.com

http://digitaldocuments.wordpress.com

http://bluerayoutdoor.wordpress.com

Sometimes it’s just a matter of working with what is available as many companies unnecessarily hold themselves back due to lack of budget.

I personally started out blogging in the same way and eventually migrated to my own domain using a freely available theme. I then started modifying the theme to suite my needs and eventually ended up where I am now a few months down the line with some regular daily traffic and over 100 posts to date.

The other nice thing about WordPress is it’s constantly being improved and upgrading is quite easy. Changing your theme is even easier and adding functionality through freely available plugins makes it a user friendly yet powerful option for many companies big and small.

A few simple benefits of using wordpress:

• WordPress sites are known to rank high on google searches
• RSS feeds come built in
• Tons of freely available themes with which to change your site’s look & feel
• Free functional widgets available to plugin to your site
• Site contents can be exported and imported easily
• Adding and changing content is just about as simple as writing a word document and saving
• WordPress sites are more sociable and helps develop important conversations with you target audience
• WordPress is constantly being updated and upgrades are published for free
• There is a huge community which publishes tutorials, tips, tools and advice and can provide free support on just about any issue related to your WordPress site
• WordPress is one of the most user friendly web publishing platforms available today.

So what’s holding you back, if you’re ready to get online quickly and start publishing or promoting yourself, your ideas, your business or your organisation check out wordpress.com right now.

If you have any questions I’ll be happy to answer them or point you in the right direction. If you’re excited about what wordpress has to offer we’re having a wordpress meetup on 28 May 2008 at the Bandwidth Barn in Cape Town which you are welcome to attend. We’ll even help you set up a quick & easy free site if you want to test it out. Visit www.wordpress.org.za for more details on the meetup.

Have a look at a recent client project I just completed where I helped my Praxia Technologies design a self manageable wordpress website. View it at www.praxia.co.za.

I offer wordpress customization, as well as custom wordpress design and development and am a wordpress enthusiast. For more information or a quote contact me on nur@nomad-one.com.

Thanks to all those who nominated me, much appreciated, though the guys I am competing with make it really difficult to get past this point.

So give me some help and vote for nomad-one.com in the SA Blog Awards Now! http://www.sablogawards.com/2008/

Visit my Standard Packages & Rates and my Services pages for an idea of what I offer.

This is a trial offer valid until the 10 March to see what kind of response I get.