Page 1 of 1

Bed & Breakfast website design

Posted: Wed May 16, 2018 6:54 am
by 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/

Re: Bed & Breakfast website design

Posted: Wed May 16, 2018 10:25 am
by 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'

Re: Bed & Breakfast website design

Posted: Wed May 16, 2018 10:25 am
by 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'

Re: Bed & Breakfast website design

Posted: Wed May 16, 2018 10:30 am
by bubblegumweb
Good point. Thanks

Re: Bed & Breakfast website design

Posted: Wed May 16, 2018 10:46 am
by 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

Re: Bed & Breakfast website design

Posted: Wed May 16, 2018 9:12 pm
by bubblegumweb
Hopefully now the mobile version is working. I just need to finalise all the links

Re: Bed & Breakfast website design

Posted: Fri May 18, 2018 12:27 am
by 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. :)

Re: Bed & Breakfast website design

Posted: Fri May 18, 2018 12:45 am
by 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. :wink:

Re: Bed & Breakfast website design

Posted: Fri May 18, 2018 6:36 am
by bubblegumweb
Little Owl wrote: Fri May 18, 2018 12:27 am 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?

Re: Bed & Breakfast website design

Posted: Fri May 18, 2018 6:38 am
by bubblegumweb
crispy68 wrote: Fri May 18, 2018 12:45 am 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. :wink:
Good point. I agree, it needed a little more than all one color. I have changed the checkmark colors.
Thanks for your feedback.

Re: Bed & Breakfast website design

Posted: Sat May 19, 2018 7:18 am
by Little Owl
bubblegumweb wrote: Fri May 18, 2018 6:36 am
Little Owl wrote: Fri May 18, 2018 12:27 am 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.

Re: Bed & Breakfast website design

Posted: Sat May 19, 2018 9:10 am
by bubblegumweb
Ok, thanks, i'll look into that

Re: Bed & Breakfast website design

Posted: Sun May 20, 2018 1:31 am
by 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

Re: Bed & Breakfast website design

Posted: Sun May 20, 2018 7:33 am
by 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

Re: Bed & Breakfast website design

Posted: Mon May 21, 2018 3:05 am
by GrahamW
I got my mate to check on iPhone 7 and it shows a little square in the top corner

Re: Bed & Breakfast website design

Posted: Mon May 21, 2018 5:16 am
by BaconFries
Looks fine to me...tested with Chrome and Firefox mobile.

Image

Re: Bed & Breakfast website design

Posted: Mon May 21, 2018 11:01 am
by 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

Re: Bed & Breakfast website design

Posted: Mon May 21, 2018 11:23 pm
by 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

Re: Bed & Breakfast website design

Posted: Mon May 21, 2018 11:57 pm
by 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?.

Re: Bed & Breakfast website design

Posted: Tue May 22, 2018 1:36 am
by 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

Re: Bed & Breakfast website design

Posted: Tue May 22, 2018 8:21 am
by 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.

Re: Bed & Breakfast website design

Posted: Tue May 22, 2018 10:30 pm
by 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.

Re: Bed & Breakfast website design

Posted: Tue May 22, 2018 10:41 pm
by 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

Re: Bed & Breakfast website design

Posted: Tue May 22, 2018 10:42 pm
by bubblegumweb
Correction. All is not well, the removed code has now caused a mobile menu display problem. I'll revert back to the original.

Re: Bed & Breakfast website design

Posted: Tue May 22, 2018 10:43 pm
by BaconFries
Was about to post this.

Re: Bed & Breakfast website design

Posted: Wed May 23, 2018 6:40 am
by 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

Re: Bed & Breakfast website design

Posted: Wed May 23, 2018 6:32 pm
by crispy68
I no longer see the broken image icon on my phone. :D

Re: Bed & Breakfast website design

Posted: Wed May 23, 2018 7:07 pm
by BaconFries
Looks like you have see resolved this.

Re: Bed & Breakfast website design

Posted: Wed May 23, 2018 7:26 pm
by 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

Re: Bed & Breakfast website design

Posted: Wed May 23, 2018 10:11 pm
by 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

Re: Bed & Breakfast website design

Posted: Wed May 23, 2018 10:50 pm
by 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

Re: Bed & Breakfast website design

Posted: Thu May 24, 2018 9:24 am
by GrahamW
Still don't see menu

Re: Bed & Breakfast website design

Posted: Thu May 24, 2018 10:12 am
by bubblegumweb
Control f5 a few times on the keyboard to clear page cache. Should see changes then.

Re: Bed & Breakfast website design

Posted: Thu May 24, 2018 10:46 am
by bubblegumweb
It's defo there, I have tried it on 3 different mobiles now :)