Website Critic Needed

[ccllnply]

Hey guys! A few days ago my physio asked me if I could make a website for him. At first I was a bit reluctant because I've never made a website outside of college but I figured it would be good practice since this is what I hope to go into after I finish college so I agreed to give it a go.

Now I think Javascript is probably my weakest area and with PHP even if I don't know how to do something I usually have no probably working or finding it out. I'm pretty competent with HTML and CSS. My problem is that I've never been very creative and design isn't something that comes naturally to me. I've been looking at other websites, looking at templates and just trying to get ideas. I want to do the coding myself, just to get the practice but I find myself not able to determine what looks good and what doesn't. My girlfriend even had to teach me about colour schemes

So I was wondering if you guys could have a look at this screenshot and give some constructive criticism. Suggestions will be very much appreciated

Web page

[Ishan]

If you're struggling with the PHP part then you should use some CMS to help ease out your pain. The most famous ones are Word Press, Joomla & Drupal. My personal choice is Drupal.

As for the screenshot preview it looks pretty good bro. My further suggestions would be:
1) Add a main logo where it says "Clinic" on the top left.
2) Move the social media icons in the footer instead. And place the direct contact details like phone no., email etc at the top right.
3) Add a drop down menu in the main menu for more internal build ups if you haven't done already.
4) Keep the footer rectangular by getting rid of the curves at the side. Doesn't blends well.
5) The footer elements should be in bullet points and aligned in separate blocks. Like this:

<hr />
<ul>
<li> Point 1
<li> Point 2
<li> Point 3
<li> Point 4
</ul>
Would look like this with a horizontal line:

---

• Point 1
• Point 2
• Point 3
• Point 4

[ccllnply]

Thanks for the quick reply man, really appreciate it.

I implemented some of the suggestions you gave and it really does look a lot better now.

3) Add a drop down menu in the main menu for more internal build ups if you haven't done already.

I'm not entirely sure what you mean about internal build ups. I don't have a drop down menu, it's just the four menu buttons you see there which is from a template I got online. The guy I'm doing this for is self-employed and working from a small home business so there wouldn't be many web pages involved in this. Because of that I thought it wouldn't justify a drop down menu.

[Ishan]

Yeah before going into this one always needs to make a scratch plan on what exactly he will built seeing the requirements of the client. If you think there won't be any need then it's cool, although if you need to expand this and add more tabs then it's also possible via template editing.

And drop down menus are commonly based on jQuery and requires some HTML5, CSS3 etc coding. Nothing typical, in case the need does arise.

Also i think you should give him an option of webform, which the visitors\patients can use to book appointments. A separate tab or a pop up, whatever you find convenient. Lastly i would also add a tab about "About Me", where you would post his photo in a float tag and wrap some text\his bio around it. It's a must. And add a Google map addon in the about me page, so that locals can easily see where his clinic is.

[ccllnply]

Also i think you should give him an option of webform, which the visitors\patients can use to book appointments. A separate tab or a pop up, whatever you find convenient.

I had considered and wanted to do something like that but I'm afraid it goes beyond my knowledge. We did something similar in our college project last year but that was between four of us and was a local thing as opposed to an actual website up on the internet. I had thought of a way that I might be able to do it but I think it would be very messy and possibly buggy and since I'm back to college next month I don't think I'd have time to learn what I'd need to know to do it.

He did ask for a contact page with an email form and I'm trying to learn how to do that now. So far I've managed to get the email to send in a very basic way. Although the email gets put into my spam folder and the "From" address always shows up as @ the website it's sent from. When I try to secure the e-mail, like shown on W3Schools, it just doesn't send and same if I try to change the "From" address for the e-mail.

Lastly i would also add a tab about "About Me", where you would post his photo in a float rag and wrap some text\bio around it. It's a must.

I do plan on doing that. I had been planning on putting all that information on the Home page simply because I don't know what else to put there but it would look better on it's own page. That just leaves me with what to put on the home page. Is there rule as to what should be there or do I just need to ask my physio what he wants?

[Ishan]

That is why i suggested you the CMS route (Content Management system). Like in Wordpress there is a simple solution for something like that:
http://premium.wpmudev.org/blog/buil...ments-website/

CMS also has an option for custom webforms and newsletters. Webforms will be sent my visitors with whatever stuff they have written in the form you put out there and newsletter is something they can subscribe and get informed about anything latest and relevant news from the particular medical field.

I don't have any suggestions for the spam thing. I use an integrated addon called MailChimp. Anyways if you don't have time to spare then it's better to finish the project in traditional HTML sense rather than experimenting with CMS now.

And what content needs to be on front page depends on the requirements of the client because you absolutely have no idea about his field of expertise. This is how it works:
1) Client tells what exactly he wants in his website and how.
2) Designer makes a rough plan to get the idea of what he's going to do.
3) Figures out ways to achieve that.

[ccllnply]

That is why i suggested you the CMS route (Content Management system). Like in Wordpress there is a simple solution for something like that:
http://premium.wpmudev.org/blog/buil...ments-website/

CMS also has an option for custom webforms and newsletters. Webforms will be sent my visitors with whatever stuff they have written in the form you put out there and newsletter is something they can subscribe and get informed about anything latest and relevant news from the particular medical field.

I don't have any suggestions for the spam thing. I use an integrated addon called MailChimp. Anyways if you don't have time to spare then it's better to finish the project in traditional HTML sense rather than experimenting with CMS now.

Ah ok, guess I should be doing more practice with Joomla and Wordpress than I am at the moment. Haven't tried them in a few weeks at this stage. I had thought they were programs that made it easier to make websites but gave you less freedom and coding ability, although lately I'm starting to think that HTML and CSS coding like I'm doing here has no advantage over Joomla or Wordpress.

And what content needs to be on front page depends on the requirements of the client because you absolutely have no idea about his field of expertise. This is how it works:
1) Client tells what exactly he wants in his website and how.
2) Designer makes a rough plan to get the idea of what he's going to do.
3) Figures out ways to achieve that.

Ok thanks mate. I'll fill up the other pages and show them to him. Then I'll find out what he wants on his home page.

[Ishan]

Ah ok, guess I should be doing more practice with Joomla and Wordpress than I am at the moment. Haven't tried them in a few weeks at this stage. I had thought they were programs that made it easier to make websites but gave you less freedom and coding ability, although lately I'm starting to think that HTML and CSS coding like I'm doing here has no advantage over Joomla or Wordpress.

Like you earlier i also thought as such and did some research on all these CMSes before trying the traditional way of building websites using Apatana Studio 3 or something like Adobe Dreamweaver.
CMS is primarily made for people who want to setup their personal business websites and such and don't know much about coding in general.What they do is that they download some pre-built theme and input all the stuff there and configure some modules like that of e-commerce etc as per their needs. All of this doesn't require much coding knowledge.

Downside for them here is that they can't modify it to their heart's content because they don't know the PHP\HTML\CSS etc. But for a professional designer it won't be a problem and he can maximize his potential using automated scripts and templates to fasten his work and then later on customize it heavily in his own way since he understands the basics of both coding and design etc.

So how much freedom he has on CMS depends entirely on his own knowledge and skills.

Ok thanks mate. I'll fill up the other pages and show them to him. Then I'll find out what he wants on his home page.

For home page you can put a slideshow panel perhaps using jQuery. Slides showing the types of physio facilities his clinic has. Like Wax treatment, electromagnetic, therapeutic ultrasound machines etc. You can get your inspiration from here perhaps:
http://orthoneurophysioclinic.com/ (this is a asp.net website though not .php, i'm just pointing it out for content ideas which you may find interesting)

[ccllnply]

So if I'm understanding you right, a professional coder can just use CMSes to make design and development of websites easier and quicker and then because they are able to understand and manipulate the code they still have the freedom and potential they would have if they used traditional coding?

I think the website looks better now. It was definitely worth getting a second opinion, especially such an educated one. I think the lower half of the page looks a lot better and I'm happy because that's the part I was really struggling with.

Web Page

I've just got one major problem now and that is that I've spent a good few hours designing the web site on my PC with a 24" monitor but when I go to test it on my mother's laptop, the change in resolution moves everything around and makes it messy and unorganised. At first I was using pixels to position thing (i.e. left:250px) but when I saw this happen I changed to percentage (i.e. left:25%) but that hasn't seemed to make any difference. I looked up solutions online and it seems to point to using margin:0 auto; but I've never come across that before. Do I simply add that into my CSS and just make my design with that in place?

I had the same issue in college during the year and it nearly cost me 20% in a test. My lecturer gave me the marks when she saw it working perfectly on my PC but she didn't even know that the change in resolution was the problem. Never mind teaching me how to solve it.

[Ishan]

So if I'm understanding you right, a professional coder can just use CMSes to make design and development of websites easier and quicker and then because they are able to understand and manipulate the code they still have the freedom and potential they would have if they used traditional coding?

Yes, moreover these are basically communities of coders. And by seeing what everyone is doing and how they made their modules will only further his knowledge. Because understanding php code is one thing and having your own creativity and ideas is completely different.

I think the website looks better now. It was definitely worth getting a second opinion, especially such an educated one. I think the lower half of the page looks a lot better and I'm happy because that's the part I was really struggling with.

Web Page

Another tip for your footer is that you need to add this line as well in your footer's CSS code:

border-top: 4px solid rgb(107, 211, 244)

This will put a 4 pixel line separator at the footer's start. Where RGB is skyblue colour hex code, which you can vary to whatever you think blends well.

I've just got one major problem now and that is that I've spent a good few hours designing the web site on my PC with a 24" monitor but when I go to test it on my mother's laptop, the change in resolution moves everything around and makes it messy and unorganised. At first I was using pixels to position thing (i.e. left:250px) but when I saw this happen I changed to percentage (i.e. left:25%) but that hasn't seemed to make any difference. I looked up solutions online and it seems to point to using margin:0 auto; but I've never come across that before. Do I simply add that into my CSS and just make my design with that in place?

I had the same issue in college during the year and it nearly cost me 20% in a test. My lecturer gave me the marks when she saw it working perfectly on my PC but she didn't even know that the change in resolution was the problem. Never mind teaching me how to solve it.

And this is something that you should've expected at the very start, it's a part of responsive web design and it's primarily categorized in 3 forms:
1) Fixed or static web design.
2) Fluid or Liquid web design.
3) Adaptive or scalable web design.

-Currently it looks like your website template is fixed, so whenever it will be opened in different devices having different resolutions it might look all messed up, especially when the width of the device or resolution is lower than what you have actually put or the values of margins and such. That is why you need to avoid higher values like "250px". Resolutions also vary in 4:3 and 16:9, 16:10 ratio patterns for widescreens.

-Liquid or fluid is based on percentages and as a result columns are relative to one another and the browser, allowing it to scale up and down fluidly.

-Adaptive is the most advanced one, which the web designers choose when the client specifically tells him that he needs a super website as he intends to use it to reach his clientele on all types of platforms. So they generally have media queries scripts which automatically controls the design and content of the website.

Like say, we made a website whose logo is super cool and of 450x200 pixels. But on handheld devices it won't look good and break the entire site pattern due to its sheer size. So here web designer can either choose to scale it down via scripts and if doesn't look good, he can use a different smaller version of logo or remove it entirely for smaller screen devices.

This is another cool tool you can rely on to see how your website is looking at different platforms:
http://quirktools.com/screenfly/