web site looking for advice

Ciaran219

Hi,
I am new to web dev and am still currently studying this so go easy on me. Just looking for some advice on how I can tidy up a site I have built.
Just looking to make it a little fuller and nice to look at. It is a site I build for a elderly family member that lives a bit away from me so getting photos etc has been a major issue for me so far. this is the site www.mariesschooluniforms.com

Thanks in advance,

Buford T Justice

The only thing I can see is a placeholder for a hosting provider.

Ciaran219

Buford T Justice wrote: »

The only thing I can see is a placeholder for a hosting provider.

just seen that myself.. thats not what its meant to be

Ciaran219

Buford T Justice wrote: »

The only thing I can see is a placeholder for a hosting provider.

should be opening now.. im having one issue i know of that ill fix tomorrow.. If you click any tab from services to gallery and then click home or facility you get an error. Other than that it should be working now

Buford T Justice

Is this just a static html page?

You could use something like bootstrap to add some simple styling.

daymobrew

We are also a five minute drive from the Luas Red Line in Drimnagh

Most Luas users will not have a car :-)

On http://www.mariesschooluniforms.com/Website2.html#heading3 (why the #heading3 anchor?) "Maries" is used twice without the apostrophe i.e. I think that it should be Marie's.

The Family run business - make Family lowercase (to family) to be consistent with the previous sentence.

The page has a number of html errors e.g. "long" should be "lang".

[HTML]<img src="Images/shop-front.jpg"> <alt="Maries Fashions" title="Maries Fashions"></a> <style="width:350px;height:150px/;
[/HTML] Remove the '>' after the image filename and the '<' before 'alt'. Then remove the '</a>' as there is no opening '<a>' tag. The "style" tag is not closed.

The stylesheet file is empty. You should move the inline styles from the top of the html page to that file.

Here is a short selection of errors from the style block at the top of the file:

font-familt: Verdona, Tahama, Arial, sans-serif;

Typo: should be "font-family" and "Verdona" should be "Verdana"

P{
   #Padding: 2%;
   color: #878e63;
}

Change #Padding to "padding" (lowercase and no #).

nav ul li {
     float: left;
	 boarded: 1px solid #878E63;
	 width: 15%;
 }

"boarded" should be "border"

A good text editor (I use Notepad++) will colour valid code and this makes it easier to spot typos like those above.

Ciaran219

Buford T Justice wrote: »

Is this just a static html page?

You could use something like bootstrap to add some simple styling.

Ill take a look at that today, never heard of a bootstrap before for styling thanks.

Ciaran219

daymobrew wrote: »

Most Luas users will not have a car :-)

On http://www.mariesschooluniforms.com/Website2.html#heading3 (why the #heading3 anchor?) "Maries" is used twice without the apostrophe i.e. I think that it should be Marie's.

The Family run business - make Family lowercase (to family) to be consistent with the previous sentence.

The page has a number of html errors e.g. "long" should be "lang".

[HTML]<img src="Images/shop-front.jpg"> <alt="Maries Fashions" title="Maries Fashions"></a> <style="width:350px;height:150px/;
[/HTML] Remove the '>' after the image filename and the '<' before 'alt'. Then remove the '</a>' as there is no opening '<a>' tag. The "style" tag is not closed.

The stylesheet file is empty. You should move the inline styles from the top of the html page to that file.

Here is a short selection of errors from the style block at the top of the file:

font-familt: Verdona, Tahama, Arial, sans-serif;

Typo: should be "font-family" and "Verdona" should be "Verdana"

P{
   #Padding: 2%;
   color: #878e63;
}

Change #Padding to "padding" (lowercase and no #).

nav ul li {
     float: left;
     boarded: 1px solid #878E63;
     width: 15%;
 }

"boarded" should be "border"

A good text editor (I use Notepad++) will colour valid code and this makes it easier to spot typos like those above.

I've replied to this twice with bigger replies but I keep getting a "confirm you're not a robot pop up" then nothing comments.:eek:

ill try shorter this time
Appreciate the things pointed out above ill change all of that this evening. The style sheet when I copy and move to its own sheet I lost a lost of content and couldn't figure out why so had to leave it as is til I figured it out unfortunately.

mightyreds

+1 for bootstrap you can download free templates and with minimum changes have a professional looking site, but that will do nothing for the learning curve if that's what you want

Ciaran219

mightyreds wrote: »

+1 for bootstrap you can download free templates and with minimum changes have a professional looking site, but that will do nothing for the learning curve if that's what you want

its a bit of both to be honest, id like to learn how to do it all myself manually and then use bootstrap if you get me. Prob a long way and a pain in the arse but id like to learn it firstly

Ciaran219

Buford T Justice wrote: »

Is this just a static html page?

You could use something like bootstrap to add some simple styling.

just looking at bootstrap now, good shout. Plenty of info on there!

Buford T Justice

Ciaran219 wrote: »

I've replied to this twice with bigger replies but I keep getting a "confirm you're not a robot pop up" then nothing comments.:eek:

ill try shorter this time
Appreciate the things pointed out above ill change all of that this evening. The style sheet when I copy and move to its own sheet I lost a lost of content and couldn't figure out why so had to leave it as is til I figured it out unfortunately.

Did you link the CSS stylesheet correctly in the head?

<link rel="stylesheet" type="text/css" href="{path-to-stylesheet.css}" />

Ciaran219

Buford T Justice wrote: »

Did you link the CSS stylesheet correctly in the head?

<link rel="stylesheet" type="text/css" href="{path-to-stylesheet.css}" />

Off the top of my head I don't think so, but ill try it again later and see. I doubt I did to be honest.

Buford T Justice

Ciaran219 wrote: »

Off the top of my head I don't think so, but ill try it again later and see. I doubt I did to be honest.

If you're using an external stylesheet (and you should) then you need to tell the page where the sheet is located.
You can find more information here
http://www.w3schools.com/html/html_css.asp

Ciaran219

Having trouble with getting a background image on this new site? using bootstrap for it, below is what i have but no image is showing


<style>
html{
background: url(shop.jpg) no-repeat center center fixed;
-webskit-background-size:cover;
-moz-background-size:cover;
-o-background-size: cover;
background-size: cover;
}
</style>

L.Jenkins

I would suggest Netbeans IDE and grab yourself a few HTML5 themes you could work on.

Dubba

Is the shop.jpg in your Images folder?

https://developer.mozilla.org/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML


Prefixing your google queries with mdn, is a handy way of getting results from developer.mozilla.org. Better than W3Schools results imo.

Ciaran219

Dubba wrote: »

Is the shop.jpg in your Images folder?

https://developer.mozilla.org/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML


Prefixing your google queries with mdn, is a handy way of getting results from developer.mozilla.org. Better than W3Schools results imo.

yeah its in the same folder as the other images.. not sure what the issue is with it

Buford T Justice

Ciaran219 wrote: »

Having trouble with getting a background image on this new site? using bootstrap for it, below is what i have but no image is showing

      <style>
html{
      background: url(shop.jpg) no-repeat  center center fixed;
      -webskit-background-size:cover;
	  -moz-background-size:cover;
	  -o-background-size: cover;
	  background-size: cover;
}
</style>

Are you not using a stylesheet?

Dubba

Looks like file path is your issue.

https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files#File_paths

... the file path we'd need is images/your-image-filename. For example, your image is called shop.jpg, so the file path is images/shop.jpg

Also, as was already mentioned, you should be using an external stylesheet.
Have a look here for the correct formatting:

https://developer.mozilla.org/en/docs/Web/HTML/Element/link#Including_a_stylesheet

Ciaran219

Buford T Justice wrote: »

Are you not using a stylesheet?

I am using a style sheet. I tried that code on the index.html doc and seperate on the style sheet but still no joy..

Ciaran219

Dubba wrote: »

Looks like file path is your issue.

https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files#File_paths

... the file path we'd need is images/your-image-filename. For example, your image is called shop.jpg, so the file path is images/shop.jpg

Also, as was already mentioned, you should be using an external stylesheet.
Have a look here for the correct formatting:

https://developer.mozilla.org/en/docs/Web/HTML/Element/link#Including_a_stylesheet

Will give that a try now.

Ciaran219

@Dubba. Is it different to do this when using bootstrap?
I've tried it different ways, path is correct. Other images on the HTML doc are working fine on the slider. Just this background header image

Dubba

Not to sure about bootstrap, I'm a student as well, so not much experience.

Have you tried wrapping the url in quotes?

Dubba

... like this:
('Images/shop.jpg');

Ciaran219

tried that yeah, my style sheet isnt linking up by the look of it, thinking bootstrap stylesheet might be causing the issue.
I have it in my header in the HTML doc <IMG HEIGHT="600px" WIDTH="1200px" SRC="Images/shop.jpg"> and its working perfect. Its on top of where i want it, i want it in the background behind the text instead of above

Dubba

If your using an external style sheet, test that it works:
body{background-color: red;}

If this is your sites structure:

webpage
-index.html
-css
- - style.css
- images
- - shop.jpg

then to reference the image on your css file you should use the following path:

../images/shop.png

So that would be background: url('../images/shop.jpg');

Google around and have a look for people asking similar questions on stackoverflow.

colm_mcm

Pricing

Pricing is something that we understand is of big importance as it can be a very expensive time when your children are returning to school. Because of this we are concious that we are extremely competitive and will always strive to ensure you get value for money. We are the cheapest supplier of childrens uniforms in Dublin

this seems unnecessarily long-winded

the whole year inn

I'm by no means an expert but have made a few sites in html and bootstrap,just on the general look of the first photo,could you take a nice photo with the shutters up and leave out the solicitors banner and the bin and the windows above the shop.

Would you put in a googlemaps on the page and remove all the address?You should invest in a logo and put it in at the top of the page
You should really check out bootstrap once you get your head around html/css it.Its a breeze really.

Ciaran219

the whole year inn wrote: »

I'm by no means an expert but have made a few sites in html and bootstrap,just on the general look of the first photo,could you take a nice photo with the shutters up and leave out the solicitors banner and the bin and the windows above the shop.

Would you put in a googlemaps on the page and remove all the address?You should invest in a logo and put it in at the top of the page
You should really check out bootstrap once you get your head around html/css it.Its a breeze really.

Ive actually re done the site since i posted this, ive used bootstrap and its made a huge difference. The picture of the front of the shop i am still chasing them for, ( not having an easy time ). in the new site ive used the google link for the address now too.

the whole year inn

Ciaran219 wrote: »

Ive actually re done the site since i posted this, ive used bootstrap and its made a huge difference. The picture of the front of the shop i am still chasing them for, ( not having an easy time ). in the new site ive used the google link for the address now too.

Surprised you didnt go with a Slider on the first page,just have to get a few nice pictures and looks better,what ever suits tho.
Keep up the good work.

Ciaran219

the whole year inn wrote: »

Surprised you didnt go with a Slider on the first page,just have to get a few nice pictures and looks better,what ever suits tho.
Keep up the good work.

http://mariesschooluniforms.com/

Sites done now, looks a little different
still a couple of things id like to change like the main photo having that faded in the background once i get a better one. But definitely liking the Bootstrap framework

Hollister11

Ciaran219 wrote: »

http://mariesschooluniforms.com/

Sites done now, looks a little different
still a couple of things id like to change like the main photo having that faded in the background once i get a better one. But definitely liking the Bootstrap framework

Try and centre everything. It would look much neater. In your body tag use the text-align:Center; rule.

Also the copyright symbol isn't showing at the bottom, it's just showing the word copyright

Ciaran219

Thanks @ Hollister. You any advise on the Img at the top not fitting on a phone?

<IMG HEIGHT="600px" WIDTH="1200px" SRC="Images/shop.jpg"

Hollister11

Ciaran219 wrote: »

Thanks @ Hollister. You any advise on the Img at the top not fitting on a phone?

<IMG HEIGHT="600px" WIDTH="1200px" SRC="Images/shop.jpg"

Try setting the max width to 100%

Ciaran219

sometimes its always the simple things we miss

worked like a charm, thanks

Hollister11

Another piece of advice.

The contact form doesn't work. When you submit you are redirected to an error message.

tricky D

I think you need to step back a bit and rethink your approach. I would recommend getting a dedicated bootstrap theme/template instead of what you are currently using which looks a bit of a mishmash with some of the responsiveness being handled by bootstrap, some in the style sheet and some in the img tag attributes. (well the version you had an hour or two ago looked that way with some responsive stuff in bootstrap, some elsewhere) That could get messy when it would be better to have a single method, the bootstrap theme/template handling it all. And it is messy as is, with loads of bad errors in the html like alt being used as a tag when it should be an image attribute (in the image tag) and using width="100%" for image sizing isn't a recommended workaround imho. Taking the the bootstrap theme would also take care of responsive hamburger menus and more.

A note on centre aligned text, it's not great for readability as the eye catches a new line better when text is left aligned.

The content could also do with some retreatment eg. instead of 4/5 lines of text at the top of the page a list of the main selling points would be more effective. Eg.

• Skirts, Pinafores, Shirts, Ties, Trousers and also Track Bottoms and Jumpers.
• Suppliers of Banba quality Knitwear & Tracksuits.
• Family run since 1980.
• Prices include crests and badges.
• Something about value.

Lists are easier to read than paragraphs which is important at the top of the homepage. Initially users generally scan text when they arrive to a site. After that paragraphs are ok once the user is more comfortable that they are in the right place.

I'd also put images of the uniforms at the top of the page as these are what are what the users are looking for. Look at treating some of the text's typefacing eg. make the prices bold, though don't overdo that too much.

Check your grammar, punctuation and spelling. There are errors there. Get some one else to check it as well.

There should be an email link treated as a mailto and the phone numbers should use the tel protocol so that a phonecall can be made at a single click for a phone.

Use the regular types of icons for facebook which users are familiar with.

Think about embedding the Google Map into the page around the footer/contact details.

Get the forms working as mentioned and as you are taking stuff in from forms, I'd get a privacy policy. As for the subscribe bit, let the users know what and why they are subscribing to - sell it a bit instead of just saying subscribe.

I'm not a fan of single pages but I suspect you might not have enough content to populate more pages. I'd be looking to get dedicated pages for each product type: jumpers, skirts, shirts, etc. Same for testimonials.

Lastly, I recommend using lowercase exclusively for filenames, directory names and not use any special characters like '&' in links. Not a biggie these days but makes old timers like myself cry.

Hope that helps and good luck.

Ciaran219

tricky D wrote: »

I think you need to step back a bit and rethink your approach. I would recommend getting a dedicated bootstrap theme/template instead of what you are currently using which looks a bit of a mishmash with some of the responsiveness being handled by bootstrap, some in the style sheet and some in the img tag attributes. (well the version you had an hour or two ago looked that way with some responsive stuff in bootstrap, some elsewhere) That could get messy when it would be better to have a single method, the bootstrap theme/template handling it all. And it is messy as is, with loads of bad errors in the html like alt being used as a tag when it should be an image attribute (in the image tag) and using width="100%" for image sizing isn't a recommended workaround imho. Taking the the bootstrap theme would also take care of responsive hamburger menus and more.

A note on centre aligned text, it's not great for readability as the eye catches a new line better when text is left aligned.

The content could also do with some retreatment eg. instead of 4/5 lines of text at the top of the page a list of the main selling points would be more effective. Eg.

• Skirts, Pinafores, Shirts, Ties, Trousers and also Track Bottoms and Jumpers.
• Suppliers of Banba quality Knitwear & Tracksuits.
• Family run since 1980.
• Prices include crests and badges.
• Something about value.

Lists are easier to read than paragraphs which is important at the top of the homepage. Initially users generally scan text when they arrive to a site. After that paragraphs are ok once the user is more comfortable that they are in the right place.

I'd also put images of the uniforms at the top of the page as these are what are what the users are looking for. Look at treating some of the text's typefacing eg. make the prices bold, though don't overdo that too much.

Check your grammar, punctuation and spelling. There are errors there. Get some one else to check it as well.

There should be an email link treated as a mailto and the phone numbers should use the tel protocol so that a phonecall can be made at a single click for a phone.

Use the regular types of icons for facebook which users are familiar with.

Think about embedding the Google Map into the page around the footer/contact details.

Get the forms working as mentioned and as you are taking stuff in from forms, I'd get a privacy policy. As for the subscribe bit, let the users know what and why they are subscribing to - sell it a bit instead of just saying subscribe.

I'm not a fan of single pages but I suspect you might not have enough content to populate more pages. I'd be looking to get dedicated pages for each product type: jumpers, skirts, shirts, etc. Same for testimonials.

Lastly, I recommend using lowercase exclusively for filenames, directory names and not use any special characters like '&' in links. Not a biggie these days but makes old timers like myself cry.

Hope that helps and good luck.

Thanks for the feedback, again I'm new to this still. Started back in February so I'll definitely take it all on board.
The contact us form I am having issues with the email attachment to it as its not working still.
The subscribe will be taken out by the looks of it as they aren't willing to commit getting any mail sent to people that sign up to it.

Content wise, yeah I've been given nothing to work with to be honest. I have to get anything that's there myself. The only pictures I was sent were skirts on a hanger on a curtain pole with the curtain behind it.

I did have the Facebook logo previously at the bottom but I did like the button at the top as a change to be honest.

Bootstrap itself is entirely new to me so I've no doubt I've got some issues in there. I will be tidying it up issues like what you've pointed out as I go along. This site is for my old grandparents who are both 75 and not going to be even maintaining or using the site so it's me doing it for free to get a portfolio built mainly.

Thanks for the advise though, appreciate it.

daymobrew

-webskit-background-size:cover;

Typo again: -webskit-background-size should be -webkit-background-size.

Ciaran219

Hollister11 wrote: »

Another piece of advice.

The contact form doesn't work. When you submit you are redirected to an error message.

From what i can tell i need to change my Index.html doc to index.php and then create a contact.php file with the PHP mailer files so the contact form will run properly. Does that sound right?

Buford T Justice

Ciaran219 wrote: »

From what i can tell i need to change my Index.html doc to index.php and then create a contact.php file with the PHP mailer files so the contact form will run properly. Does that sound right?

If you want to do that, you'll have to implement php as a server side language to do it.