Showing posts with label homes. Show all posts
Showing posts with label homes. Show all posts

Wednesday, 8 May 2013

Care Homes Directory New Feature Release

Care Homes New Features

We have been working hard on adding some new features to The Care Homes Directory and now have a new look for our basic and enhanced listing pages.

Adding a tabular navigation bar for the listing provides links to local amenities, Neighbourhood view, Street map and a form for contacting the home.


Enhanced and basic listings are pages which contain information on each home so they can be thought of as a sort of home page.


Main Page

The main page is the landing page for enhanced and basic listings and is were visitors are directed when viewing a listing from our town page. For enhanced listing we also display an overview of the home written by the contact point of the home. This allows full control of any descriptions of the service.
A screen shot of the listings home page with an image of the home and a text description
Details Page


Local Amenities Page

Our local amenities page is a list of local places within a few miles of the home so you can now see what kind of businesses and services are available near the home, for a full list of services please see the bottom of this post.

I have highlighted the local amenities with a red border in the screen shot below to give you an idea of how it all looks.
Screen shot of the local amenities page and the table of local places
Amenities Page


Neighbourhood Page

We also now have a tab for the Neighbourhood page which is a street view of the homes local area allowing visitors to see the surrounding area and what it may look like.
Screen shot of the neighbourhood page and a street view image of the home
Neighbourhood Page


Map Page

The Map page is a road map of the local area it provides some controls for viewing more homes in the area.

If you zoom the map out it will populate the map with pins of other homes near by. This also works if you scroll the map using your mouse and clicking and holding the left mouse button.
Picture of a road map of the surrounding area of the home
Map Page


Contact Page

The final tab is the contact page for the home, if we do not have a current email address associated with the homes contact point then no form is displayed. Enhanced listings allow home owners to have potential clients contact them directly from their listing page as a current email address for the home is required during signup.
Screen shot of the contact form for a home
Contact Page


Conclusion

The Care Homes Directory hopes these new features will be helpful to our site visitors when looking for a care provider. We also hope they provide some useful tools to home owners and managers to control their homes information and attract more potential clients.

Enhanced and Basic Listings

Please review some of the homes taking advantage of the new features we have provided,


Local Amenities List

  • bank
  • beauty
  • salon
  • bus
  • station
  • cafe
  • church
  • dentist
  • doctor
  • florist
  • hair care
  • hindu temple
  • hospital
  • library
  • mosque
  • movie theater
  • museum
  • park
  • pharmacy
  • physiotherapist
  • place of worship
  • post office
  • restaurant
  • shopping mall
  • subway station
  • taxi stand
  • train station
  • veterinary care
  • zoo

Saturday, 4 May 2013

Moving Forward With HTML 5 and CSS3

Porting Templates

We have now moved our website templates over to HTML 5 and CSS level 3 also switching to a tabless design using inline blocks, divs and unordered lists for navigational links. It is a kind of hybrid design between a fixed width website and an elastic layout.


Screen shot of the index page
Index
The site was originally designed in early 2000 and was in need of a new overhaul. It had been overhauled once before from HTML 4 to XHTML but apart from this it has mainly stayed the same. I always like to think content is king and layout is queen.

Main site navigation in the header and footer are now unordered lists (<ul>) which are displayed inline making them horizontal. The left navigation bar uses the same approach but is a vertical list of links with text-align set to right.

Using the border-radius property allows us to round the corners for our header and footer blocks. Rounded borders look more appealing than square.


Our site now uses emphasis (em) for defining the font size of text this allows us to scale up/down the text size if the user has a browser zoom level other than 100%. The font family we use is Verdana, Arial, Helvetica, sans-serif these are considered web safe and are my preferred style.


Screen shot of the sites index page markup
Markup
One of the first tasks we had was defining a minimum screen resolution of which to support in the end we decided that 1024x768 would suffice according to this webpage only 13% have this resolution (January 2012) and 1% used 800x600.

Using the CSS properties for min-width and max-width we can set the size in pixels of the wrapper div for us this is 1280px. By giving it a width in pixels it stops the site layout crunching up when the browser window is minimised. We are in the process of making all our borders and margins use emphasis (em) instead of pixels.

We did encounter some problems with internet explorer 7 which is the lowest version we have decided to support. We had to create a separate CSS file for IE7 to fix a problem with the header link widths. In IE7 these are set to 24% and all other browsers it is 25%.

The website still displays in lower versions but it does not look as good. Other major browsers display the website correctly as they tend to follow standards a bit better.

Padding was another problem which was encountered due to the box model adding it and any margins to the outside of a container which can cause overflow. I learnt a little trick to make it add any padding and/or margins to the inside of the box. You need to use the CSS box-sizing property and give it the value border-box.

Although HTML 5 has yet to be ratified and is still in the draft stage we feel it is sufficiently complete for our use. We also feel that aiming to use more recent web technology will help future proof our website.


Over time we will be implementing a style sheet specifically for mobile devices by using the media attribute of the link tag. We will also be modifying the template using the CSS display property to make the right column merge into the centre column.

We will be writing a future article focusing on implementing the mobile style sheet and on testing our new site design and the cross browser nightmare that can ensue. Finally please take a moment to visit our site.

Friday, 3 May 2013

Welcome

Web Development


Welcome to my web development blog where I will chronicle and discuss the development of our website The Care Homes Directory which is one of the leading websites in the UK for senior care information.


The Care Home Directory is a website which provides information on UK care and nursing homes which includes care and nursing agencies. You can visit the website here.


We will be providing information about the website, its features and the technology used to develop it in future posts I hope you enjoy following our progress.