Last week I supported a fronteer. He was new to SharePoint and I explained him how
to set up a masterpage from a default masterpage and how to make a pagelayout out
of you HTML markup. I realized that I explained the way I should do it. But what is
the best practice here? How do other SharePoint fronteers do this? What works, what
doesn’t?
So there are some interesting blog postings to come and I’m really curious for your
respond! So please do!
1. –From graphical design to HTML–
2. –Start implementing the masterpage–
3. –Implement a pagelayout–
4. –Fixing the style issues–
5. –Considering multiple approaches, what works, what doesn’t?
–From graphical design to HTML–
Start with the Graphical design. First make sure you really understand the meanings
of the graphical design made by the designer. What happens when you scale your browser,
to wide tables are used in the content and what happens if you mouse over, click or
already visited a link? And what happens to the top navigation when too much items
are added?
When this is clear, send the PSD you’ve got from the designer to the printer. On this
piece of paper ( I know, it’s so old-fashioned ) we draw some squares to define what
is to be the masterpage and what is to be in the pagelayout. How do you know this?
Well the masterpage consists of elements (could be anything) that come back onto every
page. Well, maybe not every page, in some section you might want a slightly different
masterpage. For example on the homepage, where you don’t want a specific menu. Or
in a news article page, where you don’t want that fancy image in the header. So the
masterpage contains the elements coming back on every page, like: The logo, portal
name, login-link, search engine, top navigation, header image, quick launch menu,
footer, etc.
Masterpages cannot contain a webpartzone. But how to go if you want your client to
be able to add a header image? In the masterpage, you can define a Placeholder control.
Place it wherever you would place your header image.
In the pagelayouts, set a control with the same id-name and place your webpartzone
inside. You have to do this for every pagelayout that needs a header image in the
masterpage. For each page though, there has to be added a image webpart, or whatever
webpart you like. So be aware of this, if you use a webpartzone in your masterpage.
If your client wants a header image on 90% of the pages, this is not the way the
way to implement it! I used it for a client who has a default image in the header
and wanted to place some other images on some of the pages. So when there’s no webpart
in the webpartzone, the default image is showed on the background of the webpartzone.
Set by the CSS-style.
How do we know what’s in the pagelayout? Well, the pagelayout has a lot of placeholders,
webpartzones and controls. Normally there’s no content in it, just some controls that
dynamically render content, such as the page title, date, breadcrumb and so on. The
pagelayouts defines the layout, the zones wherein the page content will be showed.
If you have a right zone in your graphical design with some functionality, you can
consider placing one webpartzone there. The user can easily add some webparts there
and fill them. But what if one of these webparts in the graphical design has a different
layout, like another background color? Every webpart had a unique ID, but you cannot
know what webpart is placed in which webpartzone. So for that, add another webpartzone
with an ID-name, so you can define any webpart that is placed inside that particular
webpartzone. Think about what element of a page are variable, and can be placed somewhere
else, and what element aren’t, link the title of a news article. This way you can
divide your pagelayouts.
After that you can start translating the graphical design into HTML and CSS. Start
with the positioning of the layout. Build up your HTML-page width div’s (instead of
those ugly tables) and position them by setting there property’s in the CSS-file.
May considering to use an other CSS-file for the pagelayouts (and masterpage) and
another for the markup of the content. Use logical div class names and ID names and
make sure an ID name is unique (otherwise, make it a class name). Cut your images
out of the .PSD and place them in the image folder (which you can access by a relative
url from your CSS : ../images/ ). Reserve some space for elements like a menu.
This is a dynamic and default SharePoint element (ASPmenu), so it’s properly reused
(which means another dirty table). Well if not, write down a short menu with list-items.
Make sure there are links in it of every used navigation level. Then turn to your
developers and show them this is the way you want the menu to be rendered. Don’t forget
to add a class name for the selected state of the selected (active) menu item. Or
even more, if you want the parent of the selected menu item to look different. This
is something we can’t do by CSS.
So you have your graphical design, you know how many masterpages must be made and
what to put in it. You know all about the pagelayouts, and you have your HTML-files
and CSS as a starting point. I think you’re ready to start implementing. Let’s start
at the beginning, the masterpage.
Read all about implementing the masterpage next blog post!
