Dragged along by the Bootstrap

For my Bootstrap project, I’ve decided to try and do a revamp of a website of some people I know, with the view that if I manage to do it well I would offer it to them to use. They have a bed and breakfast in Barmouth.

DSCF4555 (800x190)

Basing it on a site that already exists takes away some decisions, but also challenges with some things I might not have thought about. I thought it might be simpler with there being text and photos to use, but that has not turned out to be so. I thought it also is a bit like working to a brief rather than having a blank page of choice.

I want to do a flat page with sections and I want it to have a modern look. I tried searching for some examples and actually found it quite difficult to find much to inspire. It was also interesting research to see what came up when searching for bed and breakfasts in Barmouth and Gwynedd to see how few are mobile responsive. Especially when my contacts mentioned that all their bookings are now via the internet, whereas in the past they would have casual people passing by. Now people look on their phones or iPads even if they are close by. It seems to me therefore that a business that looks good on mobile devices would fair better (assuming it also comes up high on SEO).

I found an article “Why Your Bed & Breakfast Needs a Responsive Website“, which says “research shows there is about 60% percent chance a mobile user will click another result if a site isn’t mobile friendly” (I’d like to know the source of that research). It also says “In April 2014, many B&Bs are reporting more than 40 percent of traffic occurred from smart phones and tablets, compared to just about 23 percent in April 2013.” Again not backed up figures, but on gut instinct it has to make sense.

The only site I found that was really inspiring, that also came high on a search for B&B in Gwynedd was Plas Tirion.

At the time of writing I have got as far as doing a navigation bar and adding a picture having cracked how to get the picture to bleed right to the edge, and I have played with some panels and figured out how to add icons and put them into circles in a similar fashion to the Plas Tirion site. The HTML part of my code for the icons and circles is:

<div class="container">	
   <div class="row secondSection">
      <div class="col-md-4 box secondHeight"><span class="glyphicon glyphicon-bed iconformat" aria-hidden="true"></span><br /><h2>Rooms</h2>
			
      </div>
      <div class="col-md-4 box secondHeight"><span class="glyphicon glyphicon-cutlery iconformat" aria-hidden="true"></span><br /><h2>Breakfast</h2>
			
      </div>
      <div class="col-md-4 box secondHeight"><span class="glyphicon glyphicon-gbp iconformat" aria-hidden="true"></span><br /><h2>Tariff</h2>
			
      </div>
   </div> <!-- /.row -->
</div> <!-- /.container -->

The accompanying CSS is:

<style>
   .iconformat {
      padding-top:20px;
      font-size:300%;
      background-color:#306F8E;
      color: white;
      height: 2em;
      width: 2em;
      border-radius: 1em;
		
   }
</style>

I have come up on some stumbling blocks. The first relating to images.

Images are a major component to the look and feel of a site. The site I am working on has a lot of images but they are all very small. This is a deliberate issue of keeping the file size low for download speed. The issue is that the images are not big enough to use for my purposes, but it also makes me wonder what the optimum image sizes are and how to have nice big images for laptop/desktop browsing whilst being responsive to mobile environment. How does the image resizing of the responsive environment with bootstrap work? Are they reduced in size or are they downloaded full size and therefore on low bandwidth and with data limits does that slow things down on mob? You I need to have a number of versions of the same image at different sizes and have a conditional option and what kind of code would that involve? So many questions!

One Solution to Responsive Images” outlines a case for sticking with a particular image format – square in their case matching Instagram of 600 x 600 px. They came up with a final set of requirements for a responsive images solution for the website:

  • Potential image widths (in pixels) of 100, 300, 600, 900, 1200, 1600, 1800
  • Retina ready
  • Must be crisp with minimal resizing (some people notice a drop in quality with even downsized images)

There are solutions in that article that are just over my head at the moment and involve PHP, which I know something about but haven’t got to on this course yet. So I need to digest that another day.

The next issue then is to get some suitable images that I can use once I have figured out the size/resolution issues. Fortunately I have a lot of reasonable images of Barmouth of my own that I can use for this purpose. So that has taken a chunk of time picking out suitable ones. But I also am undecided on aspect ratio. I have cropped some square but I really want landscape. I had a read up about the golden ratio and noticed on my bank’s site, which has very recently been redesigned with mobile in mind, that they had images with a ratio that appeared to be 1.636:1 (but that was from me measuring with a ruler on screen not exactly accurate). I think they may actually be 1.6:1 or 16:10, which is very close to the golden ratio (1.618:1).

Finally, I will end this post with my desire to include a carousel at the top rather than a fixed image (even though I am not a big fan of sliders I feel I need ot know how to do them). So I need to take a look at the code for example on W3schools http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

693 Total Views 1 Views Today

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *