B Design Considerations
Designer considerations and guide lines (2/6 on Webskin Template Authoring)
At Daemon we first prototype the design in Photoshop and then create a working set of valid XHTML mark-up. We try and get the site design in HTML just the way we want before converting it into a farcry skin. You certainly don't have to follow this approach; we just find it useful for weeding out design issues before we start programming.
The first thing that you or your designer should consider and be aware of is that the mark-up will be completely cutup into subsections or "bods" so it will sit nicely into farcry. Everything should be put into <div> tags to separate the different sections of the website and comply with W3C standards.
All the subsections should be able to stand-alone and not rely on any other sections to be able to render correctly on the page. For example, depending on the layout of the page you might have a header section, a content section, a sidebar section or two or three and a footer section. Within each of these sections there might be other subsections such as a search form or a secondary navigation section. All of these subsections should be able to stand alone as well so that they can be imported to another section when required. For example consider the following, which would sit in the content section.
<div id="main"> <div class="casestudy"> <h3><span>Featured Case Study //</span></h3> <h4 class="subheading"><span><a href="devtodo">BLUESCOPE STEEL</a></span></h4> <img src="images/demo/case_study_thumbnail_2.gif" alt="" class="thumbnail" /> <p>Daemon has extensive experience in all aspects of technical web application development utilising the Macromedia range of server products. <a href="devtodo">Read more</a> </p> <p><strong>Case studies by client/project type: <br /> <a href="devtodo">Medical</a> | <a href="devtodo">Education</a> | <a href="devtodo">Financial</a> | <a href="devtodo">View All</a></strong></p> </div> <div id="leftsidebar"> <div class="featurebox search"> <form action="devtodo"> <label for="searchbox"><b>Search</b></label> <input id="searchbox" name="searchbox" type="text" /> <input type="submit" value="Go" /> </form> </div> </div> <div id="rightsidebar"> <h2><span><a href="devtodo">Recent Daemon News</a></span></h2> <h4 class="date">January 26TH 2005</h4> <p> Daemon's application development services are underpinned by best-practice coding standards and formal production methodologies to ensure the effective delivery of complex, <a href="devtodo">read more</a> </p> <h4 class="date">December 16TH 2004</h4> <p> Daemon's application development services are underpinned by best-practice coding standards and formal production methodologies to ensure the effective delivery of complex, <a href="devtodo">read more</a> </p> </div> <div id="footer">Copyright © 2005 Daemon Pty Ltd</div> </div>
Figure 1.1
You can see from figure 1.1 that we have 3 subsections within the main section - case studies leftsidebar and rightsidebar. Within the leftsidebar subsection we have another subsection for a form. We want to be able to put the form anywhere we want without having to make any changes to the outside styles. So we should be able to swap them around so the form appears in the right sidebar like so (figure 1.2) without any problems.
<div id="main"> <div class="casestudy"> <h3><span>Featured Case Study //</span></h3> <h4 class="subheading"><span><a href="devtodo">BLUESCOPE STEEL</a></span></h4> <img src="images/demo/case_study_thumbnail_2.gif" alt="" class="thumbnail" /> <p>Daemon has extensive experience in all aspects of technical web application development utilising the Macromedia range of server products. <a href="devtodo">Read more</a> </p> <p><strong>Case studies by client/project type: <br /> <a href="devtodo">Medical</a> | <a href="devtodo">Education</a> | <a href="devtodo">Financial</a> | <a href="devtodo">View All</a></strong></p> </div> <div id="leftsidebar"> </div> <div id="rightsidebar"> <h2><span><a href="devtodo">Recent Daemon News</a></span></h2> <h4 class="date">January 26TH 2005</h4> <p> Daemon's application development services are underpinned by best-practice coding standards and formal production methodologies to ensure the effective delivery of complex, <a href="devtodo">read more</a> </p> <h4 class="date">December 16TH 2004</h4> <p> Daemon's application development services are underpinned by best-practice coding standards and formal production methodologies to ensure the effective delivery of complex, <a href="devtodo">read more</a> </p> <div class="featurebox search"> <form action="devtodo"> <label for="searchbox"><b>Search</b></label> <input id="searchbox" name="searchbox" type="text" /> <input type="submit" value="Go" /> </form> </div> </div> <div id="footer">Copyright © 2005 Daemon Pty Ltd</div> </div>
Figure 1.2
Another consideration is lists. For example if on your page you want a list of news teasers which link to the main article you could have a list like figure 1.3.
<div id="main"> <dl> <dt> <a href="devtodo">News title</a> </dt> <dd class="desc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus dapibus, mauris eu ullamcorper ullamcorper, lectus nulla elementum felis, nec eleifend massa quam dictum ligula </dd> <dt> <a href="devtodo">News title</a> </dt> <dd class="desc"> Curabitur pellentesque, lorem quis porttitor bibendum, nunc velit sollicitudin tortor, ut vestibulum urna lacus vitae orci. Sed velit ligula, facilisis at, fermentum eu, tristique sed, ipsum. Ut quis tellus. Mauris sed neque quis arcu porttitor pharetra. </dd> </dl> <div id="footer">Copyright © 2005 Daemon Pty Ltd</div> </div>
Lets take a closer look. Each teaser article is within the <dl> list tag so we would have to assume that each news teaser is expected to be within the <dl> tag. What if the content contributor selected a different container skin or display method? Note: container skins are a new part of farcry 3.0 and will be discussed later in the manual. Now we would have a list of news teasers standing on the page that are not within <dl> tags. Depending on the browser this could wreak havoc on the web page and wouldn't comply with W3C standards. The section of the page would render like this.
<div id="main"> <dt> <a href="devtodo">News title</a> </dt> <dd class="desc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus dapibus, mauris eu ullamcorper ullamcorper, lectus nulla elementum felis, nec eleifend massa quam dictum ligula </dd> <dt> <a href="devtodo">News title</a> </dt> <dd class="desc"> Curabitur pellentesque, lorem quis porttitor bibendum, nunc velit sollicitudin tortor, ut vestibulum urna lacus vitae orci. Sed velit ligula, facilisis at, fermentum eu, tristique sed, ipsum. Ut quis tellus. Mauris sed neque quis arcu porttitor pharetra. </dd> <div id="footer">Copyright © 2005 Daemon Pty Ltd</div> </div>
Figure 1.4
You can see that we now have no surrounding <dl> tags, which is incorrect html mark-up. The main aim is be able to display the same teasers correctly even if a different display method or container skin is selected. The above example can be implemented but with strict rules and no flexibility. The following example would be a much nicer approach.
<div id="main"> <div class="superlist3"> <h2><span><a href="devtodo">Government</a></span></h2> <p> This combination of skills means that whether you are updating an existing web-based business application to take advantage of the latest products and technologies, or are planning a completely new expertise and real-world experience you are looking for. <br /> <strong>More information:</strong> <a href="devtodo">ICAC</a> | <a href="devtodo">KMC</a> | <a href="devtodo">NIH</a> </p> <h2><span><a href="devtodo">Pharmaceutical</a></span></h2> <p> This combination of skills means that whether you are updating an existing web-based business application to take advantage of the latest products and technologies, or are planning a completely new project <br /> <strong>More information:</strong> <a href="devtodo">Roche</a> </p> <h2><span><a href="devtodo">Education</a></span></h2> <p> Daemon can provide the professional guidance, technical expertise and real-world experience you are looking for. Daemon can provide experience you are looking for. <br /> <strong>More information:</strong> <a href="devtodo">Curtin</a> | <a href="devtodo">Melbourne Uni</a> | <a href="devtodo">AFTRS</a> | <a href="devtodo">Mayo</a> | <a href="devtodo">MGSM</a> | </p> </div> <div id="footer">Copyright © 2005 Daemon Pty Ltd</div> </div>
Now if a different display method or no container skin were selected then the page would render like this
<div id="main"> <h2><span><a href="devtodo">Government</a></span></h2> <p> This combination of skills means that whether you are updating an existing web-based business application to take advantage of the latest products and technologies, or are planning a completely new expertise and real-world experience you are looking for. <br /> <strong>More information:</strong> <a href="devtodo">ICAC</a> | <a href="devtodo">KMC</a> | <a href="devtodo">NIH</a> </p> <h2><span><a href="devtodo">Pharmaceutical</a></span></h2> <p> This combination of skills means that whether you are updating an existing web-based business application to take advantage of the latest products and technologies, or are planning a completely new project <br /> <strong>More information:</strong> <a href="devtodo">Roche</a> </p> <h2><span><a href="devtodo">Education</a></span></h2> <p> Daemon can provide the professional guidance, technical expertise and real-world experience you are looking for. Daemon can provide experience you are looking for. <br /> <strong>More information:</strong> <a href="devtodo">Curtin</a> | <a href="devtodo">Melbourne Uni</a> | <a href="devtodo">AFTRS</a> | <a href="devtodo">Mayo</a> | <a href="devtodo">MGSM</a> | </p> <div id="footer">Copyright © 2005 Daemon Pty Ltd</div> </div>
Figure 1.6
This is valid HTML mark-up and would render on the page correctly.
Navigation
Farcry has a variety of useful webskin custom tags to help with template development. One such tag is genericNav.cfm which generates lovely-jubbly un-ordered list mark-up for navigation elements. This is just peachy for css based designs.
When designing the navigation there are a few things that must be considered when styling your menus. Lets have look at an example, which will cause a bit of extra work.
<div id="nav"> <ul> <li id="nav-1"><a href="homepage.html"><strong>Home</strong></a></li> <li id="nav-2"><a href="solutions.html"><strong>Solutions</strong></a></li> <li id="nav-3"><a href="services.html"><strong>Services</strong></a></li> <li id="nav-4"><a href="casestudies.html" class="active"><strong>Case studies</strong></a></li> <li id="nav-5" class="last"><a href="aboutus.html"><strong>About us</strong></a></li> </ul> </div>
Figure 1.7
We can see that we have an unordered list that has <li> tags within. The problem with this example is that the id of each individual <li> tag has a different value. This can be achieved but it will take some extra work to dive into the depths of the _genericNav.cfm code to achieve this. Sometimes this is unavoidable but why create extra work if you can avoid it. The following would be much easier for the developer to implement.
<div id="nav"> <ul class="whatever"> <li class="active"><a href="homepage.html"><strong>Home</strong></a></li> <li><a href="solutions.html"><strong>Solutions</strong></a></li> <li><a href="services.html"><strong>Services</strong></a></li> <li><a href="casestudies.html" class="active"><strong>Case studies</strong></a></li> <li><a href="aboutus.html"><strong>About us</strong></a></li> </ul> </div>
Figure 1.8
_genericNav.cfm has the intelligence to generate class='active' for the active navigation.
For this project the designer guy has left me with a simple standalone directory with working XHTML and associated css and media assets.
figure 1.8
Note: there are extra folders in this example (Library and sifr) that you needn't worry about but are here for example purposes.
So far so good. Lets get skinning! Read on, on the C Getting Started page (3/6 on Webskin Template Authoring)