Category: Internship

Day 37: Umbraco 5: Resources

Umbraco logoIf you follow this blog a little bit, you might have seen my post from last week about Umbraco 5, where I complained about the lack of documentation for the project. As it turns out, my complaints were heard at “the top”. Niels Hartvig, the founder of Umbraco, was so kind as to not only comment on the post, but also write to me. He let me know that the documentation is being worked on and the team is happy for user input on the matter. I was also invited to take part in the upcoming CodeGarden conference to learn more about the project. Now, that’s what I call a great customer support :) . I am looking forward to the conference and getting to know the community behind Umbraco.

Meanwhile, the Umbraco team has just announced today that the documentation for Umbraco 5 is now available on github. So far it doesn’t have that much content (just an installation guide and a few partials) but it is a good start and a step in the right direction. Certainly an address worth keeping and returning to on regular basis, if you are thinking seriously about Umbraco 5.

While the github site is still a work-in-progress, one has to look for resources all over the net. And here is a list of a few websites, I found useful so far:

  1. A look at the basic parts of building a site with Umbraco 5 RC2 - this post will be especially useful to those who already know Umbraco 4 because it spends a lot of time compering the two versions
  2. Umbraco Video Tutorials - the tutorials refer to Umbraco 4 but some, especially basic, things are the same in both versions
  3. github gist partials by Warren Buckley - razor code snippets to cover some basic functionality (various navigations, RSS etc.)
  4. Introduction to Razor by Scott Guthrie – this isn’t the most “beginner grade” explanation as it assumes some knowledge of programming but it is, nevertheless, well explained.
  5. More Razor posts – Scott Guthrie wrote a series of blog posts about Razor (see the links at the beginning of his post) and I found that each of them was at least partly useful for learning the basics of this syntax.

This list is by no means exhaustive and I am sure you will able to find more valid resources once you start digging.  But I hope you’ll find these links useful.

If you have any more good Umbraco 5 resources do share them with me. 

Day 34: Umbraco 5 for Beginners

Umbraco logo

Quick editors note: as corrected by Niels Hartvig, the course in Denmark for level 1 certificate in Umbraco costs 900,00 € +tax and not over 2.000 as previously stated. Apologies for the mistake.

I spent this entire week working with Umbraco 5 and it’s about time to sum up my experience with this Danish-made CMS system. Let’s start with some background information. Before Monday my only knowledge of Umbraco was that it existed, was free and was based on .NET technology. So you can see that I did actually begin from scratch.

You can learn more about the CMS here but let me just tell you what I’ve  learned this week:

Umbraco is organized into 3 parts (and this is just a simplification to explain things to you):

  1. Nodes (which are either pages or page elements depending on the complexity of the design) – these are the elements that basically constitute your website. Website admin creates or deletes nodes and edits their content.
  2. Document Type – here is where you decide what kind of content is allowed on particular type of pages. For example About Us page could have a document type of Text Page and thus be allowed to have Heading, Body Text and an Image while at the same time Menu page is of type List and is only allowed to have a Heading and a List. It is totally up to the developer of the website what document types to create, how to call them and what to put into them. It is then up to the admin of the website to assign this or that type to the page he is just creating.
  3. Templates – this is where the “magic” happens. A template contains html and Razor code that structures and displays the content. Here, you also reference your JavaScript and stylesheets. Until a page is assigned a template it will not display any content even if admin entered it.

Once you understand the relationship between these three elements you are well on your way to creating your website. Unfortunately, there a few obstacles on your way.

1. Razor Code

Umbraco website claims that the only thing you need to know to start creating your website is HTML and CSS. And this is true but only to a very small extend. After all you do not use CMS to have to hard code your navigation. And if you want to have you navigation update automatically when you create new page, you need to know Razor (or asp syntax if you are using previous versions of Umbraco). And any more complicated juggling with the content/data will definitely require a well-versed developer. This also apply to more complex website layouts.

This of course is a trade of because it means that Umbraco is very flexible and you have total control over the code. Nevertheless some ready-made snippets of code for the most obvious functionality that repeat on nearly every website would definitely be an improvement.

2. Serious Lack of Resources

While there are some materials for Umbraco 4 there is pretty much nothing for Umbraco 5. And the difference between the versions is major and concerns pretty much the most difficult part (Razor code). And even for Umbraco 4 some information is either missing or is buried so deeply that it is nearly impossible to find. And I mean basic information such as where is the root folder and what path to use to reference your .css file. There is one book on Umbraco so maybe some more info is there but it just seems to me that basic information like these should be front and center on Umbraco Wiki.

One explanation to this situation might be that the company behind Umbraco organizes courses that are fairly expensive (900,00 € +tax for level 1 course in Denmark) and so they are not interested in having free resources online. But then what is the point of making Umbraco free and trying to market it to regular users? Umbraco will have hard time becoming a go-to CMS if the learning curve is so steep and there is nothing to help you climb it.

3. Bugs

Umbraco 5 still have a serious amount of bugs and little quirks. This of course will get ironed out in the process but right now it is still slightly annoying.

Conclusion

Umbraco is definitely a powerful tool to have in your toolbox, especially if you work in Denmark where the CMS is gaining more and more recognition. However the investment of time and resources into learning the system is rather substantial so it is probably not a CMS for everyone.

I am pretty excited about getting to know it more, possibly also because it is challenge. 

Day 29: Assorted Tips for Webdevelopers

This post will not be an article as such. It will just be a collection of 3 tips for webdevelopers that I came across in the past week of work.

CSS: Clearfix Solution

No matter if you are just a beginner or a master of CSS, you must have already realized that float is an imperfect tool. The biggest problem with it is that floated content is taken out of the document’s flow and therefore will NOT extend the container it is in. This leads to some broken content and a big headache.

Floated content does not force height change on its container.

Luckily, there is a surprisingly simple solution to this problem called .clearfix. I found it in Dan Cederholm’s Handcrafted CSS book (which I very much recommend) but you can find it all over the web by simply googling for it (hint: you will also find some valuable comments and customization ideas if you google for it.).

1. Add the code below to your css file:

.clearfix:after{
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

/*for IE6*/

*html .clearfix {
height:1%;
}

/* for IE7*/

*:first-child+html .group{
min-height: 1px;
}

As you can see IE6 and IE7 need additional lines of code but with them they work just fine.

2. Add clearfix class to

containing the floated element and you’re all done.

How does it work?  It creates content, that it places after the floated content in the

and styles it to clear floats. It is pretty much the same as if you were inserting 

. The solution is not ideal. For starters it adds content that has no semantic value and if you read more online you’ll find out it might cause problems in some cases in IE browsers. But so far it is the best solution I found and I’ll stick to it.

Favicon

Favicon is short for favorite icon and it is this small 16×16 pixels image you see next to some websites’ urls in browser url bar (or next to the websites’ name on the browser tab). And for something that small it can give you a really big headache.

For starters, despite how sophisticated it is, Photoshop cannot save as .ico (which is the proper file format for this little fellow). Fireworks and Illustrator won’t help you either. There are a few online tools or Photoshop plugins that you supposedly can use but I managed to get none of them to work properly for me. Interestingly enough, Microsoft Paint can save as .ico and is happy to do that (and yes, I did feel stupid using it).

Also, Opera and Firefox will happily display your favicons no matter what. But if you can’t see your favicon in Chrome and IE don’t despair and don’t spend hours trying to figure out what is wrong. Chrome and IE require the site to be online to display favicons.

Accordion

Accordion is a handy jquery plugin that allows you to display content in chunks at a time. This is very useful for content rich pages, for example FAQs where users are often interested in looking into one specific category of questions. You can download the plugin directly from jquery library but here is a tutorial from tuts+ that allows you to learn more about how accordion works. This gives you greater control over the code and the look and feel of your page. Unfortunately, the links on the page (to for example demo) don’t work.

 

Day 25: CSShortcomings: the equal height columns debacle.

I am currently coding a website I designed and by in large it goes well but there this little annoying detail.

Generally when I design a website I do not thing about how easy it will be to code it. I strongly believe that I design for the presentation of the content and not for the code. This time as well I did not think about the little quirk of CSS, namely the total lack of markup that allows for creating equal height columns independent of the content.

Equal Height Columns layout

Equal Height Columns layout

One would think it can’t be that difficult but sadly there is no actual CSS rule or property that does that. Therefore one is limited to tricks (at best), hacks or improper markup (at worst).

Assuming that one feels using tables for non-tabular data is a capital offence, one is limited to 4 possible methods.

1. Nested Columns by Mathew James Taylor

This is the cleanest code method and would work in any kind of browsers. Sadly it will not work  if you wish to have space between the columns or borders around each of them.

This problem is a result of how this method works. The columns are nested and each of them extends all the way to the left of the page. Content is than placed separately on top of the background. Column most to the right is at the bottom of the stack and stretches to the left side of the page. And the next column is placed inside and on top and moved x% to the left and again stretches to the left side of the page etc.

2. Display: table

This is an ok solution. It uses CSS3 display:table and display:table-cell properties. It will require a small hack (extra empty column in the middle) if you want to have space between columns or borders around them. Unfortunately, the solution falls flat in IE7 or below. It breaks down the layout and the columns are places under each other. The remedy to this problem could be an alternative CSS for older browsers.

3. Faux columns

Faux columns is a solution devised by my CSS guru, Dan Cederholm. It includes making a slice of background and repeating it vertically in the parent div to simulate the columns. It does not work for liquid or % based layouts and it also means adding empty divs to the markup if one wants borders or rounded corners.

4. Jquery

This method obviously uses an interaction tool to build layout so it is a hack. However it does not upset the markup of the actual website and works in all browsers. Of course some people may not have JavaScript enabled but, let’s face it, that is incredibly rare. And even if they did they would still see a valid website, just that the columns won’t be equal in height.

As you can see there are ways to deal with the problem (as there are methods for nearly everything in css) but none of them is really clean and error-proof.

It sure would be nice if there was a simple CSS3 property to do the job… 

Day 21 and 22: HTML5 and CSS3

HTML5 logo

HTML5 logo

For the last few days (and for a few days to come) I had the joy of playing with the new (ok, not so new) shiny toys for web designers: CSS3 and HTML5. And let me tell you, joy it is. The simplicity of embedding video and audio alone makes me smile like a lunatic but when you add the smooth transitions and transformations, I am sold.

Of course Internet Explorer (8 and below) is as usual a damn party pooper and doesn’t support almost any of the new features (that are otherwise supported by all the other major browsers). There are many hacks and fallbacks one can use to deal with this spoil-sport but the whole idea of html5 and css3 being simple goes to pieces. IE9 is a little bit better and supports the bare basics so maybe by the version 25 we can expect support for today’s standards (of course by then we would have moved on and IE is as always behind, or even better, it doesn’t exist anymore).

I will not write about the particulars of either HTML5 or CSS3 because this could take a book or two but I will point you in the direction of some resources I found useful.

Books:

Both books mentioned below are great introductions to the topic of HTML5 and CSS3. They are written with a light language and explain everything in detail. They also give some background as to how these standards came to be. To better explain the new features, both authors use extensive code examples. The only potential drawback is that the books are only useful for someone who already knows HTML and CSS.

A Book Apart: HTML5 for Web Designers by Jeremy Keith

A Book Apart: CSS3 for Web Designers by Dan Cederholm

Web-resources:

Comprehensive table of browser support for HTML5 and CSS3: http://www.findmebyip.com/litmus/

JavaScript library that detects browser support for the technologies: http://www.modernizr.com

Example site using CSS3 features from Dan Cederholm: http://css3exp.com/code/view/

And lastly an answer to a very important question: Do browsers need to be experienced exactly the same way in all browsers? (also from Dan C.) 

Day 20: Simplicity Sells

I watched Ted Talk with David Pogue recently and I wanted to share some thoughts about it:

It seems to me that while it’s obvious what he is saying, it is also a little bit more complicated than he makes it.

His premise is that the simpler the design, the better the user experience. At a first glance that makes sense but I think that to really be able to use this statement in practical design tasks, one has to define “simple”. As stupid as it might seem, this little word needs to be defined in design terms because it can mean  many several different things.

Does “simple” interface means interface with limited amount of options? Or does it mean an interface that has all options shown by default? Or maybe one that uses words instead of icons? You can ask several hundred of these questions before you come up with what a simple interface is. Especially if you take cultural differences into consideration. Should the most used options be on the right or the left? After all a large chunk of our world reads from right to left.

What I suspect David Pogue means by “simple” is “intuitive”. He hints at that meaning of the word, when he mentions breaking the rules for the sake of intelligent design. And while this is a great idea, it is also not very specific. For me standard-based website is intuitive and I don’t have to wonder what in the text will take me to the next page, if one word changes color when hovered over. But it is not the case for my parents. They might have learned that by now, but it is not an intuitive behavior. And there is also the story of my friends’ kid, who comes to the screen of the TV and tries to “swipe” to change the channel. Damn, every now and then even I try to “swipe” on my Kindle.

What’s intuitive? That changes. What’s simple? That isn’t clearly defined. So how to design something that sells? By clearly defining your user group and catering to their needs. And by testing, testing and testing again.

And for desert, this video of Windows 8 design that, I believe is not simple and yet intuitive and has a chance to become a success.

 

Day 16: On wireframes

My regular posting slipped up a bit but partly I blamed WordPress that lost my post saved as draft and now I have to begin all over again.

So today I want to write about wireframes.

website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

This from Wikipedia. Why Wikipedia you might ask? Because every other website has a much more complicated and subjective view of what wireframes are. What got me really interested is how many different ways there are to use the wireframes in. I always used it as a rough draft for my designs and a html box structure. To be honest, I never really treated wireframes seriously. Well, I won’t make this mistake again. After having read the articles I mention in this post, I’ve learned that wireframes can become a quite powerful tool. So let’s take it one by one, shall we?

Wireframes as design tool.

This is the most obvious use for wireframes. They are used by designers to plan the layout of webpages. A simple sketch from which to work. While this is definitely a valid use, it is not the only one. A special sub-set of designers, the UI designers can also use wireframes to conceptualize user interfaces and the information flow on the website. Simple use of post-it notes can do wonders to interaction planning.

Wireframe as information architecture tool.

Wireframes can be used to organize the content. And this is both valid for single pages and for relations between pages. This helps to establish menu structure and generally organize information hierarchy.

Wireframes as thinking devices.

As this brilliant article from Semantic Foundry explains wireframes can be used to formulate the design problem and, by sketching many concepts, finding the right solution to the problem. I have to say that this particular use of wireframes is especially appealing to me. I tried it in my recent work and it really is a great tool I will keep using. I will never again underestimate wireframes.

Wireframes as communication tool.

Wireframes can also be used to communicate with your stakeholders in the early stages of the design process. Instead of talking away about your communication strategy, you can visualize it to your client using the rough sketches.

Wireframes as SEO tool.

Now this was a bit of a surprise to me. I wouldn’t have expected it but it seems that SEO efforts can also be helped with wireframes. Using wireframes you can plan for keywords’ use and optimizing each page.

http://www.seomoz.org/ugc/seo-wireframing

 

Resources:

Introduction to wireframes: http://gluue.com/2009/01/content-wireframing-ducks-meet-row/

Online tools: http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-design-and-9-tools-to-create-wireframes/

The boxing glove technique: http://www.90percentofeverything.com/2008/01/02/the-boxing-glove-wireframing-technique/

All about wireframes: http://wireframes.linowski.ca/ 

Day 13: B2B marketing

I was looking into how B2B marketing varies from the regular one and here are my notes:

  1. Businesses have more complex buying procedures - it is not just one or two people deciding on spending some money. The company might have several departments involved in preparing the specifications and reviewing options, experts might be employed to provide expertise etc. This means that it’s much harder to establish who your target group really is: a certain department, a person in that department, an expert or the CEO?
  2. B2B buyers are more rationale – decisions are made more on the basis of what is needed vs. what is desired. If you are able to  identify what a given company/department objectively need, you can target your customer well. You do not need to guess what a person might want.
  3. B2B products are more complex
  4. B2B target audience is usually smaller – your product is likely targeted at a limited amount of companies. The product is likely to be more complex and more expensive but you will make much less sale than an H&M store does. That also means that more effort can and should go into each sell. That also means that there are less need-based segments.
  5. B2B is based on personal relationships – this results in part from the complexity of products, buying process and the small number of buyers. Because the sale takes more time and is a more complex process a personal relationship and trust are developed. Personal customer service is therefore extra important.
  6. B2B markets have less segments than consumer ones – on average 3 or 4 segments. It is a result of a smaller target audience but also of  less variations in particular needs of this audience. These segments typically are (according to B2B International):
  • A price-focused segment, which has a transactional outlook to doing business and does not seek any ‘extras’. Companies in this segment are often small, working to low margins and regard the product/service in question as of low strategic importance to their business.
  • A quality and brand-focused segment, which wants the best possible product and is prepared to pay for it. Companies in this segment often work to high margins, are medium-sized or large, and regard the product/service as of high strategic importance.
  • A service-focused segment, which has high requirements in terms of product quality and range, but also in terms of aftersales, delivery, etc. These companies tend to work in time-critical industries and can be small, medium or large. They are usually purchasing relatively high volumes.
  • A partnership-focused segment, usually consisting of key accounts, which seeks trust and reliability and regards the supplier as a strategic partner. Such companies tend to be large, operate on relatively high margins, and regard the product or service in question as strategically important.

This is just part one of my notes on the topic of B2B marketing and communication. More will come shortly.