Article

How to use: Table of Content – jQuery Plugin

After I’ve published the revised version of my table of contents script I got many request on “How to use” it. You asked for it and here it is the guide how to embed the script. I won’t provide a full featured step by step guide here. Instead, I will provide a small package of a page layout and a guide how to script embed directly. To make this work you need to have an Enterprise Wiki or Publishing page. The first part covers how to add a page layout containing the table of contents script. The second method shows how to add the script using code embedding. You also need to download the following file TableOfContents-PageLayoutPack that contains all the required files.

[Read more]

Article
1 comment

Typography First – Make your SharePoint content readable and compelling

Typography

The first thing when I start a new branding project I first make myself familiar with the fonts I want to use. This is because I want to see how they work on some basic text elements an if the text is readable.

In general the overall typography is the most important factor to success of any information system or web site. 90% to 95 % on a website is dominated by text. Becoming a master on typography means you become a better web designer or SharePoint brander, but it is no easy topic and I just want to scratch the surface here but provide some good links for further information at the end.

The basic

The typography setup can be mainly defined by the following factors:

  • The Font
  • Font Size
  • Font Weight
  • Line Height
  • Letter Spacing

In other words, these are our core ingredients how we can manipulate the text. For example, some fonts look great with the predefined letter spacings while others require a little bit more space in between the characters. You can also use the letter spacing to make a special effect on headlines. For some examples that a look at Helvetica, Bold, Big, Negative Letter-Spacing.

How many fonts should I use?

In general when, you plan a design it is common practice that you don’t use more than three to four different fonts. Those different fonts can be defined for:

  • Headline (<h1>-<h6>)
  • Paragraphs (<p>)
  • Quotes (<cite><cite>, <block quote> is decrepted with HTML 5)
  • Code, Navigation,…

When we take a look at the out of the box design of SharePoint 2013 at least 3 different fonts was used. Those fonts are Segoe UI (for smaller text), Segoe UI Light (for large text such as headlines) and Segoe UI Semilight (&lth2>-&lth3>).

The fonts are part of the same font family, but have a different font weight, which is indicated by “Light” and “Semilight” and those fonts are slightly different. The typeface was adapted to the weight and are not only bold and “not so bold”. The reason why Microsoft used those different font faces was that they look great in there specific use case. Improved the readability and the overall design.

Font picker in composed look

Font picker in composed look

When a theme is used in SharePoint the fonts can be changed to only a maximum of two fonts. Mostly Segoe is used for the regular text as used in a paragraph, navigation, and so on because of its good readability. The larger font in the font picker will be applied to the headlines only.

Reset and Reapply fonts using CSS

When a web design is created from scratch it is fairly simple to reset the fonts. All that needs to be done is to apply a base font to the body tag and additional fonts for the headlines.

HTML Typographic Template

HTML Typographic Template

In SharePoint this only partially works because some elements will still have the Segoe font applied. For a full change of the body font some additional classes need to be added.

Changed Typography in SharePoint

Changed Typography in SharePoint

So we now have two different styles that need to be applied differently to the Apps (first snippet) and SharePoint (second snippet). Both are probably stored in different style sheet files and we still don’t have any additional properties such as line height, font size or font weight applied to the fonts.

Finally and whats next

The two different style definitions cry for something more flexible and yes we can do this in SASS. By assigning variables we will be able to define the typography as global settings that are easy to change. Then we don’t have to care or worry about those style sheet classes.

In the meantime, you can do a test run and add the SharePoint Style Sheet from this blog post to your master page. If you want to get a little bit deeper into typography you can read the following resources.

Other articles in this series

Further readings

Article
0 comment

This was my year 2013 – Warm welcome to 2014 !!!

Happy New Year to all the readers of my blog and I wish you all the best. The year 2013 is gone and there were a lot of things I’ve done. I love to take the new challenges for the year 2014 and this will be an amazing year for sure. I also have to thank the community for the great feedback I received.

The right time to take a last look back to the gone year and look forward to a fantastic year 2014.

SharePoint-Community.net

I was honored when Mark Jones asked me to join sharepoint-community.net to be part of the community representatives. To join this group of people was on of the best decisions I ever made. It’s fun and challenging to build up such community.

Soon after joining we started to make the first idea to organize an online conference. This is now better known as http://www.sp24conf.com. To me it was also a great opportunity to show my skills and develop the responsive web design based on Microsoft SharePoint Foundation from scratch.

SP24 Conference

The 24 – Hours SharePoint Conference

SharePoint Forums

I started to help other people back in the year 2011. I love to answer questions there, because they are very useful in several ways. Read quality reply by other and learn about other people challenges. The last thing helped me a lot to do my job better. I was awarded in the year 2011 / 2012 with the SharePoint Community award. In 2013 I wasn’t awarded because I had too many side projects. This year I passed the score of 10.000 points, which indeed was unreachable when I started.

Blogging

I still love to blog. Not only on this blog. I also joined brandmysharepoint.de. This is a German blog about SharePoint Branding.

One highlight of my blog was that I reached 100.000 page views.

I feel honored to save Mark Anderson time and he published one of my blog post Retrieve Managed Metadata using JavaScript and SPServices in his SPServices Stories.

Speaking

Hopefully I get more opportunities to speak about cutting edge web technologies and how they can be applied to SharePoint. Currently I have one event in my plan, where I will have a session but I truly hope that this won’t be the only one.

I only had one opportunity to speak that I really enjoyed. It was at the ShareCamp in Vienna the session there was about “Responsive vs Adaptive web design and Device Channels”.

The presentation I published on slide share had currently more than 2000 views and was massively shared. Thanks to all who enjoyed and shared it.

Traveling

I really enjoy traveling all over the world and have already some destinations on my road map for this year.

Hope to meet many of you at these conferences.

Happy new year and wish you all the best !!!

Have a good start in the year 2014.

Article
1 comment

HTML 5 Rocks – Where to find information ?

Nearly thirteen years ago i wanted to start building web sites. I asked a friend who already was familiarly with HTML how to learn The answer was simple “Go to http://www.w3c.org. Read HTML specification. Read CSS specification. After you know all those specification”. At this time it sound like a useful information to me. I learned those specification and start writing.

Nowadays i’m right back where is started. I started reading HTML5 and CSS3 specification again. The reason for this is simple. Good HTML 5 informations are hard to find and the only facts are those specifications. Most of the information i found on the web are wrong or just partial right.

Probably the best information to learn from is the HTML Working Group. The maintainer of the HTML 5 specification. For some defined html tags in the specification there are a remark on supporting browser too and you find useful examples.

Afraid of using HTML5 today ? Don’t be scared you can use it, even if someone uses IE6. Bruce Lawson have some really good information on HTML5. His test page introduces new tags like:

  • <header>
  • <nav>
  • <article>
  • <aside>
  • <footer>

Those are the prime information for me at the moment.

A bad example on HTML5 is http://html5readiness.com. It deals a nice graphic on HTML5 and CSS3 from a browser point of view. The problem with this site is the mixture no HTML5 features and false information. For example SVG, Geolocation are not defined in the HTML5 or CSS3 specification. The caniuse site is useful but html5 readiness puts in a wrong context.

Googles http://www.html5rock.com provide a great range of information but it has the same mixture of no HTML5 features. So you won’t get exactly a clue what HTML5 really is.

Alt those information has a right to exist, but i really like hard facts more.

Soon i will provide more useful information on HTML5.