2007, 2010, Branding, End User, General Knowledge, Marcy Kellar, MOSS, WSS

Top 5 UX (User Experience) Articles of the week - Week 3

June 28, 2013 admin 19 Comments

Editor’s note: Contributor Marcy Kellar is a SharePoint Strategist and User Experience Designer. Follow her @marcykellar

Last summer, Marcy Kellar began a weekly series of her top picks of UX articles for that week. Marcy is going to pick up the series again so we’ve gone back to publish her original articles.

Here are the top 5 UX articles on branding this week:

1 - Guide to Website Navigation Design Patterns

In web design, there are certain common design patterns that are used for interaction. Site navigation has a wide variety of common and familiar design patterns that can be used as a foundation for building effective information architecture for a website. This guide covers popular site navigation design patterns.

Marcy Kellar: This article outlines patterns of navigation that includes description of use andpros/cons. It gives a fantastic overview and plenty of pictures to better understand navigation design patterns.

2 - The Elements Of Navigation | Smashing UX Design

This article is about the tiniest of details that goes into creating the main centerpiece of your digital product. The construction of the elements of your navigation, the most important aid you can possibly give to your users as they are constantly seeking a reason to walk out on you.

Marcy Kellar: My favorite part of this article is the Six Navigation Design Guidelines found toward the end. Print them out and put them on your cubicle wall; then live by them.

3 - Pleasure and Pain » Knowing Why Beats Knowing How

Last year around this time, I started following an eating plan called The 4-Hour Body by Tim Ferriss. At the same time, I was feverishly traveling the globe presenting my talk Design Principles: The Philosophy of UX .

Marcy Kellar: In SharePoint, often the focus is on "how" to do something, which makes sense considering the breadth and depth of the application’s features. This article makes an argument for knowing "why’ you are implementing. It’s a nugget of wisdom in a short post with many links worthy of clicking. Whitney Hess is well-known for her UX insights. She’s an industry thought leader and an enthusiastic blogger. If you aren’t familiar with her, I hope this article serves as an entry point for the rest of her blog.

4 - Overcoming Halfhearted User Adoption | UX Magazine

In 1996, I was a database developer at AT&T Solutions (now defunct). AT&T Solutions had two separate payroll systems, one for AT&T Solutions and one for AT&T corporate. Both were excruciatingly slow.

Marcy Kellar: Every one is talking about user adoption but what is it? What does failure look like? What causes failure and what moves you closer to success? This article provides a simplified understanding of user adoption. What I liked the most about this article was the authors transparency and use of examples.

5 - Design Tip: Never Use Black by Ian Storm Taylor

One of the most important color tricks I’ve ever learned was to avoid using the color black in my work. Mrs. Zamula, my childhood art teacher, first warned me about black when I was in middle school. And I heard the same again multiple times at RISD.

Marcy Kellar: This article encourages designers to look closely at areas of color you assume is black and provides examples you may find surprising.

0003bffda1e28d90@live.com, 2010, Branding, CSS, End User, HTML5, MOSS, Site Manager/Power User, WSS

HTML5 and SharePoint 2010 - Part 4: Adding the Code (Continued)

June 27, 2013 admin 6 Comments

You may also be interested in: O’Reilly - SharePoint 2010 at Work

Editor’s note: Contributor Eric Overfield, a leading expert in SharePoint Branding and User Interface design, is President and co-founder of PixelMill. Follow him @ericoverfield

Step 5

In Step 5 we link to the powerful HTML5 IE enabling script, html5shim, which adds “some” HTML5 compatibility to older versions of IE, in particular IE8 and older. You can learn more about html5shim from Google at http://code.google.com/p/html5shim/. Normally I prefer to download my own copy of JavaScript files so that I may compress them on my own, combine them with other scripts and other such reasons, but it is quicker to link to the publically available version as well as the addition of caching improvements.

The benefits of html5shim include enabling the rendering of HTML5 elements such as <header>, <footer>, <article>, <section>, <nav> in IE8-. Without html5shim, IE8- will render the content in new HTML5 elements in a similar manner as it would to content in a div, but the unrecognized HTML5 elements cannot contain children, nor will CSS be applied. Big problem! Since this is not good, html5shim automagicially allows older versions of IE to at least render the page and apply the proper styling to the new HTML5 elements. Html5shim will also recognize any custom HTML5 elements you may use such as <customnav>, <myaside>, or most any element name you decide to create. Nifty.

Note: Html5shim does not add new multimedia capabilities such as the <canvas>, <audio> or <video> support to IE8-. Currently there is no simple workaround for this.

Additional Steps (Optional)

Now that we understand the first five steps, let’s move on. There are a few more general updates that could be made to the new HTML5 Master Page including removing the trailing forward slash (/) before closing an element when the element does not need a closing tag. As an example, consider our meta tag:

In XHTML 1.0 Strict the trailing / before the end of the meta element was required, at least to be standards compliant. Sure, almost all browsers did not actually “require” it, but it was supposed to be there. Well in HTML5, that trailing / is not required, thus this element could be modified to:

My opinion though, I suggest leaving the trailing forward slashes in but that is because as a coder, one of my passions lies in beautiful code and the trailing forward slash properly closes an otherwise open element.

HTML5 also allows for the shortening of a few additional elements. <script> and <link> elements no longer require a “type” value and the character encoding as specified in a meta tag has been greatly compacted. A resource on these additional modifications can be found at Heather Solomon’s blog post Convert SharePoint 2010 master page to HTML5.

HTML5 templates

As I mentioned in my previous article there are a few HTML5 ready Master Pages for SharePoint 2010 that have already been created that can provide you a boilderplate Master Page to speed your learning curve and deployment. Three that I recommend you consider include:

Kyle Schaeffer’s Responsive HTML5 Master Page
http://kyleschaeffer.com/sharepoint/v5-responsive-html5-master-page/

Dan Kline’s SharePoint 2010 HTML5 Master Page at Codeplex:
http://sharepoint2010html5.codeplex.com/

Heather Solomon recently updated her “Just The Essentials” Master Pages for SharePoint 2010 to include HTML5 ready Master Pages
http://blog.sharepointexperience.com/2011/09/09/just-the-essentials-sharepoint-master-pages/

My suggestion is that you download all three of these and install them on your development environment (Possibly on one of your CloudShare servers? Do you not yet know about CloudShare? It’s one the nicest developments tools I know of for SharePoint. Create a new SharePoint environment, including a SharePoint 2013 Preview environment in minutes. Then if you accidently break it you can start over in a few minutes more with a fresh rebuild. No, I am not a sales rep, I simply think it’s a great tool.) Review each Master Page and the included css and pick and chose from these different implementations. Each Master Page is slightly different and may or may not fit your own style. Using a pre-built Master Page is one of the quickest ways to get started with HTML5 and SharePoint. Leverage the experience of these experts!

What’s Next?

I know that you are anxious to jump even deeper into HTML5 and CSS3 but there is still more foundation we want to build. There are more issues with IE7 and IE8 that we want to discuss as well as another great tool for HTML5, CSS3 and browser feature detection, that being Modernizr. We will touch on this next time before moving onto cool HTML5 feature and tricks. Until then, happy coding.

00030000b6b950ab@live.com, 2007, 2010, Branding, End User, General Knowledge, MOSS, WSS

How SharePoint Helps in Building Strong Brand Image

June 26, 2013 admin 1 Comment

You may also be interested in: ViewPoint for SharePoint

Editor’s note: Contributor Himanshu Sharma works at Trigent Software Inc.

Importance of Branding

What gives a you a sense of belonging? What comes to your mind when you hear some famous brands? What is corporate identity? What makes us remain loyal to a brand? These are some of the questions that repeatedly surface in any branding discussions. Yes, it all revolves around factors like the trust, the perceived value of products or services, and the image organizations create over a period of time. These are some of the essentials of branding and this article will throw some lights on how SharePoint helps in internal as well as external branding.

Internal Branding - Why is it important?

Branding is an essential ingredient for building a rich working culture within an organization. In order to create a rich brand it is important that factors like trust, faith and promise resonate throughout the organization. Creating a strong brand aligns internal stakeholder to the brand and helps win their loyalty. A brand is not created outside an organization, it is created in the organization by adhering to a rich working culture, instilling faith among employees and creating a strong persona around the brand with world-class products or services. Creating a rich corporate identity that defines an organization goes a long way in branding.

Creating a rich functional brand identity inside the organization renders professional working culture and motivates employees to perform better in order to build a better brand. Especially when employees use a central platform to collaborate with each other in an organization. Organisations using a unified communication platform like SharePoint can brand it by giving rich visual and multimedia appeal that reflects their identity through rich displays of logos, images and corporate identity across the communication platform. Imagine how mundane it would look if there’s nothing vivid across the platform we use to manage our day to day activities. Just like we brand our customer facing websites it is essential to brand our intranet portal built on a unified platform like SharePoint.

Branding Scope in SharePoint Portals

Before branding a SharePoint intranet portal it is important to have clear objectives in mind. SharePoint renders rich features that can help even a non-techie end user to brand a particular page through built-in web-parts and templates. There are 4 major and distinct areas where a branding strategy can be applied cohesively. Publishing Site, Team Site, My Site, and Search Site are the 4 major areas where branding finds its place within SharePoint. Leveraging SharePoint inbuilt features like web-parts one can create highly interactive web pages and customize them according to one’s choice. Using master pages, jquery, CSS and various page layouts available in SharePoint, users can give a rich look and feel to their intranet portals. Since SharePoint works as a central platform for collaboration and is used by everyone in the organization almost every day in one way or the other, it is the best place for internal branding and creating rich corporate identity. Many companies develop their website on SharePoint framework to interact with customers, suppliers and external stakeholders. Hence, for a public facing website built on a SharePoint framework, it’s a wonderful opportunity to create a strong brand identity. However, before giving your SharePoint site a face lift, it would be prudent to have clear branding objectives and ways to measure branding effectiveness.

0003bffda1e28d90@live.com, 2010, Branding, CSS, End User, HTML5, MOSS, Site Manager/Power User, WSS

HTML5 and SharePoint 2010 - Part 3: Adding the Code

June 25, 2013 admin 30 Comments

You may also be interested in: Mobilize SharePoint Webinar by Sitefinity

Editor’s note: Contributor Eric Overfield, a leading expert in SharePoint Branding and User Interface design, is President and co-founder of PixelMill. Follow him @ericoverfield

In my first two articles (one and two) on HTML5 and SharePoint 2010, I provided an overview of HTML5, what it is, and why it is important for us SharePoint Branding folks to start learning it and using it. I’ve already provided a quick introduction on how to add the fundamental HTML5 elements to SharePoint but let us now review this proess in greater detail so that we build a solid foundation of HTML5 and how it will interact with SharePoint.

Open your SharePoint 2010 development site in SharePoint Designer 2010 and create a copy of your v4.master found in the _catalogs/masterpage directory. For this example, I renamed my Master Page copy v4-html5.master.

Open your custom Master Page in SPD in Advanced Editing Mode, select the code view, and near the top, normally just before your <html> tag, look for <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Replace the existing DOCTYPE tag with the following HTML5 doctype. Note: make sure you replace the entire tag, often split in two lines in SPD.
<!DOCTYPE html>

Now look for the meta tag, X-UA-Compatible, found in the head section. It should look like: <meta http-equiv=”X-UA-Compatible” content=”IE=8” />

Update the “content” value to either “IE=9”, “IE=edge” or ever better “IE=edge,chrome=1”.

Add an additional script tag to link to html5shim somewhere in your head section. <!-[if lte IE 8]> <script type="text/javascript" src=”//html5shim.googlecode.com/svn/trunk/html5.js” /> <![endif]->

That is about it. You can now begin to add additional HTML5 elements such as <header>, <footer>, <nav>, etc. to this new HTML5 Master Page that is mostly backwards compatible with IE7 and IE8, as well as use CSS2 and CSS3 to providing styling. You can also begin to use the multimedia elements such as <canvas>, <audio> and <video>. Easy right?

Wait, What? What is Going On? Explain Please!

Before I go on I would like to discuss these first five steps in greater detail to give you an understanding of what each step is doing. Step one is standard procedure, we need to open SPD and create our own copy of a Master Page, in our case a copy of the v4.master, as you never, ever make edits directly to the OOTB v4.master Master Page. In Step two we look for the doctype so that we can modify this in step three. Step three is straight forward enough as well, we are changing the doctype from XHTML 1.0 Strict to HTML5, but what is nice is how lean the doctype is. With html 4.1, XHTML 1, etc we had to have a very long doctype but now it’s just fifteen characters.

Note: When you change the doctype in SPD, SPD will now recognize your Master Page as for IE6 and still with CSS 2.1. I mentioned this in my previous article if you would like to review why and what this means. There is no current work-around and unfortunately this is also the case with SharePoint Designer 2013 Preview at this time. Basically if you are going to use HTML5 in SPD, you will only use the code view, but since that is going away in SPD 2013 you might as well start getting use to it.

Step four

Ah, now it is starting to get interesting. We update the X-UA-Compatible meta element because this tag tells IE9, and soon IE10, to render all pages in your SharePoint site in IE8 mode. Why you might ask? When Microsoft built the web interface to SharePoint they used html and JavaScript code that was only compatible in IE8 so for IE9 to render everything correctly, IE 9 had to be told to revert to IE8 standards. Note: This is only relevant to IE, Firefox, Chrome and Safari will ignore this X-UA-Compatible meta tag for all intensive purposes. If we keep the X-UA-Compatible content value as IE8 then IE9 and IE10 will not be able to use the full power of HTML5 as IE8 cannot properly render HTML5 code. But switching to IE9 compatibility can cause problems as certain aspects of SharePoint will not natively work in IE 9, in fact you might have already noticed that parts of SharePoint will not work in later version of Firefox, Chrome or Safari either. These issues include drag and drop web parts while in Edit mode, the people picker and more. The more is the real gotcha as there is no solid list that I have found of what breaks when changing X-UA-Compatible to IE9 so we cannot know for sure what will break on us.

Now I am recommending IE=edge,chrome=1 as the value for the content tag. The reason why is that IE has been, and supposedly will continue to support the IE=edge value to mean always render the page in the latest mode possible. This means that IE8 will render in IE8 mode, IE9 will render in IE9 mode and when IE 10 is released it should render the page in its latest mode. Adding the chrome=1 value tells the browser to render in Google Chrome Frame if available. You can learn more about GCF from https://developers.google.com/chrome/chrome-frame/ and http://www.chromium.org/developers/how-tos/chrome-frame-getting-started. The value of GCF is beyond the scope of this article so we will come back to this later on. It’s easy to add now, so let’s just do it so.

Why don’t we stop here for now? Next time I will explain step five in greater detail. We will then look at a few optional modifications that you may chose to make as well as review a few pre-build HTML5 Master Pages for SharePoint 2010. Until then,

00037ffea2837964@live.com, 2007, 2010, End User, General Knowledge, MOSS, Project Management, WSS

SharePoint: The Business is the Bottleneck

June 24, 2013 admin 30 Comments

You may also be interested in: Documentation Toolkit for SharePoint

Editor’s note: Contributor Ellen van Aken is an experienced intranet adoption manager. Follow her @EllenvanAken

“Ellen, could you have this site up and running in about 2 weeks?” my clients often ask. “Yes, I could, but can you?” I always answer, “my experience is that the business, and that is YOU, is usually the bottleneck.”

The client always looks a bit annoyed when I say that. And that was a good starting point for a conversation about roles and responsibilities.

Why was it sometimes not ready in 2 weeks?

Of course it is understandable that someone wants to use his or her new site quickly. They have a problem or a good idea, and they want to take advantage or solve the problem as quickly as possible. And when you are the business owner of a problem or an idea, and you brief someone else to do the configuration of a site that will address the idea or problem, you will want to know when it will be ready. We have all done Project Management, haven’t we?

But the business owner has his or her regular work, and that always has priority. Products must be developed, manufactured, promoted and sold, customers or suppliers must be visited, and reports created.

In addition, the business owner does not always know what is expected of them when they ask for support. ”I give a briefing, you understand exactly what they need and want, so it should be ready for use in 2 weeks” is the prevailing thought.

Unfortunately, that is not always the case.

I may have misunderstood something
Functional requirements may need to be translated in a different way than expected, which may have unexpected consequences which have to be dealt with
It may turn out that in real life the process is a little different than briefed.

In short, you will need regular alignment with the business owner. And he or she needs to test whether the site meets their requirements and fits their actual process.

How have we managed expected timing issues?

1. We told our business owners in advance what their responsibilities were, such as:

Providing us with the information that we needed to determine the business case and priority of the project
Testing
Introducing the site to their target audience.

2. We created as many alternative solutions as possible up front, so they could test and compare multiple solutions simultaneously

3. We told them what and how they were expected to test

4. We agreed when they had to schedule time for testing

5. We told them that, after a missed deadline on their part, we could give no guarantees on the timing of final delivery

Especially the last 2 points usually moved the deadline to a later date.

How much time did a site configuration actually take?

Of course this varied with priority, complexity and the responsiveness of the business owner. We have delivered a site in 2 days (it was a very important, very urgent project and not too complicated) and CRM-in-a-TeamSite took about 6 months, almost fulltime. That was a very complex configuration, a very important process with a huge business case, and with a business owner and target audience in Australia.

And of course there were projects which took a year or more but those were generally the ones with an “Unwilling” business owner. These sites were often deleted after a year or so, never having been used.

In general, the time we spent “clicking” was a couple of hours, but the total turnaround time about 8 weeks.

What are your experiences?

How have you worked with the business to manage expectations about timing? Your tips are welcome!

2007, 2010, Branding, End User, General Knowledge, Marcy Kellar, MOSS, WSS

Top 5 UX (User Experience) Articles of the week - Week 2

June 21, 2013 admin 2 Comments

Editor’s note: Contributor Marcy Kellar is a SharePoint Strategist and User Experience Designer. Follow her @marcykellar

Last summer, Marcy Kellar began a weekly series of her top picks of UX articles for that week. Marcy is going to pick up the series again so we’ve gone back to publish her original articles.

Here are the top 5 UX articles on branding:

1 - Why Your Links Should Never Say "Click Here" - UX Movement

By anthony on 06/20/12 Have you ever wanted your users to click your links, but didn’t know how to get them to act? When some designers run into this problem they’re tempted to use the words "click here" on their links.

Marcy Kellar: This article is spot-on minus one recommendation to link to Nouns and not verbs. Linking to verbs is appropriate if it communicates what the user should expect to see when clicking on the link.

2 - Creating a Web-Site Information Architecture in Six Steps : UXmatters

By Nathaniel Davis "Business clients don’t pay practitioners to practice information architecture; they pay professionals to produce IA work products that help them to meet their business objectives." In my previous columns, I’ve framed my discussions around the practice of information architecture.

Marcy Kellar: This article is popular because Information Architecture is confusing and there are so many approaches. The case studies in this article provide real world examples of the approach in action and follow best practices: Business, User, Content = IA.

3 - Avoid the biggest content migration mistake | J. Boye

Want to know the single most important thing to do to optimize your content migration? Think through the steps of handling and evaluating content during the website migration. Unfortunately most focus exclusively on one single step: How to get content from the old system to the new one.

Marcy Kellar: Content is a critical piece of the User Experience equation. This platform-agnostic article on content migration provides high level guidance on how to migrate content. (Hint: Migration success starts well before you actually move the content)

4 - Usability lessons from neuroscience Jeremy Tunnell - User Experience | Project Management | SEO

I have just finished a wonderful book, Reading in the Brain: The New Science of How We Read , which ostensibly is about the origins and the neural underpinnings of the human ability to read.

Marcy Kellar: I’m a sucker for neuroscience because of my medical background. This article provides several good examples of what users are scientifically hardwired to respond to and why.

5 - A List Apart: Articles: Design Patterns: Faceted Navigation

We are pleased to present an excerpt from Chapter 4 of Search Patterns by Peter Morville and Jeffery Callender (O’Reilly, 2010). -Ed. Faceted Navigation Also called guided navigation and faceted search, the faceted navigation model leverages metadata fields and values to provide users with visible options for clarifying and refining queries.

Marcy Kellar: Faceted Navigation is something SharePoint 2013 can do and do well. The more you know about the concept, the better you can execute it correctly in the future.

00030000b6b950ab@live.com, End User, General Knowledge, Mobile, MOSS, SPF 2013, WSS

Mobility: From the 1940’s World War to SharePoint 2013

June 20, 2013 admin 1 Comment

You may also be interested in: fpweb.net

Editor’s note: Contributor Himanshu Sharma works at Trigent Software Inc.

World War II – Mobility & Motorola

The most notable impact of mobility in collaboration concept dates back to the 1940s during World War II when Motorola designed a two way walkie-talkie for the U.S army. Amid destruction and chaos, Motorola’s Handie-Talkie SCR536 portable two-way radio became an icon of the war.

Then, in 2007, the great Apple’s iPhone sprawl began with its easy to navigate, intuitive features powered by touch screen capability to mark a new wave of mobile apps that spearheaded the revolution of enterprise mobility. Today, mobility has evolved to an extent that an enterprise can’t afford to ignore it.

Mobility & SharePoint 2013

Mobility has become an inseparable component of collaboration across an organization. In fact, it has become a strategic component of many organizations as they are constantly exploring innovative mobile solutions that can drive their business revenue up by boosting workforce productivity. The importance of mobility is rooted in the fact that organizations want their workers to stay connected and operate from anywhere using any devices, thereby becoming more efficient and productive in managing their tasks. If mobility is the new mantra for business collaboration, how can a widely used unified platform like SharePoint afford to miss mobility in their concept of collaboration? Let’s see how the latest release of SharePoint 2013 helps mobile users.

SharePoint 2013 Features for Mobile Devices

1. Instant Business Intelligence insights on Mobile Devices
Business Managers can now view business intelligence reports right on their mobile devices without using desktops or laptops. This new feature also enables decision makers or business managers to view actionable insights on their mobile devices. A mobile user can also configure external access for his mobile to use features out of the network.

2. Enhanced Security
Security is one of the key challenges when it comes to mobility. In order to clear this roadblock, SharePoint 2013 enables mobile security through Exchange Active Sync that enhances security elements associated with mobile usage. For instance, using a remote wipe command, one can easily erase all sensitive data from a mobile device if it gets stolen or lost.

3. Microsoft Office Web Apps View (Excel, PowerPoint, Word)
The latest SharePoint version enables mobile users to perform all functions related to Microsoft office suite like managing, processing or viewing documents in MS Word, viewing a live PowerPoint presentation or performing analysis on Excel. This extended support for all office applications helps users on the go save more time and become efficient at work from any part of the world.

4. Get Latest updates on the go
The most important aspect of mobility is to enable business people on the go stay connected and well informed. SharePoint 2013 renders push notification features that enable mobile users to receive various types of notifications. To use this feature, a mobile user has to register with a SharePoint site and get regular notifications as per their needs. Depending upon users’ needs, the mobile devices can be configured with SharePoint to get various notifications that interest them.

2010, Alexandru Dionisie, End User, MOSS, Office 365, Site Manager/Power User, Third Party Tools, WSS

How to Add a Custom Logo in the Title Section of a SharePoint Site

June 19, 2013 admin 30 Comments

You may also be interested in: O’Reilly - SharePoint 2010 at Work

Editor’s note: Contributor Alexandru Dionisie is an Internet Professional and Technical Writer. Follow him @AlexDionisie

In the site settings menu you will find options to add a custom logo, title or description.

If you want to add a logo somewhere else, you won’t find any option that allows you to do that.

Fortunately, all you have to do is edit the master page and add a custom code that will include a new table column with a logo, description and a link.

How to do that

upload a logo in the Site Assets library and copy the link;
go to Site Actions – Site Settings – Master Pages and download a copy of v4.master;
use a browser that has Developer Tools or Firebug (for this example I used Chrome with Developer Tools)

I will add a logo on the right side of the social tags.

right click on that area - Inspect Element.

In the Developer Tools panel we see that the class of the social tags area is <td>

Open the v4.master with a text editor (I propose Notepad++) and locate s4-socialdata-notif.

Add the following code:

<td><a title=”ITSpark – Your IT Adventure !” href=”http://itspark.ro” target=”_blank”><img style=”border:none” src=”https://officetube.sharepoint.com/SiteAssets/ITSpark_Logo_Header.gif” alt=”" width=”150″ height=”46″ /></a>
</td>

Save the file and then uploaded tothe Master Pages site.

Now, return to the home page and you will see the logo.

If you want to add a logo above the ribbon, locate the ID s4-workspace

The code will like this:

<div id=”s4-workspace”>
<div id=”s4-bodyContainer”>
<div id=”s4-titlerow”>
<div>
<div>
<img src=”https://officetube.sharepoint.com/SiteAssets/ITSpark_Logo_Header.gif” width=”1280″ height=”116″ />
<table cellspacing=”0″>

The bold line represents the extra line that will add an image in the background.

0003bffda1e28d90@live.com, 2010, Branding, CSS, End User, HTML5, MOSS, Site Manager/Power User, WSS

HTML5 and SharePoint 2010 - Part 2: An Overview (Continued)

June 18, 2013 admin

You may also be interested in: ViewPoint for SharePoint

Editor’s note: Contributor Eric Overfield, a leading expert in SharePoint Branding and User Interface design, is President and co-founder of PixelMill. Follow him @ericoverfield

Get Started Now

So you want to get started and would like to start using HTML5 tags now? What to do? Don’t fret, it’s easy.

Open you custom Master Page in SPD and near the top, normally just before your <html> tag, look for <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Replace this with: <!DOCTYPE html>

This is all you “have” to do, but you should do a little more. This would include modifying the meta X-UA-Compatible tag so that IE 9 can properly render HTML5, but instead of listing these suggestions here I would rather refer you to an excellent, recent blog post by Heather Solomon, Converting SharePoint master page to HTML5 (http://blog.sharepointexperience.com/2012/07/22/convert-sharepoint-2010-master-page-html5/).

If you want to just jump into HTML5 now, besides Heather’s post another great resource is Kyle Schaeffer’s HTML5 Master Page which you can learn about from his blog at http://kyleschaeffer.com/sharepoint/v5-responsive-html5-master-page/ or check out Dan Kline’s SharePoint 2010 HTML5 Master Page at codeplex: http://sharepoint2010html5.codeplex.com/.

Why move to HTML 5

Sure, HTML5 is the future, but it’s just an extension right, and your company is stuck with IE7. Why worry about it? Well first, the average Intranet, Extranet or Internet site seems to last about four to five years in my experience. I can pretty much guarantee that your company will not be using IE7 or IE8 for that long. May not seem like it, but they will have to upgrade. Microsoft will make sure of that. If you have an existing SharePoint site, it likely will not be worth moving to HTML5 just yet, but if you are going to build something new, or are upgrading the branding of your existing SharePoint site, you might as well build towards the future, not the past. HTML5 and CSS3 can provide cross device and browser compatibility that would be difficult to do otherwise. HTML5 allows you to eliminate the need for most if not all plugins including flash. Flash is a whole another issue which I will leave for later. HTML5 can help you target modern devices including mobile devices, tablets, smart phones etc that will likely start accessing your SharePoint implementation. Also there are some really cool APIs baked into HTML5. For a quick overview of HTML5 API’s, please refer to an excellent .net Magazine article http://www.netmagazine.com/features/developer-s-guide-html5-apis.

Buyer Beware, Reasons not to move HTML5

Any time anyone has told me they want to move their site to HTML5 I first ask them what is the primary browser that will be loading their site. In many corporate Intranets, the answer is more often than not IE7 or IE8. As I have stated this isn’t a deal killer, nor should it stop you, but you must be aware that IE7 and IE8 do not recognize HTML5 or CSS3 so considerations must be made. In general, only modern browsers support HTML5, and then only portions of it. This is because the HTML5 standards have not been fully written, and the running joke is they won’t be until 2022 (although that year has been truly proposed as a reasonable guess). This doesn’t mean that HTML5 is half-baked in modern browsers; there is still a lot that you can use that isn’t going anywhere.

Next, and this can be a huge stumbling block for many, SharePoint Designer cannot yet understand HTML5 or CSS3. In fact SPD thinks that you are coding to IE6 standards when you set the HTML5 doctype.

OOTB v4.master is recognized by SPD as XHTML 1.0 S (S for Strict) using CSS 2.1

Customized Master Page set to use HTML5 is recognized by SPD as for IE6 using CSS 2.1

As we all know SPD likes to remove code that it does not understand, so at this point my suggestion is that if you want to work with HTML5 in SharePoint 2010 then you will only want to use the code view in SPD. Many people still use the Design View and that will cause many unexpected problems, but possibly it’s time to stop using Design View anyhow. Why? Well it looks like Design View is not coming back into SPD 2013. There is a thread on this at Technet started by Marc Anderson if you would like to learn more about this and the community’s reaction. http://social.technet.microsoft.com/Forums/en-US/sharepointitpropreview/thread/8f8e2cb3-a90f-4653-9d22-050f9f0d8612

Now if you are building a new Intranet that will likely last for three-plus years, but your current user-base is 100% IE7, I can see why an argument in favor of staying away from HTML5 is prudent, but I would counter-argue that with Windows 8 launching soon, and the fact that IE7 is quite old now, companies will be hard pressed to upgrade to IE9 or IE10. Again, build towards the future, not the past.

Next Steps

Well I hope this has provided you a good overview of HTML5 with flavors of what is to come. I just glanced over many tantalizing features and promises of HTML5 with almost no how-to’s. The next sieries of articles will contain many more concrete examples of how to use HTML5 and CSS3 within SharePoint, along with fun things to do with HTML5. We will review HTML5 Master Pages for SharePoint, how to deal with IE7/IE8, Media queries in CSS3 to help target mobile devices as well as HTML5 coding theory and tips and tricks. Until then, happy coding.

00037ffea2837964@live.com, 2010, End User, InfoPath, MOSS, Site Manager/Power User, Tips and Tricks, WSS

SharePoint and the Perils of InfoPath

June 17, 2013 admin 1 Comment

You may also be interested in: Mobilize SharePoint Webinar by Sitefinity

Editor’s note: Contributor Ellen van Aken is an experienced intranet adoption manager. Follow her @EllenvanAken

Our Business Solutions team has not used InfoPath very often. It is really a very cool tool, and I love its transparency, but people often experienced an access denied or other annoying error message that prevented them from working with it. It may have had to do with our customization.

Next to that, some forms can be very complex, especially when you need different views for different people, of if they take data from other lists or even from other systems.

We have had to refuse support when a customer support form broke down. It had tons of clever functionality built in: conditional notifications, different views and it imported the customer’s name from SAP when the SAP number was entered. The person who had created the form had left the company without any documentation on the setup, so it would have taken a specialist (which we did not have at that time) many hours to figure out how the form worked.

Identical icons.

But there is another danger in InfoPath forms, or rather in the libraries they live in, and especially in SP2003 and SP2007. Those libraries have identical icons…and I guess you can tell how this story will unfold. It’s tagged with “Bloopers”…but also with “Learnings”.

My colleague-who-wanted-to-investigate-the-boundaries-of-Sharepoint (I mentioned him earlier) had a challenging project: creating a quiz in InfoPath format. We could not think of another way to do this 60-question quiz, which had an extensive score calculation built-in that resulted in your preferred Learning Style. The whole Quiz was a manual exercise, and our Learning & Development team could no longer calculate the score by hand because of resource restrictions They did not want to leave the scoring to the user, so we wanted to see if we could automate it.

All completed forms would be collected in the library, but everyone could only see their own form.

My colleague spent about 10 full days on this form, and after enthusiastic and extensive testing by both parties we could finally mark the project as completed.

A few weeks after sign-off we received an anguished call from the owner. Her intern, who was on a cleaning spree, had deleted the library because it contained no documents. Could we restore it?

Unfortunately we could not, since my colleague had not kept a copy. So he could do it all over again…

What have we learned?

These are the preventive measures we took from that day onwards:

We added the text “System List-Do not delete!” or similar text to the description field of every custom-configured or otherwise important list or library we created from that time on.
We saved a template of every library or list with complex configuration in the List Template Gallery of the site, and also in our own Team Site
At the moment of handover, we created a backup of every site that we configured (and sometimes also saved the template in our Team Site).

In SharePoint 2010 Microsoft has finally addressed this library icon issue. But if you are working with an older version, be careful!

1 - Guide to Website Navigation Design Patterns

2 - The Elements Of Navigation | Smashing UX Design

3 - Pleasure and Pain » Knowing Why Beats Knowing How

4 - Overcoming Halfhearted User Adoption | UX Magazine

5 - Design Tip: Never Use Black by Ian Storm Taylor

Step 5

Additional Steps (Optional)

HTML5 templates

What’s Next?

Importance of Branding

Internal Branding - Why is it important?

Branding Scope in SharePoint Portals

Wait, What? What is Going On? Explain Please!

Step four

Why was it sometimes not ready in 2 weeks?

How have we managed expected timing issues?

How much time did a site configuration actually take?

What are your experiences?

1 - Why Your Links Should Never Say "Click Here" - UX Movement

2 - Creating a Web-Site Information Architecture in Six Steps : UXmatters

3 - Avoid the biggest content migration mistake | J. Boye

4 - Usability lessons from neuroscience Jeremy Tunnell - User Experience | Project Management | SEO

5 - A List Apart: Articles: Design Patterns: Faceted Navigation

World War II – Mobility & Motorola

Mobility & SharePoint 2013

SharePoint 2013 Features for Mobile Devices

How to do that

Get Started Now

Why move to HTML 5

Buyer Beware, Reasons not to move HTML5

Next Steps

Identical icons.

What have we learned?

For everything SharePoint and Office 365 from the community for the community!