I’m not a big reader when it comes to novels and function in general, I just find the fantasy a bit of a waste of time to be honest. But when it comes to books covering practical knowledge on the stuff that matters to me, I’m a bit OCD.
So i’ve been trying to clear out some of the books I haven’t been using in a while and I found a set of real gems from my Web, Strategy, Creativity, Productivity collection. Each of these books has played a major role in helping me get to grips with the range of subjects I need to keep myself informed on as a Web & Creative Professional.
These books cover a wide range of subjects from Coding & Coding Standards, to Productivity, Time Management, Marketing & Communications Strategy, Web Strategy, Usability, Creative Thinking. The information contained in these books should be enough to get any web novice up to speed with the principles and methods needed to dive straight into the web industry. They’re also a great resource or reference for anyone working in this industry or teaching/presenting on these topics.
The Open Brand: When Push Comes to Pull in a Web-Made World
Six Thinking Hats – EDWARD DE BONO
Lateral Thinking: A Textbook of Creativity – Edward De Bono
The 4-Hour Work Week and Timothy Ferriss
The Truth about Email Marketing – Jenkins
rework – 37 Signals
don’t make me think – Steve Krug – New Riders
building findable websites – New Riders
Introducing HTML5 – Lawson Sharp – New Riders
Designing for Web Standards – Second Edition – Jeffrey Zeldman
The Ultimate CSS Reference – Sitepoint
A Designer’s Research Manual – Jenn + Ken Visocky O’Grady
eMarketing eXellence – Chaffey Smith – Third Edition
Starting & Running a Successful Consultancy – How To Books
The Art & Science of CSS – Sitepoint
Logo Lounge 2 – Rockport
I’m planning on selling this entire stash to the highest bidder to make space for some new material.
A few days ago I was approach by a good friend, Jamaal Khan who runs www.jayz.co.za to design & develop a splash page for one of his clients, Studentology. The site he required needed to be completed within 24 hours, which was a tough ask at that point but I obliged seeing things were relatively calm work wise for me at that point. In hindsight I should have known that was going to be impossible considering client feedback cycles testing and changes but I dove in none-the-less.
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 bgDraft 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.
Use frameworks and existing tools instead of always building from scratch, it helps with rapid development.
Building device specific web pages is easy when you use the right tools.
When you run into problem, don’t waste too much time trouble shooting, change direction quickly.
Collect freely available web resources for emergencies, it’ll save your life when you need it most.
Use 1 Javascript library for all your needs to avoid script conflicts, JQUERY is your Friend!
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.
I’ve hardly slept over the last week bashing my fingers against my keyboard trying to get this site out as quickly as possible. The site is called fani.am, (That’s Fan i am), which is a 2010 World Cup Accommodation site. This one really challenged me with some of the intricate post associations I had to string together, and with the addition of a couple of extra plugins to add some key features I’m really excited about this one.
Take a quick look Design and I’ll explain a bit about what’s under the hood of this one.
Homepage of the fani.am fan accommodation site
I really enjoyed designing this one and also trying out a few CSS3 features like rounded corners & Text Shadows. IE6 users, there’s a special treat for you as well. 🙂
Custom Fields
The most hectic part of this site by far was the wordpress wrangling which takes place in the background. Using loads of WordPress custom fields, some for data and some for associating certain post types like matches, with accommodations and with the teams playing the matches, we were able to weave separate categories of posts into an intuitive mixture of information. Custom field have been managed entirely by the flutter plugin’s write panels, which helped make this site extremely easy for novice user to populate with content.
Fan i am Team Facts sidebar widget
Conditional Statements
Using WordPress conditional statements, as well as some conditional Custom field statements we were able to easily pull the correct set of posts for each team, venue or accommodation. The sidebar also gets populated with related widgets displaying content for each type of page you arrive on.
Associated Matches, accommodations & attractions
Dealing with images
I was a little disappointed about the current state of the built-in WordPress gallery system. You’re still not able to easily pull individual images based on their order in the gallery and can only really pull an entire gallery. The attached image plugin helped pull the first gallery image which was great. Flutter’s image management and upload functionality was ok but could do with the auto generation of thumbs & other sizes which the built in WordPress image uploading performs. Flutter’s image crop & resize functionality just doesn’t work at the moment, though the rest of it’s functionality, mainly write panels played a hige role in this website’s configuration.
This site relies heavily on plugins for various features, which is one of the great things about WordPress. I know some geeky developers who swear they never use plugins, and that’s fine with me, though I or one love the fact that so much freely available functionality is just lying around ready to take advantage of.
Plugins I’ve used & abused Include:
Flutter – custom write panels
Live Coundown Timer – counting down time to the Kickoff
My Favourite Posts – allows user to add their favourite accommodations to a sidebar bucket
Send to a Friend
Tweet News – Footer feed of tweets about FIFA
Google News – feed of news about the world cup from google
Twitter Widget Pro – Worked better than Twitter Tools
IE PNG fix – no need to fiddle with code
Sidebar Login – check the login panel top right
Cforms II – contact & booking forms
DISQUS – Advanced commenting system
WP Table Reloaded – Check the Match Schedule (quick & easy manageable tables)
So far it’s been a really great project and Phase 2 promises to include some even more exciting social media additions. What do you think of this one?
My good friend Jamaal has been really busy taking Jayz.co.za to the next level. I’m super impressed with the way he’s taken his business from a one man show not so long ago, to a team of Social Media Strategists in a really short space of time.
Having designed the Jayz Corporate Identity a while back, and then styling his previous site, it was a welcome experience taking it another step further with this latest re-brand. This re-design focused much more on personal branding, something which I think I need to pay a little more attention to myself, but which Jayz does really well.
I’m starting to get carried away with look & feel design on the nomad-one redesign. This is even before my wire-framing is properly completed, but I just can’t help myself at the moment. I’ve just really enjoyed working on this design. There are a load of changes I want to make to my site, graphic design, functional, content and information architecture & usability, so it’s all over the place at the moment. This post lists a few of my thoughts, but I hope to get more ideas from you about what you think would make my space special. I’ve suggest how the best advice might be rewarded down at the end of this post.
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?
The last few months have been really hectic for me as I posted here before with a few setbacks but I’m glad to say I’ve bounced back and things have returned to normal. I’ve completed a few nice little WordPress design projects all with their own interesting twists to them. I’m always amazed at just how many really great WordPress plugins exist to fill in the extra functionality needed.
The first of them, a site which hasn’t launched yet but is pretty much completed is www.strictlyhalaal.com, which serves as a listing/directory site for “halaal” certified businesses.
Strictlyhalaal.com uses a few great free plugins:
GD Star Rating allows for users to give each listing a rating.
Learning Curve is a dedicated education technology supplier, representing premium brands such as Adobe, Apple, Dell, Autodesk and Toonboom. This was the first time I have setup an e-commerce website using WordPress and proved to be quite a challenge to begin with but also turned out to be a really valuable learning experience, no pun intended.
To power the e-commerce side fo things I used the wp-ecommerce plugin, which is a really powerful yet free plugin system allowing you to turn your WordPress site into an online store in a few clicks. Customizing the online store’s appearance was a bit of a mission for starters but it’s worth learning the ins & outs of this plugin, developed by the boys at www.instinct.co.nz.
I can’t unfortunately divulge the sales figures for the first 2 months, but lets just say I was more than pleasantly surprised. It’s great to see your work directly benefiting your client’s bottom line, especially immediately after it’s implementation.
This is the first time I make use of a Woo Theme to develop a client site. I’m very impressed with what the guys at WooThemes are up to, and even more so when I took a little lookie under the hood of one of their themes. The theme options part is really well done, some of the code still boggles my mind a bit, but it allows the user to easily switch stylesheets for a change of colour and style.
The widgetized areas on the homepage works out quite well also allowing you to add pages into certain block of the homepage layout. The cost of the premium theme definitely adds value to the mix as it allows the client to aquire some really great features for a fraction of the cost of cutom development.
