Awwwards
Blog

A place where we talk SharePoint, web design, inspirations, trends and everything in between.

Tag Archives: design

3 Reasons Why Winning an Awwward Would Mean the Wwworld to PinkPetrol

After months and months of building, rebuilding, redesigning and then finally launching we are excited to be informed that our website had passed the nomination benchmark, making it a potential recipient of the Site Of The Day award.

We are pleased to inform you that your submission to Awwwards has been approved.

The site will be fully checked and tested by our submissions team, and then posted in our “Nominees” section and will be evaluated over 7 days by our international jury and Awwwards’ users. During this time, you have up to 5 days to modify this information in the “submissions” section of your user account.

If your submission is awarded a high enough score, the site will be placed in a queue to appear as “Site of the Day”. If successful, it will also be included in our book “The Best 365 Websites Around The World” in 2015

Well, I can tell you this there was a massive high five in the office and even if we are unsuccessful it is still an “winner” in our books – for seeing our new website and rebrand come to fruition.

Awwward Nominee for PinkPetrol.com

So why are we so excited to be nominees and why do we want to win?

 

1. It will show we made the right decision to start again & again & again!

We have spent a fair few months, redesigning our new website, and a few more months redesigning it. Throughout these times we have often asked ourselves – why are we doing this? Shall we just get it up there and tweek? We have all collectively said – no.

If you want to do something good, then take your time and do it properly – was written on the wall. There would be no point rushing it to get it live for the sake of it. We don’t do this with our clients so why would we do it for our own website – arguably our most important one?

 

2. We would be the first SharePoint design company to get one

Within the SharePoint industry we are always looking to be the most creative company, to offer the most creative solutions and this for us would be amazing for all involved in the agency. Our company is a little different because again within an industry that is IT focused and in particular around the SharePoint product we are not focused on the nuts n’ bolts – but the design, branding & UI/UX side of things.

 

3. It would be bigger than us, putting a town on the map!

Since launching our new website the support and appreciation we’ve been shown has been simply overwhelming and again shows that we were right to rebrand and relaunch. We are based in  a small town called Telford, not only would it put the SharePoint product on the map but the town of Telford too.

With all that said, we appreciate all the votes, support, shares & likes. We feel as anagency we do a lot for a clients, which we love doing so its nice to be recognised albeit small in the  grand scale of things.

So please vote if you like our site – http://www.awwwards.com/best-websites/pinkpetrol

Many thanks!

Picking your users brains.. not literally

Launching a SharePoint intranet & the branding is done? what do your users actually want? That’s the hard part..

“I don’t know what I want but when I see it I will know”

Now is the time to explode! We have all been in a situation when I client or potential new client mutters that sentence or something very similar. If it is a potential client then it is hard to say “come back to when you know what you want” in fear of losing your potential new client, if you are already working with the client it can be a slightly easier to guide them in YOUR direction.

Picking those brains can be a messy task, not literally but the complexity is (I am guessing) the same. I am often asked to run design work shops and talk to clients to find what they want from their website or intranet. In this blog post I will focus on my way to pick those brains and extract from the client what they REALLY want not what they think they want.

The way to approach this is the way I would approach my 6 year old boy who often says – I want, I want, I want, which often translates to I want, I need, I’d love. He doesn’t need that replica Darth Vader helmet and yes I know he’d love to have the new mountain bike but he definitely does need the Buzz Lightyear school bag. So taking that on board this is how I then approach my clients in gaining basic design and structure elements with three steps – I want, I need, I’d love.

Using an example recently a client explained to me that getting people on board to use their intranet was an uphill struggle and that people didn’t really care about the intranet or use it. The first questions I asked was – Do they need to use it? His answer – not sure. The first part of launching or thinking of launching an intranet is understanding what your work force needs because everyone is busy and if they can do something quicker to make their day, life or job easier then they will, so why not take that on board?

The background to this little design process originated from working with Andrew Woodward of 21apps. He is an advocate of Agile Scrum development methodology and during my time working with him I designed some post-it notes that asked 3 basic questions – As a *insert job role* , I would like to *insert task here* , so that I can *insert ultimate goal here* . By asking these questions you create scenarios that identify what users actually want as opposed to developing what you think they want.

Taking that all on board I created my “I want, I need, I’d love” to which I am trying to think of a fancy name for – suggestions on a postcard! So how does it all work – it simply asks your users what they need to help them do their job better, what they would want as an idea and if they could have anything, what would they want.

What you need to remember is that asking open ended and fluffy questions can do two things; you’ll either get good answers or you will be pleasantly surprised by weird answers! But what is important is the engaging of the users and finding out what they want, need and love to have.

I need…

I start off with this one, straight to the point & potentially shocks the system into thinking what do they need. Leading from this I would normally ask – “what do you need to make your job easier”. Whether it is an area instead of a network drive to hold documents or it being an FAQ area detailing the common questions they get asked every day, this will hopefully get the people on your side and work with you to develop your intranet.

I want…

People use the internet more and more each day and with the boom in online applications such as internet banking, social networking, shopping etc. people know what they like, what is easy to use and don’t like – it is unlocking this that is the hard bit. Asking people what they want is a more of an open question which can show you want kind of users you have. By identifying what they want can suggest what they actually need for example as users once said to me, I want an area so I can feedback to my team about seminars & training days etc – we suggested setting up a blog which worked perfectly.

I’d love…

I would prepare yourself for this – this question has thrown up all kinds of answers some I recall – a dating area, a buy n’ sell area, Facebook in-house because they cant get on it in work hours and a car share system. Most of the ideas you will think are silly, yes they may be and many of the ideas wont be implemented due to company fear or unprofessionalism – we are here to do a job right? but some ideas will and can prove to be great and beneficial. One particular one idea we had was the car sharing system, which was put into operation and cut car usage by 30% in the organisation which from a environment point of view can only be positive – so you see, there are a few gems out there!

Recap…

Now the brain of your users is ticking, things are cooking up in there and hopefully ideas are getting spat out by the second. By doing this exercise on post-it notes it is something that can be kept and logged in as a development plan or some kind of wish list. What I would do now is recap on the ‘I need’ question – from all the other ideas what do you think you need now, I would ask again – the results will be surprising.

What this process does is two things, first thing is gets users on board from the start and it is much easier having them work with him as opposed to you – put your arm around them, not pushing them away from you. The second thing it does is finds out what they want, it picks their brains.

Another last tip, I would suggest doing this again, maybe with a larger group a month later and maybe have it as a competition – people like to win stuff! Best ideas win a prize and you never know what ideas you may get.

Thoughts and comments welcome.

PinkPetrol SharePoint 2010 Master Page & Styles

After my recent presentations at both SharePoint Saturday UK and SharePoint User Group UK, I have decided it would be a good idea and great help to people to release the ‘this is what I prepared earlier’ files including styles, images and Master Page that were used in both presentations.

So what do you get? you will a Master Page which is a slight modification of v4.master and all the styles that can give your out of the box installation a different look albeit fuchsia pink, which is an awful colour I know and all the required images. All the images are PinkPetrol related such as my logo and banner but you can use these files as a templates and obviously you can change and make your own using something like Photoshop, Fireworks or Gimp (which is free).

If you click and follow the link below, you will be able to download all the files with instructions.

http://www.mediafire.com/?6dk5fwiagld9za6

I hope you find it useful and <shamelessplug>if you need any help, then please get in touch </shamelessplug>.

Enjoy!

Making the SharePoint 2010 Ribbon scroll like a normal site!

So Microsoft decided to dock/stick/fix the ribbon to the top of the page like so.

Whilst in my session I covered how to make this scroll and gain a lot of questions – Why did they do this? and what is the fix? Well the fix is very simple. But for the ‘why’ I am not sure why. I think they wanted people to also have access to the ribbon much to how the other Office applications work.

  1. First thing you need to do is remove or change scroll=”no” to “yes” in the <BODY> – this will make the page scroll conventionally.
  2. Next you need to remove or change the “s4-workspace” ID tag from line 293 (in v4.master).
  3. I usually just rename it to s4-workspaced so if you need to change it make, you can just remove the ‘d’
  4. Next you need to add some CSS either in a referenced custom stylesheet or directly in the masterpage. The CSS code is very simple it is – body {overflow:auto!important;}

And this should make your page scroll. Fairly straight forward but probably the most requested ‘feature’ to remove when I am branding SharePoint 2010.

Please note – this will mean that if you have a large page and you need to edit the properties you will need to scroll back up.

Top 20 Examples of Creative Search Areas within SharePoint

Continuing with the series of my SharePoint Top 20, I now bring you Top 20 Examples of Creative Search Areas within SharePoint.

So let the showcase begin….

1. WesTrac Cat

WesTrac Cat

I am a keen fan of gradients which can work really well if used correctly. What I like about this search area is the way it show the users  the magnifying glass within the search input box, combined with some text and the gradient search go button – all in all I think it looks really cool and more importantly noticeable.

http://www.westrac.com.au

————————————————————————————————————————————————

2. imason

iMason

Another way to show a search box is using rounded edges. Although my personal opinion is that the rounded box looks a bit out of place on a website that is predominately squared, boxed, contemporary etc.. it is a good example of another way of displaying your search box.

http://www.imason.com/

————————————————————————————————————————————————

3. IBC Bank

I like it when a website takes the time to keep a running theme going throughout, it should be second nature but it is surprising how many sites don’t. In this case they have done just that with the go, search, site search buttons etc. What I also like is the combination of the SharePoint site search with the JQuery drop down box. A good example of what you can do with the SharePoint and web technologies combined.

https://www.ibc.com

————————————————————————————————————————————————

4. Gevalia

I like the style of this search box with a nice and crisp outline combined with their theme colour orange background for the submit button. What I also love about this ‘go’ button is that it is in the style of a coffee mug, from a birds eye view – very clever and quirky.

http://www.gevalia.com

————————————————————————————————————————————————

5. Cable One

The reason I like this search box is because it is just a standard search box and a plain ‘go’ button, which has been placed on a polygon image, which I believe takes shape just like there logo. It is also using the same red as their branding on the top of a blue navigation bar. Although I prefer search boxes to be on the right hand side I do thing they have made this stand out enough to say ‘our search box is on the left’ !

http://www.cableone.net

————————————————————————————————————————————————

6. Ajilon

I choose this particular site for its search, for the fact that it uses 2 buttons as well as the search box. With the traditional search area (top right) being the second place your eyes take you when you look at website, they have been clever to add some further ways to getting to information. Works well if done correctly.

http://www.ajilon.com

————————————————————————————————————————————————

7. ERGO

The search icon is what I like about this search setup, slightly rounded on a red background in contrast to the black navigation bar underneath works great. Clean, crisp and keeping up with the developing theme.

http://www.ergo.co.uk

————————————————————————————————————————————————

8. West Virginia

This is a great example of pushing people to use search, which works so well if their search is set up correctly & presents correct results and as we all know search in SharePoint, if set up properly, can be fantastic. This, in my opinion is a good example of using the search functionality as a focal point for your website. Also I like the added extra of the ‘recent searches’ that other people have searched on – all in all a great search example.

http://www.wv.gov/

————————————————————————————————————————————————

9. Childine

I have obviously taken a close look at a lot of search boxes, areas, layouts etc. and I can say I haven’t really seen many search ‘go’ icons that are circular. This site does and it goes well with the circular home icon and their main telephone icon – also may I add a very important charity in the UK.

http://www.childline.org.uk

————————————————————————————————————————————————

10. SOS Childrens Villages

Using my favourite blue is always going to get my attention – I say again, I love this blue! Also just like the Ajilon site they have used the top right hand corner area for their most important buttons – Search & Donate. Have you done your bit?

http://www.sos-usa.org

————————————————————————————————————————————————

11. Speak.NL

Using the bright orange as the search box on the black background really works, it draws your eyes towards it and works well as the it is the sites main colour. Using a bright colour like orange on a very dark background is going to create a great contrast.

http://www.speak.nl/

————————————————————————————————————————————————

12. Right@Home

Here the combination of the menu/logo font for the example search text and the size makes this site search a feature point of this site. Big searches work, but must fit in line with the rest of the site – proportion is very important.

http://www.rightathome.com/

————————————————————————————————————————————————

13. Advantive

There is some real emphasis on this search box, by making this the focal point of the site I would assume that are looking for users to use it to find information, the only down side to that is if their search is configured correctly then it will work great to find the relevant results and quickly. If not then you will be loosing people very rapidly.

http://www.advantive.nl

————————————————————————————————————————————————

14. Expedia Media

I know this post isn’t to showcase top headers (that’s the next one) but I love this top bar and I love the way the search box and go button have been incorporated into it – leading on from that the green go button works really well and compliments the blue.

http://www.advertising.expedia.com

————————————————————————————————————————————————

15. VB Parents

When I look at this search area I do hope they meant to make the search box a part of the cloud! Because if they have it looks great, I like the idea and I like the colour contrasts used on the search ‘go’ button.

http://www.vbparents.com

————————————————————————————————————————————————

16. Cox

When viewing this site I tend to mute it, as the woman gets a little bit annoying. But what I do like about this site is the nice search box they have, large box with a subtle ‘go’ in a techy font – nothing over the top and nothing in your face – I suppose that’s the woman’s job on this site – man she is annoying!

http://www.coxhelpcenter.com

————————————————————————————————————————————————

17. Australian Government

Another example of making your search maybe too prominent! All I seem to be drawn to is the white border that I think just looks odd and out of place – remove it and you will have a nice search box there. I am  still looking at it, still looking at it….

http://www.socialinclusion.gov.au

————————————————————————————————————————————————

18. Lutron

Light grey on a darker grey background with white text works, looks great and is stylish – wouldn’t you agree?

http://www.lutron.com

————————————————————————————————————————————————

19. ARG

This is a cool example of using a texture behind the search box to give it some life, which is exactly what this site has done. I think if it was just a normal search box it would just look lost as part of the header. A simple grunge background brings this search functionality to your attention.

http://www.arg.net.au

————————————————————————————————————————————————

20. Northwestern Mutual

The best example of a corporate style search? I think so, enough said.

http://www.northwesternmutual.com

SharePoint User Group UK Meeting – Nottingham

On Thursday, 14th January I am doing my first presentation for the SUGUK in Nottingham at Intelligent Decisioning Ltd head quarters in Strelley, Nottingham. I am doing a small session on SharePoint Design & Branding, a little show and tell and my thought process when doing design and branding. The session is called Making SharePoint Beautiful – I hope you can all make it.

The user group kicks off with Penny Coventry who will kicking off with “Branding SharePoint Sites: Using the browser and SharePoint Designer 2007/2010”, which will cover what is possible with 2007 in terms of design and a little sneak peek into SharePoint Design 2010.

After myself I will be followed by Nikki Ashington on Accessbility.

Also here a little bit of trivia for you. Nikki was who got me into SharePoint design when she was on site at my previous employment  as a design consultant – so she is to blame 🙂

UPDATE – here is the write up of the event, really good feedback for the event – http://macraem.wordpress.com/2010/01/19/suguk-nottingham-14th-january-2010/

Squashed SharePoint site when viewing Properties in Edit Mode

I have finally found a fix to a really annoying bug in SharePoint that squishes my site when I have edited a Web Part!

In side the SharePoint master page everything is set to Height:100% – EVERYTHING, even I feel I am set to Height:100% when I have finished looking at the damn code! Removing these can cause all kinds of hidden issues so my rule of thumb is if CSS can bully in line styles then let it go to town them!

The problems crop up when you want to add a custom footer that combined with a small resolution causes this…

squashed

As you can see this isn’t very user friendly and looks pretty poor. Well I used my trusty tool set of web apps to find out the cause and hopefully a fix and I feel I have found one. If you use this line of CSS code in your style sheets it will increase the height of the properties pane on the right hand side.

#MSO_tblPageBody {
 height:500px !important;
}

This is the fix I have found which has worked for me – if anyone knows a better one or an improvement on mine then feel free to share!

Customising the Content Query Web Part list results

Example of Read More Links

The CQWP is a fantasic webpart my only two annoyances are that you can only do 3 rules on the filtering and the second is that the results are a bit rubbish in terms of styling, look and feel.

There are two ways you can customise these results. First way is to put a DIV wrapper around the results and style them that way which is ok when you want to do text styling such as color change, style and padding which you can see in the orange box. You can do this by using the styles below but remember – you need to put a DIV wrapper around the Web Part Zone and/or Web Part.

#blogbox .link-item,
#blogbox .link-item a:link,
#blogbox .link-item a:visited,
#blogbox .link-item a:active
{
color:#990000;
font-family:arial;
font-size:1.15em;
font-weight:bold;
}

When looking into this I first tried to style the A tag that is used for the TITLE which read ‘New version of Free2Teach launched’ which worked ok until there was a long title line that wrapped around and underneath. This caused it to visually break and look poor. I then thought I am going to have to do this properly if I want to do it!

What I did was very very simple, I started by opening up ItemStyle.xsl inside the XSL Style Sheets within the Style Library. Next I took a copy of this file (very important!) and then added the following below. I set the template name to ‘ReadMoreLink’ so I could remember it when selecting it in the CQWP settings.

<xsl:template name=”NewLinkDefault” match=”Row[@Style=’NewLinkDefault’]” mode=”itemstyle”>
        <xsl:variable name=”SafeLinkUrl”>
            <xsl:call-template name=”OuterTemplate.GetSafeLink”>
                <xsl:with-param name=”UrlColumnName” select=”‘LinkUrl'”/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name=”SafeImageUrl”>
            <xsl:call-template name=”OuterTemplate.GetSafeStaticUrl”>
                <xsl:with-param name=”UrlColumnName” select=”‘ImageUrl'”/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name=”DisplayTitle”>
            <xsl:call-template name=”OuterTemplate.GetTitle”>
                <xsl:with-param name=”Title” select=”@Title”/>
                <xsl:with-param name=”UrlColumnName” select=”‘LinkUrl'”/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name=”LinkTarget”>
            <xsl:if test=”@OpenInNewWindow = ‘True'” >_blank</xsl:if>
        </xsl:variable>
        <div id=”linkitem” class=”item”>
            <div class=”link-item”>
             <xsl:call-template name=”OuterTemplate.CallPresenceStatusIconTemplate”/>    
                <a href=”{$SafeLinkUrl}” target=”{$LinkTarget}” title=”{@LinkToolTip}”>
                    <xsl:value-of select=”$DisplayTitle”/>
                </a>
                <a href=”{$SafeLinkUrl}” target=”{$LinkTarget}” title=”{@LinkToolTip}” class=”readmorelink”>
                  read more
                </a>

            </div>
        </div>
    </xsl:template>

What I have simply done is coped the full A reference and copied it underneath and set the class to ‘readmorelink’ and added the following css to my style sheet and it should work 🙂

.readmorelink {
display:block;
text-indent:-9999px;
background:transparent url(‘../Images/ergoimages/readnewsitem.jpg’) top left no-repeat;
color:#666666;
margin:10px 0 0 0 !important;
padding:0;height:27px;
font-family:arial;
font-size:1.15em;
font-weight:bold;
}

Adding Custom Styles to the RichTextEditor (RTE) in SharePoint

SharePoint Rich Text Editor

Whilst doing some branding work for a client I was asked ‘can we have different text colors’. I instantly thought of hours of HTML teaching and had visions of brightly coloured pages illuminating fire red, yellow and radioactive greens! So what I needed to do was lock it down so the client can dictate the colors but the users can set them.  The best way to do this is give them a selection of custom styles they can use for titles that are outside of the standard h1, h2 & h3 that are set.

.ms-rteCustom-CustomStylesh1 { color: #990000; font-size:3em;font-weight:bold;}
.ms-rteCustom-CustomStylesh2{ color: #666666;font-size:2em;font-weight:bold; }
.ms-rteCustom-CustomStylesh3{ color: #cccccc;font-size:1em;font-weight:bold; }

The way it works it by adding .ms-rteCustom-NEWSTYLENAME the RTE will pick up this style and will insert the desired styling.

The 10 step Web Designers check list for backing up

A quick check list of items you need backup before you move, delete or format your system.

Picture of a check list

Recently a good friend of mine Martin Coulthurst of Lightness recently backed up his computer and asked me about various things he would need to backup, I had a think and we bounced a few things back and forth on what we need to back up, conversation ended and he did his install. The next day we spoke and he realised he forgot one or two very important things – fonts! This then prompted me to think about a little check list of items that I will be thinking about when next back!

1. Get yourself an external hard drive

With the price of external hard drives now a days there is no excuse for not having the money to buy one. Over at Overclockers.co.uk they have a Western Digital My Book Essential 500GB USB2.0 External Hard Drive for £62.99 – bargain! Get this and you are ready to go!

2. Documents

The treasure chest of any designer, if like me in this folder which can sometimes be called the Desktop (!) has everything saved picture files, word documents with little notes, CSS snippets and even the stray file called something informative such as smd-application3.php which a week ago was as familiar to you as your date of birth, 2 weeks down the line means nothing!

3. Browser Settings, Favourites & Add-ons

There isn’t an easy to back up your browsers settings unless you download a 3rd party tool. In my experience I find that proxy settings, browser adds-ons such as FireBug/IE Dev Tool bar are my most important ones. Best and easiest way to do this is either – take notes or print screen them into a word document.

  • To find out FireFox add-ons – Tools > Add-ons
  • To find out IE add-ons – Tools > Manage Add-ons
  • To find out Safari add-ons – Help > Installed Plug-ins
  • To find out Opera add-ons – Widgets > Manage Widgets

Favourites is also something important you want to backup, as designs and most other IT people know how annoying it is when you find something and don’t bookmark it, well that feeling is multiplied by a million when you’ve lost ALL your favourites, trust me I know.

To find your favorites they are here – C:\Documents and Settings\PCNAME\Favorites

4. Fonts

Another little designer’s paradise – all the fonts you’ve sound, all the various versions of Arial that are slightly thinner or slightly bolder. Some fonts you’ve found and probably not paid for. All these can be found within the Control Panel > Fonts.

Useful resource if you have lost all your lovely fonts – http://www.csstea.com/css-gallery-news-and-resources/807-11-best-free-fonts-websites.html

5. MSN/SKYPE conversations

I find keeping my conversation that I have had with clients is pretty useful. Whether it be checking back on something you maybe of lightly agreed to or something you may have said to a client or something else you can’t remember, it’s pretty useful to go back and check.

If you are saving MSN conversation you can find them here – C:\Documents and Settings\COMPUTERNAME\My Documents\My Received Files\EMAILADDRESS1212445099954\History.

If you want to turn conversation saving on in MSN then open up the main MSN window – Tools > Options > Messages > Message History (at the bottom)

6. Email

I personally use Gmail and Hotmail just for the fact that if my system does die, I have this backed up online – for free! But if you are using Outlook then I recommend doing a PST backup of all the email, this may take a while so remember to stick a DVD to pass the time – I recommend the film Hunger – the story of Bobby Sands – Fantastic film.

7. Software

Everyone knows how annoying this is when you have your software suite perfect then the manufacturers go and do something intelligent like release a new version of software that is poorer than its predecessor (MSN Messenger &amp; Fireworks CS4!) or discontinue the software you are using. I tend to keep my software AND products keys backed up, I suggest you to do the same! Last thing you want is a deadline date, dead system and no software! At least if you’ve backed up you can install what you need as a short term measure. A site I recommend is OldVersion – http://www.oldversion.com/ which I am sure you can guess what the site is about.

8. Media

Pictures, Music, films or even ambient sounds of frogs or even System of a Down albums (what I use to design to) is all pretty important when you’re in the ZONE.

9. FTP site lists

If like me you have 1 FTP programme with all the sites that I look after listed, then you will be pretty annoyed if you lost all them! I do have them all saved but it is a chore having to wade through emails trying to find each and every site you look after! Even if you have then found chances are the FTP password has been changed so you have to then log in to the cPanel or dashboard to get the details so its a pretty good tip to save these!

Most FTP programs come with an export/import option that usually exports out as a CSV or text file of some kind. This option is a winner for me, I probably would use an FTP programme that doesn’t have this feature – WiseFTP 5 does and that is what I use.

10. Client list & business documents

This is probably THEE most important thing to back up, I personally carry all these on USB stick which is locked away in a fireproof, flood proof and child proof safe. My client list has all my clients’ names, emails, contact numbers and dates of work and what was done. Just imagine if you lost this? I actually feel anxious writing that! Same goes with business documents, all backed up just in case anything happens.

awards & recognition
PinkPetrol on awwwards.com PinkPetrol on webguruawards.com PinkPetrol on cssdesignawards.com PinkPetrol on csswinner.com PinkPetrol on csslight.com PinkPetrol on Find Web Agency