I got to work with Winston Wolf’s Clickable World Map today – a serious marvel of CSS and JQuery. It is free, and so I thought I would share it with you – my way of getting more people to use it, and to get Mr Wolf some exposure for his other clickable maps (he has all continents – brilliant for Office locations and such). You can tailor the PSD’s to suit your needs, and the basic workings of the map is very well documented and thought out. I was having a bit of an issue, and so I emailed him. Within an hour I had a response, and answer and two hours after than I was good to go to. It slotted brilliantly into my SharePoint page – no JavaScript errors, no fuss, no troubleshooting (which is unusual for SP2010 responsive design!) For me the greatest part was the responsiveness. You all know me as the poster child for responsive design, and being able to just slot the map in without the hours of pixel pushing according to media queries was a dream.

Give it a shot – you will be seriously impressed. Even the maps JQuery is well thoughts out – neat and encoded. His twitter is @winstonwolf_pl

I have had the good fortune and pleasure of working with one of ZA’s most brilliant SharePoint UX and Front end specialists. We are focusing on responsive design in SharePoint 2010.  One of the tricks shown to me was a simple border at the top, with a colour per media query, to help identify whats what.

You have no idea how much time this simple border saves.

I have created a HTML 5 Media Query starter kit. It has the most common sizes, with the border and colour pre set. I hope this helps, and saves you some time

HTML5-StarterKit

Over the past few weeks, I have had many requests to “de-code” the starter master page, and also stop SharePoint Designer putting the fear of Geek into every one. So I have put together this step by step guide and added the links to other Branding Blog posts by other people all together in one spot. I know the content of this post overlaps my content area – it has to do with my code links – will fix asap.

So in Part One – we are going to get our site ready, by creating the site, adding the folders and files we need, setting up the custom style sheet and setting that page logo.

 Index:

1. Links
2. Creating Our Team Site
3. Getting Ready – Getting All Our Ducks In A Folder
4. Setting up the Master Page: CSS and Logo

Links:

Branding for Beginners :  Written by Matthew Hughes
For me this is the be all and end all of Branding posts (series). Matthew has covered everything, and if you work your way through this series, by the end of it – you will have a good feel for SharePoint Designer 2010 and branding SharePoint in general.

Starter Master Pages – by Randy Drisgill
If you are branding Sp2010, you always start with on of these pages. This, in my opinion, one of the greatest contributions to the SharePoint 2010 community. In Matthews series, and this post – you will be asked to go get this pack, so download it now.

Create Our Team Site

1. Go to Application Management Open up SharePoint 2010 Central Administration Click “Application Management” Click “Create Site Collections” under Site Collections

2. Create the Site Choose your local Web Application Add in a Title – Lets call it MPTutorial Under URL – make sure the first drop down is set to the  “/sites/” option Then add “MPTutorial” in the text box next to the above drop down. Choose the Collaboration Tab, and then select Team Site.

3. Set the administrators Add your admin users – usually your Site Administrator Quota should be on the default option: No Quota Click OK

And we are ready to go. Click the site link in the “Top Level Site Successfully Created” window to go to your new site (it opens in a new tab), and then click OK. My sites URL is http://louise-pc/sites/MPTutorial, yours should be similar.

And your new site should be the stock standard vanilla Team Site (as below)

Getting All Our Ducks In A Folder Please make sure you have SharePoint Designer 2010 Installed, and you have downloaded and extracted Randy Drisgill’s Starter Page Pack. We are going to add in the different files and folders that we will be working with now via Designer. So lets begin: I want you to click Site Actions > Edit in SharePoint Designer

SharePoint Designer will open, and open up our site. You will settle on the MPTutorial Properties page. From here, I want us to get our starter page in. So click on Master Pages (on the left navigation), and this will open the file list of the Master Page folder. Click Import Files Click Add File Browse to your Starter Master Pages folder, and select the _starter_foundation.master file and click Open. Click OK on the Import pop up window

Find the newly added file, and right click on it Rename it to MPTutorial.master Once renamed – Right click again on the file and click “Set to Default Master Page”

Now onto our Style Library Folder.On the Left Navigation, click on All Files. This will open up the full file and folder structure of our site. Double click on the Style Library folder. The Style Library will open, and be quite empty. So create a folder called “MPTutorial” - You can use the New Folder button on the ribbon, or right click in the window go to New > Folder

Open up the new folder and create 2 more folders: - Images - Styles Then open the Styles folder Right click in the window Go New > CSS And name the empty style sheet ‘MPT.css’

Download this little image pack, then extract it onto your machine Import the images into Your Images folder (Style Library > MPTutorial > Images) We will be using these through out the tutorial

Setting up the Master Page: CSS and Logo

In Designer, open your MPTutorial.master Go to Master Pages (Left Navigation) Click on MPTutorial.master It will open up the master pages property screen Click “Edit File” the master page will open up in Editor mode > Code View

Find this code: SharePoint:CssRegistration name=”/Style Library/sitename/style.css” After=”corev4.css” runat=”server” Then replace it with this code: SharePoint:CssRegistration name=”" After=”corev4.css” runat=”server” Lets breakdown the above link $SPUrl:~SiteCollection/Style Library/Custom/MPT.css $SPUrl - Finds the full path of the SharePoint Service so in my case it is Http://Louise-pc/Sites SiteCollection – you replace with your site collection name (eg. MPTutorial) Style Library – referencing the folder Custom – your custom folder (if you have one) – in this case it is the folder we created – MPTutorial Styles.css – the name of your style sheet – in this case – MPT.css

Now we are going to add in the Logo using Site Settings Currently your site logo looks like this

In Designer, go to your MPTutorial images folder Right click on MPLogo.png and click properties Copy the url shown for Location

Now go to your site Click Site Actions > Site Settings Under Look and Feel Click “Title, description and icon” Under the Logo URL and Description Section Paste your MPTLogo.png location url in the URL text box Click OK

You  will already see the logo showing in the Site Settings page, but click the Logo to go to your home page for good measure

On Monday – in Part 2 – We will work with the Header bar (Site Logo, Search and the Top Navigation)

So the new look and feel for the SharePoint Designer is almost complete – Barring some portfolio pictures, and some content here and there. The new look is to help SPD serve as my personal consulting site and my blog, and I think the template I decided on works very nicely. I will be adjusting colours, and a few things in the next few days. The menu isn’t working for me, I need it to be less “kitch” – playing with some styles for that too.

Please comment and give me some ideas / thoughts / suggestions.

I have done alot of websites in the past 14 years, my style and knowledge has changed and grown, but it is always fun to see how I have grown. I still look back and ask myself “What were you thinking?!” but without trial and error there can not be cannot be growth. The sites shown here were creating for myself personally, a friend, or just for fun.

I have done allot of websites in the past 14 years, my style and knowledge has changed and grown, but it is always fun to see how I have grown. I still look back and ask myself “What were you thinking?!” but without trial and error there can not be cannot be growth.

I do not have a category for these other than playful inspiration. These images were created because of a tutorial, an idea, a movie, or insomnia. They date from 2000 to 2009. You can see I started learning about fractal designs, and dipped my feet into design merging.

I call myself more a photo morpher than I do a DTP style designer. Here are some of the graphics that my friends inspired.

I went through a phase of loving the work of Linsner. The one character he draws is called Dawn, and she is the Goddess of Life, I have most of the graphic novels, and they still inspire me to attempt to draw every now and then. I used Dawn in quite a few of my 2D graphics. These images date from 1998 to 2006. I used to fancy myself as a poet, and used it alot in my graphics (I was young, and a hopeless romantic).

I have included a few of the designs I created for SharePoint 2010. I started branding SharePoint in 2009. Client logos have been cut out, and some text has been blurred. For my complete portfolio, please email me.