workflow — Product Management UX/UI & Interacion Blog — Frank derFrankie Neulichedl


Do we need human readable HTML and CSS?

The lack of visual design tools for web designer brings some strange side effects - like "MORE simplifies CSS to make it more intuitive, allowing you to write human readable code that fits with the way you think. MORE runs on both the client-side and server-side (Node.js)"

I'm not a friend of adding functionality to the markup through an additional library. Why? Because it renders the code completely reliant on the library and it breaks if the library is not present. If I need to move the site to a new CMS or want to reuse some of the code, I need to make sure that the library works. I would prefer that it would compile to standard CSS, much like other approaches do.

The advantage of human readable CSS on the other hand is not really an advantage. You have to know CSS anyway, so reading CSS is not solved by this solution. Writing "more" CSS is in this case not an advantage, let's write LESS instead.

As for human readable HTML - or Marksdown as it is called. I like the idea but still find it not really user friendly to write - no really, I know HTML and Markdown seams forced.

What I do like about Markdown is, other than morecss, is that it should remain readable many years from now. Text files are the most stable file format and marking up text as little as possible is a good idea. HTML will be readable as well, so I there is no real need to use Markdown, but if you life in the text editor, it might be an option for you.

#markdown #css #morecss #workflow #compatibility #coding

Embedded Link

More CSS #header colour: cmyk(one-hundred-and-eight, eighteen, zero, forty-five) !unimportant; #header width: twenty-five-and-three-quarters percent !unimportant; #about h2 span background-attachment: scroll !...

Google+: View post on Google+

Finally an easy way to get Kindle Format E-Books on your Android Tablet

I like it that e-book publishers offer their books in multiple formats. A Book Apart for example offers also the Kindle Format. Nice, but if you just used the Kindle Apps on iPhone and Android you had no way to use these files. Now you can - the updated Android App can access files you send to it via email (or the sent to Kindle App).

Great, I'm just wondering what took them so long.

#amazon #kindle #android #workflow

Embedded Link

Amazon's Kindle App For Android Gets Updated To Support Kindle Format 8, Cloud Backup Of Email-To-Kindle Files Amazon updated their Kindle app for Android today, bringing about two changes that add a significant amount of functionality to the app. Perhaps the most... by Liam Spradlin in Applications, News

Google+: View post on Google+

Use Git to update your customized Wordpress Themes safely

Using Git to manage Theme Versions in Wordpress is a little bit geeky, but can help you a lot if you customize off the shelf (premium or free) themes. As good as these themes are to get a wordpress site up and running quickly, they also need some tweaking. Preserving these tweaks is not as easy. How can you keep track of sometimes multiple files you modified? Why not use a version control system that helps merging code bases. It let's you test out your tweaks, giving you a quick way back if you break something and it's the best tool to merge your changes into an updated version of the theme. Git is such a solution and it's fairly easy to use, once you pass the first hurdle of grasping the concept.

Git (and Github, the web service where you can host your git repositories) are subject in books and many articles on the web, so I leave that part out. In this little step my step I assume that you have Git installed on the web-server you host your Wordpress installation and have command line (ssh) access.

Setting up a theme with Git

  1. Install new theme with Wordpress Install as usually with the management tools provided by Wordpress  
  2. Create a new repository on the web-server SSH into the /wp-content/themes/ and create a new repository git init                         // create new repository git add .                        // add all files in folder git commit -m "original version" // commit with comment  
  3. Get ready for future updates git branch ready4update          // add new branch This will create a branch in which we will then copy the updated theme files when we need to update
  4. Make your modification to the themeNow you can make your changes to the theme as you like - you will continue to make changes to the master branch. You need to commit your changes to register them with git and I highly advise to use the workflow approach described in ProGit to make your work even more efficient. To commit your changes just enter git add .                                // add all files in folder git commit -m "Insert your comment here" // commit with comment  

Update the theme

Now comes the neat part. You have an updated theme and you need to merge it with your customized one. To do this we need to activate the branch we prepared in step 4.

  1. Install new theme files git checkout ready4update     // go to branch

    Now copy the updated theme files into the folder and overwrite everything and commit the changes to the ready4update branch.

    git add .                     // add all files in folder git commit -m "updated theme" // commit with comment  

  2. Get Master branch ready We go back to our master branch and make a temporary branch to have a save update. git checkout master          // go to master branch git checkout -b tempupdate   // create new temporary branch from master and change to it  
  3. Merge the update into the temporary branch And now we merge the two branches git merge ready4update       // merge with tempupdate

    The trick here is that the master and ready4update branch have the original theme as common ancestor. Git can merge this way the changes made by the author of the theme and yours - and if you have conflicts git will help you resolve them.  

  4. Test the website Since we have created a tempupdate branch we are working in, even if something brakes badly you can still go back to your previous stable master branch (git checkout master).  
  5. Merge into master and get ready for next update If the test went well and your wordpress site works well you should get ready for the next update git checkout master         // go to master branch git merge tempupdate        // merge the branch into master git branch -d tempupdate    // delete temporary branch git branch -d ready4update  // delete ready4update branch git branch ready4update     // create new ready4update branch  

Now you are ready to update your theme or make additional changes to it. Believe me - it looks more complicated then it actually is, so go ahead and try it.

Stop searching your perfect developer / print shop / vendor

How many times have I heard a co-designer expess their desire to find a better [...] (insert external resource who delivers goods by specification of a designer - aka Developer, Printer or Print Shop, Media Buyer, ...). Not because the current service provider or vendor does a bad job, but the main reasoning goes like this: "They should get back to us with suggestions how we could make the [...] (brochure, website, catalog, mobile app) better, faster, smoother or more interactive by using the latest technologies - after all they are the experts of their fields." And in that reasoning lies already the answer - they are the experts in THEIR fields. An external service provider will always try to deliver your project with solutions they know well - therefore with the least amount of effort. They are not interested in making your project "more" anything - unless they have a ready solution to sell you at high margin for them - thus making it "more costly".

And this is rightly so - this is their business. It's not their business to find great solutions for the communication challenges of your client. So stop looking for this kind of vendor because you know them already - they are your competitors.

It's part of the job of a designer to research the latest technologies and materials to adapt them for the communication needs of their clients. It's important as a designer to know what is possible and what not - you don't have to know exactly how it is done, but at least now what there is. You have to push your vendor into new fields or find the right vendor for a specific job. You are the one who should know, because your client relies on you to get the best solution to his problem. Don't try to outsource your competence.

#design #workflow #outsourcing

Google+: View post on Google+

Does our client know what content is? 6 Steps to better content!

Everybody talks about content and content strategy, but does the client actually understand you when you talk to him about content?

Using Podcasts to learn while working

I use podcasts to learn while I work. I listen to design talks, keynotes, interviews and news from science, culture and some entertainment. Especially during the tasks every designer can do without thinking (photo retouching, filling in content, corrections) are the ideal activities to up your game by staying in touch with the latest developments. Even though graphic and web design are visual media, the most important part in my opinion about design is not visual - the mindset and the different approaches behind design solutions. In the old days it was really difficult to get the inside view of designers because not many had the opportunity to publish books or discuss their point of view in a magazine. Design Blogs fill this space a little bit but mostly podcasts can give you the opportunity to hear what designers think in their own words.

For a selection of interesting Podcasts about design subscribe my Huffduffer Channel - available as RSS or Subscribe in iTunes

To give you a further starting point for the design podcasts I listen I publish here my Subscription list from Google Reader (if you want you can even subscribe to it) - this list will update itself automatically.

Photo by Melvin Gaal (

Search your GMail from your Firefox search box

I looked for a way to search my Inbox directly from the Firefox search box without another addon. I've found a way through the Opensearch capability of firefox. Since it's handy I wanted to share it with you even when it's not strictly design related ;-).

Finding the right jobs for your trainee

I had in the past problems finding the right jobs for the trainees as I was caught up in my daily routine and when they actually showed up at my desk I wondered what would fit. I therefore setup a routine for finding jobs around the year to have them ready. Find out how I did it and the 3 rules for successfully managing a graphic design trainee.

Retouching to cut photo shooting costs?

As an art director one of your jobs is to ensure that the quality of the final product lives up to the standard you set. To ensure this quality you have to look at all aspects. We already discussed the copywriting part, now let's look at the photography.

Organizing your files

At the end of the day you and you team have to work with the files every day, not the IT-department, so it's time to get in charge. Here a few tips.