Roots and Branches Mobile Friendly Site Template

There are two new mobile friendly templates available for you to use in your genealogy websites – or any site for that matter.  The Roots and Branches site template is available in two color combinations – shade of blue and brown. Both are fixed width, equal height columns AND mobile friendly.  Each package includes the DWT and all supporting files and folders for a small site. You can add pages, change the names of the pages or delete any pages you do not need.  Both templates are based on one of the newest templates offered on our sister site Expression Web Tutorials & Templates. Both templates will work with Expression Web. Don’t have Expression Web? You can download Expression Web (free version)  that is fully functional and has no time out date.

roots-and-branches-mobile

The Roots and Branches template (shown above) is available for download as a personal web package that can be imported directly into Expression Web.

roots-and-branches-screenshot

The Roots and Branches template (shown above) is available as a zipped file which includes not only the DWT but a blank template as well as a blank  template that uses server side includes for the top menu, the left sidebar and the footer. The DWT works with Expression Web and FrontPage 2003. The blank template and the template using ssi’s can be used with any web editor.

Team Clueless – a rally or other event template

The latest offering from Cheryl Wise at by-expression.com is the Team Clueless Template that can be used for a rally or any type of event. This template has a separate display for small screen devices. This template also makes use of drop shadows and Google Web Fonts. You can view and download the template from Team Clueless Rally.

Cheryl has additional templates that can be downloaded from http://by-expression.com/page/Templates

team-clueless

Content First Equal Height Site Templates available in Expression Web Gallery

As of March 7, 2013 the Expression Gallery has closed. You can still download these and all of the site templates from our main site Expression Web Site Template Project

Content First Equal Height Columns Site Templates

Content First Equal Height Columns Site Templates

The Content First Site Templates offered by Tina Clarke and Pat Geary may now be downloaded from the Expression Web Gallery. All four sets of the default site templates are now available from the Gallery and can be added to your Expression Web software so they are available to you anytime you go to create a new site.

This newest series of templates available in the Gallery present your content first in the HTML markup and use the external style sheet to move your masthead and navigation to the top of the page, The content first series are geared for the more advanced user as are the mobile friendly templates also offer in the Gallery.

As with all of our templates, the HTML and the CSS are heavily commented to make them easier to work with. You can read the original post Content First Expression Web Site Templates and download the templates either from Migrating from FrontPage to Expression Web or from the Expression Web Gallery.

There are seven templates in all that you can download. Get any or all of them and add them to your Expression Web software.

One DWT – Two Separate “Looks”

On a recent makeover of the Migrating from FrontPage to Expression Web site, we wanted to use the same DWT but give the site two distinctive looks. WHY? Because Migrating from FrontPage to Expression Web consists of two separate parts:

  • The main site which supports the Migrating from FrontPage to Expression Web E-Book AND
  • Expression Web Site Templates which offers a series of generic templates for various layouts that can be added to your Expression Web software to give you a wider selection of default templates to build your sites

After designing the template and experimenting with various color combinations, we decided on stick with the current green for the main part of the site and a brown/orange combination for the site templates section. The same menus which are includes would serve both sections with a separate color combination. Because the sidebar is also an editable region, they could be arranged a bit differently for each of the sections.

The easiest way to achieve this was to develop the one DWT and use a separate style sheet for the two sections.

Besides the normal editable regions for the template, we added editable regions for the  meta tag to attach the style sheet as well as the banner area where the site name (graphic image) was inserted.

Code used:

<!– #BeginEditable “stylesheet” –>
<link href=”../styles/tem-project-site.css” rel=”stylesheet” type=”text/css” />
<!– #EndEditable –>

<!– #BeginEditable “bannerimg” –>
<div class=”banner”>
<img alt=”” class=”dynasize” src=”../images/orange-logo.gif” /></div>
<!– #EndEditable –>

End Result:

Screenshot Migrating from FrontPage to Expression Web.

Screenshot Migrating from FrontPage to Expression Web

Screenshot Expression Web Site Templates.

Screenshot Expression Web Site Templates

So if you are looking for an easy way to give a site the same but different looks, you might try this approach – one dynamic web template and two different style sheets.

Mobile-Friendly Responsive Template

Ian Haynes has just added this Mobile-Friendly Responsive Template to the Expression Web Gallery. It is available for FREE download. The template is a ‘mobile friendly’ layout using HTML5 plus CSS3 and ‘responsive design’. It also has a ‘sticky footer’ that stays at the bottom of the browser window on pages with limited content.

The layout is simple but Ian gives you suggestions for personalizing it to meet YOUR needs. Even though the template uses HTML5 and CSS3 it is backwards compatible and has been thoroughly tested on the majority of desktop and mobile browsers, from IE6 upwards.

You need to see the Read me section included BEFORE attempting to use the template. The template is for Intermediate to Advanced users of Expression Web.

You can download the Mobile-Friendly Responsive Template from the Microsoft Gallery.

Resources:

Screenshot Mobile-Friendly Template Destop View

creenshot Mobile-Friendly Template Destop View

Since I do not have an iPhone or mobile phone, I used a test site to render the mobile-friendly template.

Screenshot of Iphone Simulation of Mobile-Friendly Template.

Screenshot of Iphone Simulation of Mobile-Friendly Template.