Bed & Breakfast website design

[bubblegumweb]

Hi all,

I have been working on a web design page for a Bed & Breakfast business. I'm working on the DESKTOP version only at the moment and have not yet got onto desiging the MOBILE version of the website yet. I purchased a booking form from " Dapsonishmeal " and changed it to my needs for the website and I think the design layout is quite pleasing.

Please feel free to comment on the design with any recommendations

http://365pixel.co.uk/oaklands/

[andyp]

very nice but just one observation... there is no indication as to where this is unless you scroll down an dread the small text.. so perhaps you should have 'York' in the header such as 'Oaklands' 'Bed and Breakfast - York'

[andyp]

very nice but just one observation... there is no indication as to where this is unless you scroll down an dread the small text.. so perhaps you should have 'York' in the header such as 'Oaklands' 'Bed and Breakfast - York'

[bubblegumweb]

Good point. Thanks

[bubblegumweb]

I've made some changes due to the suggestion on location. You may have to refresh your browser to see changes to take effect

[bubblegumweb]

Hopefully now the mobile version is working. I just need to finalise all the links

[Little Owl]

Hi,

Nice job overall.

I noticed in your booking form that for the date sections the yyyy text for dd/mm/yyyy is cut off, you may need to extend them a little.

Also in your testimonials section, I find the white text against the yellow background lacks enough contrast to make it easy to read for everyone. Also having a black text title, white text for the testimonial & then grey text for the name is a bit too much mix 'n' match for me, I think go with just 2 colours & drop the black as it looks a tad harsh.

Also in the first breakpoint where the hamburger menu icon first appears I find the images are blurry & cropped too much. But they look fine in the 320 breakpoint.

Hope that is helpful.

[crispy68]

Looking good!

I might would make the checkmarks the yellow color in the 'what makes Oaklands different' section to just give it a bit more color than white.

[bubblegumweb]

Hi,

Nice job overall.

I noticed in your booking form that for the date sections the yyyy text for dd/mm/yyyy is cut off, you may need to extend them a little.

Also in your testimonials section, I find the white text against the yellow background lacks enough contrast to make it easy to read for everyone. Also having a black text title, white text for the testimonial & then grey text for the name is a bit too much mix 'n' match for me, I think go with just 2 colours & drop the black as it looks a tad harsh.

Also in the first breakpoint where the hamburger menu icon first appears I find the images are blurry & cropped too much. But they look fine in the 320 breakpoint.

Hope that is helpful.

Hi, thanks for the feedback. I agree on the testimonial colors, I have now changed them to just two colors. Reference to the "Hamburger" image being blurry, I don't see any hamburger image on the website design. Could you be referencing to the "Bread Rolls" image next to the testimonials section?

[bubblegumweb]

Looking good!

I might would make the checkmarks the yellow color in the 'what makes Oaklands different' section to just give it a bit more color than white.

Good point. I agree, it needed a little more than all one color. I have changed the checkmark colors.
Thanks for your feedback.

[Little Owl]

Hi,

Nice job overall.

I noticed in your booking form that for the date sections the yyyy text for dd/mm/yyyy is cut off, you may need to extend them a little.

Also in your testimonials section, I find the white text against the yellow background lacks enough contrast to make it easy to read for everyone. Also having a black text title, white text for the testimonial & then grey text for the name is a bit too much mix 'n' match for me, I think go with just 2 colours & drop the black as it looks a tad harsh.

Also in the first breakpoint where the hamburger menu icon first appears I find the images are blurry & cropped too much. But they look fine in the 320 breakpoint.

Hope that is helpful.

Hi, thanks for the feedback. I agree on the testimonial colors, I have now changed them to just two colors. Reference to the "Hamburger" image being blurry, I don't see any hamburger image on the website design. Could you be referencing to the "Bread Rolls" image next to the testimonials section?

Hi,

It's not the what we call 'hamburger menu' icon (the icon used to designate a hidden menu on mobile sites) that is blurry, but at the breakpoint that it starts to appear as you reduce screen size on my desk top, I found the actual photos became blurry then they sharpened up again at approx around the 320 breakpoint.

[bubblegumweb]

Ok, thanks, i'll look into that

[GrahamW]

I noticed when viewing on a mobile Samsung Galaxy Note 8 you see this on the menu
http://www.screencast.com/t/BuVXk48fl

You only have 1 image agains the menu names but for some reason there is a broken image up the top.

Graham

[bubblegumweb]

Hi Graham.

I have sorted out the Icons in the mobile menu now, thanks for pointing that out to me. Reference to the broken image right at the top, that one is totally confusing me. I have checked in WYSIWYG design and I see no image where your phone is displaying the broken icon. And when I test it on my mobile "Samsung J5" I dont get any broken image icon. Strange indeed.

Maybe someone else on the forum will look out ofr that and give some advice.

Regards

[GrahamW]

I got my mate to check on iPhone 7 and it shows a little square in the top corner

[BaconFries]

Looks fine to me...tested with Chrome and Firefox mobile.

[bubblegumweb]

Hi Baconfries,

thanks for testing that for me, as I too could see no broken image anywhere on my mobile in the same browers you have checked on. Not sure why that Samsung phone screenshot in the previous coment was showing a broken image icon as there is no image in that location at all.

Regards

[GrahamW]

This is what my mate and his wife see from 2 iphone 7

http://www.screencast.com/t/vUqbYyuWgWl

they both show a little square.

Graham

[BaconFries]

OK, I have viewed the url with a Samsung Cell/Mobile with the stock Samsung Browser and it shows what GrahamW is mentioning. Now on viewing the source the rouge image shows between line 484 to 486 with the following

Code: Select all

<div id="mobile_menu_markup">
<div id="mobile_menu-logo">
<img alt="" src="images/wwb_normal.png"></div>

How did you install the Panel Menu, did copy&paste, or import from another page?. Did you install as a extension? Did you happen to use a Template and then modify for your needs?.

[GrahamW]

Hi Baconfries,

I suspect this has happened since WB14 because I see it on some that have been upgraded but not on WB12

Graham

[bubblegumweb]

Hi, if my memory serves me right I will have copied the panel menu from a previous project I designed where I originally selected a panel menu to use from WYSIWYG menu options.

[BaconFries]

Then if this is the case you will need to open the page in a HTML Editor and remove the code. Note I would backup this page before doing so just incase.

[bubblegumweb]

Hi,

I have removed the code in question and re uploaded. All seems to be working with the website, let's see if that solves the problem with the broken image display in the mobile version.

Regards

[bubblegumweb]

Correction. All is not well, the removed code has now caused a mobile menu display problem. I'll revert back to the original.

[BaconFries]

Was about to post this.

[bubblegumweb]

Hi all.

To try and resolve this briken image icon on the mobile version I have decided to delete the Panel Menu which I may have copied and used from another web design project and insert a totally new Panel Menu from the WYSIWYG Toolbox. Hopefully now that I have doen this we can eliminate that broken image icon showing on some mobile phones.

Check it out and let mw know guys. http://365pixel.co.uk/oaklands/

Regards

[crispy68]

I no longer see the broken image icon on my phone.

[BaconFries]

Looks like you have see resolved this.

[bubblegumweb]

Well this all sounds like good news. A lesson to be learnt here, don't copy & paste just for the convenience and speed of things. Use fresh tools when web designing. Thanks everyone for testing the site out.

Regards

[GrahamW]

Did you totally revive the menu from the mobile view. I just see the header images and no menu at all.
That's viewing from note 8 and iPhone 7

[bubblegumweb]

Hi Graham,

I don't know what went wrong there, but yea I checked out the mobile version and the menu had dissapeared. All should be fixed now. I've tested it and the menu seems to be there now. Let me know if all is ok when you view please.

Regards

[GrahamW]

Still don't see menu

[bubblegumweb]

Control f5 a few times on the keyboard to clear page cache. Should see changes then.

[bubblegumweb]

It's defo there, I have tried it on 3 different mobiles now