This year’s edition features a new design by Made by Elephant
and has been causing quite a debate. If you don’t know about this site yet I would encourage you to have a look and read the articles which are informative, inspiring and include various different topics and angles.

Drew received quite a bit of criticism for implementing a design which has not been finalised for all browsers and therefore shows display errors and a somewhat broken layout in older browsers and IE. I was very surprised that there was so much negative feedback and harsh words… I like the design – and love the experimental methods used to create such a user-friendly, interesting and engaging design. Being bold and strong – it delivers an engaging experience for its target group of web designers and developers.

But whether you like the design or not – the bold move with this new design should not be so harshly criticised. If you cannot take risks and push limits on a design aimed at web geeks… when can you?
I have to agree with Veerle Pieters who wrote an excellent blog post on the issue titled Do you innovate or opt for the safe route in web design?

1. go to your server control panel and open the database via phpMyAdmin.
   You will see your database listed by its name on the left hand side – click its name to access the WordPress data. This is only necessary if you have more than one database listed here – in my case, as you can see on the screenshot here – there is only one database and all tables are listed.
   
2. you will see the different tables, by default preceeded with the ‘wp_‘ – look for the ‘wp_users‘ table and click the browse button as shown below.
   
3. to access the specific user details, ie the table data – click ‘browse’
   
4. once you can see the exisiting users’ details – you can edit the specific details for the admin user as shown below:
   
5. you will see all fields and values for the admin user and you can now type in your new password:
   
6. as the last step before saving our new password – choose ‘MD5′ from function drop down menu
   
7. click ‘go’ to confirm and save your new password – and you’re done :-)
   Returning to the previous screen – you will notice your password has changed, now encoded shown again as a string of letters, numbers and symbols.
8. NOTE: you might need to delete the cookie for the site in order for the changes to take effect !

To give credit where credit is due – this is the page that helped me getting this problem solved: WordPress@ T2

I was working on a design for Lawrence Griffiths (LookingForAWebsite) who is setting up a website for a primary school. As the school is set in trees – the design brief was to convey this feel, meaning lots of green tones and shades. All was going fine until I wanted to upload the mockups as optimised jpgs for preview and feedback. With my file setup as RGB, 8 Channel and the ‘convert to sRGB’ set in the ‘save for web’ window – I thought I was doing everything I needed to simply optimise my mockup.
But how wrong I was… again, I hit the odd colour shift problem – my carefully chosen green tones taking on a completely different shade as soon as I went into the ‘save for web’ window… :’(

I’ve had this problem before and always somehow managed to get the result I wanted. Knowing I have only scratched the surface as far as colour calibration is concerned – I went searching for answers… and yet again: the kind kowledge-sharing experts to the rescue :-) I still don’t know enough about colour profile but as I am now working with a much better setup I wanted to share what I’ve learnt.

On their beautifully crafted web design blog, Doug Avery from Viget wrote an article on this very issue: “The Mysterious “Save For Web” Color Shift“. Doug gives a 3 step solution to getting your colours right for the web: setting up Photoshop to use the correct colour profile, setting up the Proof to view any given file on the right monitor setting and how to deal with the default presets in the ‘save for web’ option. The article received a huge number of comments – some by happy webdesigners which this solution worked for, some by colour experts who went into more depth on this issue discussing many more aspects of monitor calibration.
If you are interested in this issue you should definitely read this article and all the comments. It seems some people with more expertise disagree with Doug’s advice and recommend different solutions. As I am not an expert myself – I would suggest you read the comments yourself and follow up on any links to other articles given.
A must-read should be “Best Practice Colour Setup for Web Designers” by Nina Richards.

The comments show some tension between the practical wedesigners who are happy to run with the first solution given (I have to admit that this is what I did as time pressure was on I did not have time to read all the comments) and the colour experts whose knowledge runs a lot deeper. Only after Doug’s solution didn’t work for me did I go back and take time to read the comments – and JeanP came to my rescue.

Jean described and explained clear steps for me to take in order to solve my green shift problem – and it worked beautifully :)  Please bear in mind that this is by no means the one and only perfect solution – rather what I setup following Jean’s advice.
So here is an outline of what I did in order to keep my colours true to their original.

1. set system preferences for display: System Preferences > Display > Calibrate

   → follow the instructions setting Target Gamma to 2.2

2. next, open Photoshop (or close all files) and edit the colour settings: Photoshop > top menu > edit > color settings

   → choose the appropriate setting for your location
   please see the screenshot for additional notes.

   NOTE: I am not sure yet how to sync colour for all Creative Suite apps.

3. Photoshop: proof setup: top menu > view > proof setup

   → choose ‘Monitor RGB’ to view the file as it would display typically on an average RGB monitor.

   Jean says: “Don’t adjust your color after while in Monitor Color Preview, just consider it a preview of how the image will look in Firefox. Turn the preview back off. “

4. 
   → ‘save for web’

   NOTE: the first screenshot shows the default option of ‘convert to sRGB’ which I have always been using. In this case, if I understood everything correctly, it should not affect my image as it is already sRGB.

   Jean suggests to save the image in 2 different versions and previewing it in the different browsers to choose the final version for use on the website. She kindly set up a sample with my image saved in the 2 different versions – showing a clear difference of the colour difference in Safari and Firefox – please do have a look for yourself.

Well, that is it. A HUGE thank you to Jean for all her input, help and advice on this. I feel I am now much better setup and doubt I will have to struggle with my colours as much as I did before – still, there is still a lot to learn.

Even though I have been working with WordPress for a while now (all work done live online using password protected folders) – I never had enough time to look into getting the server setup locally to work offline with on my themes and customisations. The local server setup was something I always really wanted to figure out – but being much more of a front end designer – I avoided the issue, being a coward really : ), running away from any complications which might slow me down or delay me – my workload not allowing much time to play.

For christmas I received a wonderful surprise in the form of a new mac book pro :) and so I was keen to get my dream machine setup with everything I wanted to use, including the local server. Doing some research online for tutorials and tips I found this amazing little app ;) and within minutes I was setup with my local server – importing all data from my DB, installing WP locally – now happily working on my WP sites offline ;)
In case you’d like to know – a quick run down:

1. download MAMP (free from living-e)
2. install MAMP directly into the applications folder
   (it is important to put the app directly into the applications folder – NOT into a subfolder within!)
3. launch MAMP – and you’re done :)

You should put all your files into the ‘htdocs’ folder within the MAMP folder itself (though you could change the location of this folder if you choose to) = Document Root: /Applications/MAMP/htdocs

Your local URL will by default be: http://localhost:8888

One last note on WP – to install WordPress – simply copy your WP files into the root folder, configuring the database connection as stated in the MAMP documentation (on the start page). Access the new WP site using the local URL and install as normal.

HAVE FUN :)

well….. yes, so do I – but becoming sloppy or forgetful is easily done – with disastrous consequences as I’ve had to find out the hard way… after a stressful time with getting the end of year exhibition for my students organised and setup – I was quite exhausted and no longer in my usual working routine.

Backing up the vital files regarding my students – I had neglected to save my own working files on my external drive – intending to take some time to properly archive my files and backup.
Never ever postpone at this stage !!! My HD started behaving strangely – before I had a chance to save any files – it just died… completely… so – nothing left to do but replace my HD and cope with having lost a lot of files…

With a brand new hard drive now – I am determined not to experience such a disaster ever again ;) Looking around online for an easy and efficient backup app to sync the folders on my mac to the external drives – I came across FileSync by R Charles Flickinger – which is free with a polite request from the author to register one of his other applications (check those out at designersdomain.com).

There are many different sync programs out there – some small and sweet – others quite huge and extensive with various options. I prefer small and sweet – easy to use and efficient in its processing.
And FileSync certainly meets all my needs ;)
The main window is very straight forward and easy to understand – allowing you to add a number of different sync setups. You can add, edit and delete these at any time.

Though very easy on first glance – I did get my first testrun wrong as I did not read the instructions within the next window. To synchronise 2 folder you specify your master – which is the folder you want to back up – and then the copy. I assumed I needed to specify the same folder – this time on the external backup device. But you do NOT set this folder – rather the folder it is located in, the folder containing the sync folder.

Once you’ve added a new folder – it will appear in the main window with its check box ticked by default.



To perform an overall backup of all set folder – ensure that all check boxes are ticked and click ‘sync’. To synchronise a specific folder – you can simply select it in the main window, leaving all other deselected, and click the ‘sync’ button.
During the sync process – you will see the list of files being processed. Once complete – the list will remain in its window – ready for you to look through or save as text file. This is a very handy additional feature as you can double check which files you worked on recently as well as allowing you to keep records of changes made.
NOTE: make sure to read the ‘ReadMe’ file carefully for the ‘mirror’ option.
Well, that’s my bit of advice for you :) back up – BACK UP – back up !!!

• always use a folder structure for any InDesign document and use appropriate folders for different type of content; this will ensure that on new edits – all content will remain in place, display fine and be editable.
• for backwards compatibility: top menu > file > export >> save as “InDesign Interchange”
• to set a different default font – open InDesign, choose type tool, choose ‘A’ in the top options bar and set the font to your preferred default (this newly set font will become the new default any time the app launches)
• import options for content => hold ‘shift’ key while importing image to see import options
  (unless this options is left checked by default)
• for specific edits, checking of whole document: top menu > edit in story editor
  >> for extended functionality, checking styles, seeing all text (even within overflowing area)
• to shrink a frame box to the size of is content – right-click > Fitting > Fit Frame to Content
  keyboard: apple (command for PC) + alt + C
• to select all text at the end of a textbox (even going outside of textbox)
  >> shift + apple + home (downwards arrow)

Thanks for this, Zak ;)

Then, there comes the contact page, blog comments or generally any page using any type of form. And out goes the joy and visual continuity of CSS styling…. :”(

When I first started using CSS – learning from the masters out there – I found forms to be the biggest stumbling block in my understanding of the rules and their application. What started to make sense – no longer did when it came to the form elements… Eventually, of course, reading enough posts, tutorials and reference material – I realised that it would be a hopeless endeavour to try to understand… So you learn to cope, not ideal but the best you can do, right? ;)

To take one of my current projects as an example – while the site is being built the domain shows a holding page with contact form: http://organikrocka.com. The look and feel of the site is textured, warm cardboard brown with black. As the current page is intended to give a flavour of the final site – just the thought of styling the form brought on a headache, already getting frustrated in anticipation of the obvious problems – and unfortunately the end result is somewhat unresolved…
I tried several different approaches in the CSS, even experimented with changing the design and feel of the page itself to tie in the form elements – and in the end resorted to using Javascript to replace the now rather ugly, misaligned and at times distorted appearance of the check box.

The screenshot below shows the final solution with Javascript replaced checkbox – and below the check box appearances in different broswers after my endless CSS edits – or how the check boxes would look with Javascript disabled. And in this case it was not even the standard check box visual itself which turned out to be the biggest pain in the ***** (pain in the brain!). Applying styling to the form resulted in a very inconsistent display of the box itself across different browsers. I just couldn’t get it to look right… :”(

So I finally did replace the standard checkbox with a graphic I created, with Javascript. I usually don’t edit the form elements in this way, I do care about usability and accessibility and am aware that this is not fully compliant. In an attempt to remain within the realms of usability and the familiarity with the commonly known check box – my graphic still shows the small, square, white box, only as flat graphic to suit the overall visuals and with some additional purely decorative elements. It is not ideal and though the form still looks very different in the different browsers – at least its layout is now even.

Following Eric’s posts on resetting styles and particularly reading his recent post on ‘formal weirdness‘ – the strange results for any styling applied to forms are slowly starting to make more sense. I’m a big fan of the universal resetting of margin and padding – it gives me back control over my layouts (apart from – IE what else :”(….). The universal reset is great – short and sweet and just works – well, apart from forms… of course :”( But I don’t really like the idea of the big chunk of code preceeding my CSS either, merely to accomodate the form pages. So I thought I would most likely stick with it and try to compensate for the forms within my CSS where needed.

Reading about the ‘formal weirdness‘ however… I think I’ll have to reconsider my opinion and change my working methods after all – thanks, Eric…

1. to install FireFTP – go to either of the pages shown below. By clicking on the Download / Install button the addon will be installed as extension in Firefox.
   • fireftp.mozdev.org/ → Mime Čuvalo.
   • addons.mozilla.org/firefox → mozilla/firefox
2. after installation – restart Firefox.
   Once back open – you will see the extension added to your top menu > Tools > FireFTP.
   When you choose FireFTP from your menu – it will launch itself into a new tab showing two columns: a left side column showing your default local directory and a right side column, currently empty, for the server directory. Each column is again divided into two halves allowing you to easily access folder content. Inbetween the two main columns you will see two arrow buttons which allow you to download from the remote directory and upload files and folders to the server.
   
3. to set the preferences got to the top menu > Tools > Add-ons.
   The settings applied as default should be fine – but make sure that you have the general settings set as shown below. By setting the FileView to refresh automatically you will be able to see any successful up/downloads immediately appear within your folders.
   

Uploading via FTP
To upload to your webserver you will need to have the following details:

• FTP host – usually in the form of “ftp.yourdomainname.com” or “yourdomainname.com”
• username/login
• password

These details will be given to you by your webhost. It is good practice to keep all such information backed up somewhere other than your computer. Print out a copy and make sure store it somewhere safe – keep it secret – keep it safe ; ) Even though you can always request this information again from your webhost – you often will need to log in or give some details in order to use technical support or to verify your account.
To configure FireFTP for server connection and upload the files – please follow the steps below:

1. local directory
   to set the left side column of FireFTP to show the files to be uploaded – navigate your computer and locate your current site. You will see that by clicking on a folder in the very left hand side column – its adjacent column will show the selected folder’s content. Once you can see your site’s content – you are ready to connect to your server.
   
2. FTP account
   FireFTP allows you to create FTP accounts which are then stored within the account drop down menu. Click onto ‘Manage Accounts’, select ‘New’ and type in your details. You will only need to type in the ‘Host’ details which will automatically be used as ‘Account Name’ – and your username and password. Click ‘OK’ to confirm and save your account settings.
   
3. connect to server
   once you have confirmed the correct log in details – you are ready to connect to your server. With your details stored in the drop down menu – make sure your FTP account is displayed and click the connect button. Beneath the program’s credits at the bottom of your window you will see the current activity being displayed. This will tell you how your login is proceeding and will inform you of any errors which might occur.
   The folders found in the root directory can vary from server to server – and you don’t need to worry about most of these while you are new to webdesign and simply want to upload your website. It is important only to put your website’s files into the correct directory and to make sure your index page is placed directly into the site folder.
   Your website’s directory is usually called “httpdocs” – “public_html” – or you might even find a folder shortcut called “www”. If you are not sure – simply email your webhost and ask :)
   Once connected – you will see the right side column displaying your server’s directories as shown here:
   
4. uploading your files
   To upload your files – make sure that your site folder is open in both directories: your local and your remote server should mirror each other. Once you know you are looking at the correct files – ensure that all required files are selected in your local site folder and that the relevant folder is displaying its content on the server side.
   Select all files to be uploaded by shift clicking – and upload using either the ‘upload’ button or by dragging the selected files across.
   Both methods work equally well. If you are new to this and feel a little hesitant – use the ‘upload’ button as you cannot make any mistakes. While dragging across and if you let go of your mouse at the wrong time – you might end up uploading your files into the wrong directory. You would then have to either move them on the server – or delete them to upload from scratch.
   The screenshots below show the upload of an entire folder.
   
5. viewing process and stopping up/downloads
   You can see the process of your up/download in several places within your window. this should give you an indication of how long certain file sizes will take to up/download. It is always faster to download than to upload – so don’t be surprised if some heavier file take more time. If your internet connection is slow it would be best to upload your files in smaller chunks.
   If you are experiencing difficulties – you can stop your up/downloads at any time via the ‘abort’ button. You can then disconnect from the server and even restart FireFTP or Firefox to start fresh.
   

» clear cache and history – save x 2 – preview & refresh

Just to point this out once more as it can be a bit much to remember when you’re just starting with all this…
when working with your 2 documents – the XHTML file and the CSS file – you will need to remember to save both files before previewing in the browser ! If you forget to save your changes in either file – you will not be able to see them applied and taking effect in the browser. So always remember to save twice – then preview and refresh your page.
At times you will also need to clear the cache of you browser, delete its history and restart the browser itself. This is only necessary when you suspect you might be experiencing glitches with your browser. So if your page doesn’t look as you expected, even after the page refresh, try clearing cache and history and restart your browser.
PREVIEWING: personally, I prefer to open the pages I work on directly in the browser – rather than using the preview options in the editors. By accessing the file directly with the browser I am not previewing a temporary version of the page – but rather the page itself.

» default font size in your browser’s preferences

As we all have different online habits – it is hard to judge how exactly the majority of people will view your website. Leaving aside the issues of what monitor resolution and size or which browser – the settings of the browser alone have an impact on how your site displays.
You yourself might have changed the default font size in your browser preferences as you might prefer smaller text display. Or you might have enlarged the default font size. This will affect how you perceive your own design while testing your code and previewing your page.
Most browsers have a default setting of 16pt when freshly installed – this font default is easily controlled with the right CSS rules. If you have changed this setting – your font settings in your CSS file might be very unsuitable for the standard settings used by your visitors. Ideally you will preview your own sites with this default font size of 16. This will be the most suitable starting point as many people never change their default preferences. Using em as font size and – keeping in mind any font resizing your site’s visitor might perform – you can ensure that your layout can handle different text sizes while degrading gracefully if pushed.

» keep you images perfectly sized and feather light

Obvious as it might become to you when you start working with webdesign – it is important not only to plan your site structure and page layout but also to prepare all graphics and other assets accordingly. Make sure that you know the exact size and function of any visual elements and edit each image individually to fit this size. Always keep the file size in pixel dimensions as well as actual file size in mind – a few pointers:

• edit all visuals to the exact pixel dimensions set in your page layout plan
• optimise all images and save them into your site project folder as jpgs or gifs
• for large background images – use soft blurs and tiled patterns to keep their file size down
• XHTML image tag: remember all details of your image tag such as the width and height (without the measurement units) and the ‘alt’ tag – including the closing forward slash:
  
  
  

» make sure to define all link states

In order to ensure that all your links will display as you designed – it is important edit your css to style all 4 states, regardless of whether you are planning to differentiate between each of them individually or not.
Strictly speaking – this is not necessary but proved to be the most reliable method, especially when creating more complex link rollovers. Browser like IE are easily confused and generally give more reliable results with all 4 link states defined.
You can list the button states in order to make several states use the same rules as shown below:

Just a few points on how to use TacoHTML on the MAC and CrimsonEditor on the PC

TacoHTMLedit – mac [http://tacosw.com]

• write your own customised HTML template set up your preferences to use it for each new page:
  bare sample of HTML template
  1. top menu > Taco > Preferences
  2. select ‘Documents’ tab
  3. tick box: ‘Create new documents with the code form the following file’
  4. ‘browse’ to select your template file
  5. close preference window (which saves your settings)
• always work in the project directory – rather than individual files. This makes it easier for you to keep an eye on the relevant file paths as well as being a faster working method.
  
• some useful keyboard shortcuts to speed up workflow:
  • [apple] + S = save current file
  • [apple] + Y = preview in default browser
  • [apple] + B = check code syntax
  • [apple] + control + O (letter O) = organise tags
• remember to save all files before previewing your files – this might take some getting used to…
  keep an eye on the appearance of the file icon within your project directory and you will see all saved files as normal – any unsaved files will appear as if selected in a darker shade:
  

CrimsonEditor – pc [http://www.crimsoneditor.com/]

• write your own customised HTML template open as template for each new page:
  bare sample of HTML template
  1. write template and save under meaningful name in a specific directory
     (ideally you start using 1 overall folder for all your web work creating site specific folders within it – this main folder would be suitable location for your new default template file)
  2. instead of creating a new file via ‘File – New’ – you can now choose your template instead in one of the following ways:
     • File Open Template
     • keyboard shortcut: alt + shift + O (letter O)
  3. save the new file as appropriate into your project directory
• Crimson Editor makes it easy for you to navigate between your files by displaying all open documents as tabs below the toolbar. Make sure though to keep an eye on your project directory which will make it easier to target each file:
  
  
• for faster workflow – open up the pages you are working on in each browser you are testing in.
  While writing your code in the editor – you can then jump between applications to preview the pages in one of the following ways:
  • use the taskbar at the bottom of your screen to view each page
  • hold down the Alt key and press Tab to access the different applications

  ! remember to refresh your page !

• always make sure to save all files before you preview your pages…!
  Crimson editor indicates saved and not saved files by a coloured dot preceding the file name in the tab: