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.

How to test responsive designs for free

When you are trying to design your site to be responsive BUT don’t have all the various devices to test on, what can you do> My first investment was Electric Mobile Simulator Lite which was available for free from Electric Plum. Unfortunately they no longer offer a free version. Next I purchased Electric Mobile Simulator 2012 which does a nice job most of the time. But at $39.99 it is a bit expensive.

deviceresponsive

A couple of days ago, Ian Haynes posted in the Expression Web group on Facebook a link to a free tool deviceresponsive which shows a quick preview of your website’s responsive layout on different device resolutions like Macbook, iPad, or iPhone.  You can then share share this preview with your client or use it for your own testing. I tried it out on a couple of my sites and was happy with the result. deviceresponsive lets you see the results of both portrait and landscape orientations. All devices are shown at once on one long page.

Devices and screen sizes emulated in this site are

  • Macbook — 1280 x 800
  • iPad portrait — 768 x 1024
  • iPad landscape — 1024 x 768
  • Kindle portrait — 600 x 1024
  • Kindle landscape — 1024 x 600
  • iPhone portrait — 320 x 480
  • iPhone landscape — 480 x 320
  • Galaxy portrait — 240 x 320
  • Galaxy landscape — 320 x 240
    No screenshot included as it would be way to long! Test your site to see the results.

Am I Responsive?

Today, a couple of folks posted a link to an article How to test responsive designs for free which includes another free tool Am I Responsive? which gives a simple, instant view of your site as it would display on four different devices. All four are iOS, and the developer explains that focus on the site. It offers no controls and no choices, just a very simple, elegant presentation.

Viewport sizes are

  • Desktop — 1600 x 992px scaled down to scale (0.3181)
  • Laptop — 1280 x 802px scaled down to scale (0.277)
  • Tablet — 768 x 1024px scaled down to scale (0.219)
  • Mobile — 320 x 480px scaled down to scale (0.219)

The screenshot shown below is how this blog displays in the various devices.

Screenshot of Expression Web Tips Blog.

You can read the full article How to test responsive designs for free. I would encourage you to add both of these free tools to your testing arsenal if you re working with responsive designs. It is always best to test on an actual mobile device but some of us do not have that luxury.

The Definitive Guide to (Mostly) Free Images

My husband is always telling me “There is NO free lunch” when an offer seems to good to be true. Everything comes with a price. A recent article from SitePoint discusses free or mostly free images available on the Internet.

Even services like Gmail and Facebook come with a price—namely, your privacy. (Free with a string attached would be more accurate.) It’s the same with “free” images from sites like Flickr and and Stock.XCHNG.

The article goes on to discuss what you need to know about free and mostly free images on the web and using those images on YOUR site.

  • Creative Commons: A Non-Traditional Copyright Model
  • Which is Best: Creative Commons or Royalty Free/Right Managed?
  • Public Domain Images

I would urge anyone who is in the habit of right clicking and saving the image and then using it on YOUR website or the site of someone you may be helping to read The Definitive Guide to (Mostly) Free Images by John Tabita.

Google and Responsive Design

I recently began the task of converting each of my websites to use a responsive design layout. Google recommends using responsive design and says:

This means that your website serves the same HTML code to all devices along with different CSS style rules to optimize the site’s interface on desktops, smartphones, and tablets.

You may choose to develop your own responsive layout, buy a template that is responsive or use an add-in/extension for your particular web editor. Since I own both Dreamweaver and Expression Web, I decided to give the Dreamweaver extensions developed by Project VII a try. The two I have been using are Affinity with its included Drop Menu Magic program and CSS Page Builder Magic 2. They are both excellent additions and I wish they were available for Expression Web but sadly they are not. Since I am not as familiar with the workings of Dreamweaver, I switch between the two programs.

Details of recommendations

Google gives the following details on its recommendations:

  1. Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.
  2. Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.
  3. Sites that have separate mobile and desktop URLs.

Examples: Each of the sites listed below us a responsive layout. You can test them by opening the site in your browser and resizing the browser itself.

You can read the full article Building Smartphone-Optimized Websites on Googles Web Developers site. You might also be interested in Building Mobile-Optimized Websites.

Google Changes Ranking Advice, Says Build Quality Sites Not Links

Google recently updated their rankings article within the Google Webmaster Help documentation to keep Google consistent with their general message that webmasters should focus on CONTENT and not on LINKS.

The new article includes the following:

In general, webmasters can improve the rank of their sites by creating high-quality sites that users will want to use and share.

The previous article had a line that read:

In general, webmasters can improve the rank of their sites by increasing the number of high-quality sites that link to their pages.

For more information about improving your site’s visibility in the Google search results, please visit Webmaster Academy which outlines core concepts for maintaining a Google-friendly website. You can read the full article on Google Changes Ranking Advice, Says Build Quality Sites Not Links on Reach Engine Land.

Do you concentrate more on building links to your site or on providing content for your viewers?