Hi all

 

A newbie to all of this. Completed a website for an Architectural practice earlier in the year but I would love to get your thoughts and views on it.

 

www.boydcodyarch.com

 

I'm an Architect myself with some very limited knowledge on HTML & CSS so please be kind. Any ideas on improved the code to make the navigation smoother would be really appreciated

 

Thanks in advance!!

I like this. It's simple and clean looking.

 

My main issue is that the text is way too small. It needs to be increased so we can actually read the content on your website

 

Other than that, very nice. You could add some jquery effects to some elements on that page to make it really nice. Just a suggestion as to how you could further improve a nice looking site.

 

Edit: On my screen, your website breaks when the browser width is less than the width of the container. Impossible to scroll to the left

Edited September 24, 201213 yr by Pete Prosper

Hi Pete - Thanks for the reply..

 

Re: the jquery effects can you be more specific? I've been asked to update the site soon so I can start to recommended improvements at this stage. Your right text size is an issue also.

 

Some of friends have commented that the 2nd menu (i.e. Projects list) flickers white before loading. I have noticed this also at times. Is there anyway I can fix this? Is the coding too large? or in worng position?

 

Not sure how to fix this - as I said I have limited knowledge on coding but glad to hear I'm doing something right - Many Thanks!

Re: the jquery effects can you be more specific? I've been asked to update the site soon so I can start to recommended improvements at this stage. Your right text size is an issue also.

 

Well as you wrote that your coding knowledge is limited, you may or may not be able to do the following. However, I noticed that your pages are split into different html files though they also have the same webpage layout. What I would do is instead of having multiple html files, I'd have one html file. That way, I could use JQuery to gradually fade content in and out as you switch between menu items (ex. built, projects, competition). This is going the extra mile though and what you have works so don't trouble yourself with that and adding other animations if it's too complicated.

 

Some of friends have commented that the 2nd menu (i.e. Projects list) flickers white before loading. I have noticed this also at times. Is there anyway I can fix this? Is the coding too large? or in worng position?

 

There isn't an issue like this in chrome, firefox, or safari. I looked through the css in your website and I didn't see anything that could cause an effect like that unless it's simply the browser loading. In any case, when I get home I'll start up the Windows laptop and take a look at it in Internet Explorer; at the moment I'm working so I'm limited.

Edited September 24, 201213 yr by Pete Prosper

Well as you wrote that your coding knowledge is limited, you may or may not be able to do the following. However, I noticed that your pages are split into different html files though they also have the same webpage layout. What I would do is instead of having multiple html files, I'd have one html file. That way, I could use JQuery to gradually fade content in and out as you switch between menu items (ex. built, projects, competition). This is going the extra mile though and what you have works so don't trouble yourself with that and adding other animations if it's too complicated.

 

I have seen examples of this so I know what you mean. Smoother, sexier (for want of a better word) nagivation is something I would like to know more about for this website and for others im currently working on. I have googled to see can I get examples but not sure what buzz/search words I should be using. Any further direction on this would be appreicated - even links to good examples would be benefical.

 

Regarding the loading issue. I have since checked the site on Safari and it works fine. Maybe it is a loading issue on IE. Would obviously like to know how to fix this or even understand the issue for future websites.

I know I'm sorry! Awful coding but I couldn't get a consistent enough spacing between both menus without spiltting the 'menu' into two so I felt I had to cheat the system! Good find though!

 

Anything else stand out? lol

You don't even have to split the menu. Just remove all those fake anchors and try this on your css:

 

 

a[href="competitions.html"] {
   margin-bottom:200px;
}

You don't even have to split the menu. Just remove all those fake anchors and try this on your css:

 

 

a[href="competitions.html"] {
margin-bottom:200px;
}

 

Many thanks - Did not know I could achieve this so easily.

 

Quick Question to all - Do browers render pixel (px) sizes differently? I ask because sometimes some of the positioning of the content on my other sites looks different on other browsers. I like things to line up properly so it can be really annoying at times.

Edited September 25, 201213 yr by redned99

No, a pixel is a pixel for every browser. If you're refering to IE, the problem is that our old friend doesn't treat the box-model in a proper way. See this http://en.wikipedia....r_box_model_bug

 

edit: And remember, don't try to fix things with non semantic markup. You can achieve almost everything with css and google is your friend here

Edited September 25, 201213 yr by ocorreiododiogo

edit: And remember, don't try to fix things with non semantic markup. You can achieve almost everything with css and google is your friend here

 

Not sure what you mean when you say 'non semantic markup'. Can you elaborate?

 

To be brutally honest I use CSS 'top' & 'left' commands as x and y co-ords to help position all my content. Its slow and probably not what I should be doing but it works for me.

Nonsemantic markup, is all those elements that don't bring any content to your html. In some situations you can't avoid them, but they are becoming more rare

 

I didn't have a good at your stylesheet (and I'm afraid to do it ). If you understand how a browser works, you will have less trouble to design a website. Study how the vertical flow works, and the difference of block and inline elements. Then, override those caracteristics of the elements with css, when needed. take some time to read an introdutory book to understand all those aspects. This one, for example http://www.zeldman.com/dwws/

Many thanks - Did not know I could achieve this so easily.

 

Quick Question to all - Do browers render pixel (px) sizes differently? I ask because sometimes some of the positioning of the content on my other sites looks different on other browsers. I like things to line up properly so it can be really annoying at times.

 

You can use a css reset stylesheet to eliminate quite a few browser inconsistencies. You can read more about it here:

 

http://meyerweb.com/...ools/css/reset/

 

I have seen examples of this so I know what you mean. Smoother, sexier (for want of a better word) nagivation is something I would like to know more about for this website and for others im currently working on. I have googled to see can I get examples but not sure what buzz/search words I should be using. Any further direction on this would be appreicated - even links to good examples would be benefical.

 

Well it's not quite as simple as using a plugin or a bit of code that's already been designed. In fact, the code to do this would be pretty simple, but you'd just need to know how to write Javascript and JQuery (a popular javascript library) code. I had an example of a website which did this, but it was taken down... so I'm going to hunt for another one

Edited September 25, 201213 yr by Pete Prosper

I didn't have a good at your stylesheet (and I'm afraid to do it ). If you understand how a browser works, you will have less trouble to design a website. Study how the vertical flow works, and the difference of block and inline elements. Then, override those caracteristics of the elements with css, when needed. take some time to read an introdutory book to understand all those aspects. This one, for example http://www.zeldman.com/dwws/

 

Yea not sure it is a good idea you look CSS sheet - It might make you angry! Thanks for the advice and I'll definitely look into block and inline elements. I have obviously seen them before but you are right I'm not actually sure how to use them

 

You dont have any idea why the second menu flickers when loading? It drives me insane everytime I browse the site. Seems to be an IE issue

On my large screen I find it impossibly small to read and I have "20/20 vision"... but I see you're trying to change that!

You can use a css reset stylesheet to eliminate quite a few browser inconsistencies. You can read more about it here:

 

http://meyerweb.com/...ools/css/reset/

 

Thanks Peter. I assume I cut and paste to the start of my sytlesheet? I was told to always use the following *{ padding: 0px; margin: 0px;} so I'm assuming this is an extended version of this to eradicate browser issues.

 

Well it's not quite as simple as using a plugin or a bit of code that's already been designed. In fact, the code to do this would be pretty simple, but you'd just need to know how to write Javascript and JQuery (a popular javascript library) code. I had an example of a website which did this, but it was taken down... so I'm going to hunt for another one

 

I know what you are talking about but an good example would be great. Please dont waste anything on this though. I'm sure you have other things to be doing right now.

 

Thanks again for your help!

You dont have any idea why the second menu flickers when loading?

 

I can't reproduce this in any browser

On my large screen I find it impossibly small to read and I have "20/20 vision"... but I see you're trying to change that!

 

Yea its an Architect thing - something about text looking smaller Architects think it looks better and means people actually have to concentrate on what they are reading.

 

Thanks for the feedback - appreciate your comments and please let me know if you have issues with anything you may see

I can't reproduce this in any browser

 

Its seem to be a pre-load issue. If you delete your cache related to the site you will see it when you visit the site again. I totally understand if you do not wish to do that though... Actaully just checked it again - click on 'Projects' then on a project you have not previously visited and you will see the issue

 

First time users definitely experience the problem

I tried in several browsers. I didn't visit the site on all of them before for sure... and still didn't see this problem. Anyone can reproduce this?

 

Yea its an Architect thing - something about text looking smaller

Don't let Architects tell you what's better for design, or you'll end up using grey and orange! Oh, you already did

 

edit: seriously, it's too small. Tell them that not all their clients see well, and that they won't be very happy for making this effort. They say people actually have to concentrate on what they are reading. I say they won't even start reading.

Edited September 25, 201213 yr by ocorreiododiogo

I tried in several browsers. I didn't visit the site on all of them before for sure... and still didn't see this problem. Anyone can reproduce this?

 

 

Don't let Architects tell you what's better for design, or you'll end up using grey and orange! Oh, you already did

 

edit: seriously, it's too small. Tell them that not all their clients see well, and that they won't be very happy for making this effort. They say people actually have to concentrate on what they are reading. I say they won't even start reading.

 

Yea good point. I'm due to update the site soon for them so will definitely amend the font size then. My only concern is it may have implications on the design of the site but thats my issue.

 

I like the grey and orange but I suppose I would as I'm an architect too...

 

Yea the flickering - seems to be only an issue on IE. Safari & Firefox is nice and smooth....

I like the grey and orange but I suppose I would as I'm an architect too

 

Ah!!

Edited September 25, 201213 yr by ocorreiododiogo

Well it's not quite as simple as using a plugin or a bit of code that's already been designed. In fact, the code to do this would be pretty simple, but you'd just need to know how to write Javascript and JQuery (a popular javascript library) code. I had an example of a website which did this, but it was taken down... so I'm going to hunt for another one

 

Hi Pete - thanks for all your input regarding this site.

 

Just thought I'd let you know I'm actually working on my portfolio site at the moment and have posted a query on another section of this site which touched on something we were discussing in this topic. I would appreciate it if you could have a look at it:

 

http://www.webdesignerforum.co.uk/topic/65169-simple-navigation-can-anybody-help-me/

Not sure what you mean when you say 'non semantic markup'. Can you elaborate?

 

HTML is a semantic language, meaning the structure of elements (or "tags") you use should describe the document.

 

A menu is a list of links, so you should mark it up like this (in your case two lists for two menus):

 

<ul class="menu" id="menu1">
 <li><a href="built.html" alt="Projects">Built</a></li>
 <li><a href="projects.html" alt="Projects">Projects</a></li>
 <li><a href="competitions.html" alt="Competitions">Competitions</a></li>
</ul>
<ul class="menu" id="menu2">					
 <li><a href="awards.html" alt="Awards">Awards</a></li>
 <li><a href="exhibitions.html" alt="Exhibitions">Exhibitions</a></li>
 <li><a href="lectures.html" alt="Lectures">Lectures</a></li>
 <li><a href="practice.html" alt="Practice">Practice</a></li>
 <li><a href="publications.html" alt="Publications">Publications</a></li>
 <li><a href="contact.html" alt="Contact">Contact</a></li>
</ul>

 

You can add styles that are common to both menus with the class "menu", and styles that are specific to one or the other by using their IDs.

Edited October 14, 201213 yr by Renaissance-Design

Nice images and lovely clean design. Well done.

 

Fonts are too small though, and maybe you could increase the content div.

HTML is a semantic language, meaning the structure of elements (or "tags") you use should describe the document.

 

A menu is a list of links, so you should mark it up like this (in your case two lists for two menus):

 

<ul class="menu" id="menu1">
<li><a href="built.html" alt="Projects">Built</a></li>
<li><a href="projects.html" alt="Projects">Projects</a></li>
<li><a href="competitions.html" alt="Competitions">Competitions</a></li>
</ul>
<ul class="menu" id="menu2">					
<li><a href="awards.html" alt="Awards">Awards</a></li>
<li><a href="exhibitions.html" alt="Exhibitions">Exhibitions</a></li>
<li><a href="lectures.html" alt="Lectures">Lectures</a></li>
<li><a href="practice.html" alt="Practice">Practice</a></li>
<li><a href="publications.html" alt="Publications">Publications</a></li>
<li><a href="contact.html" alt="Contact">Contact</a></li>
</ul>

 

You can add styles that are common to both menus with the class "menu", and styles that are specific to one or the other by using their IDs.

 

Many thanks for your comments and duly noted. I'm only new to web design and really want to write properly so the more comments the better.

 

Just about to start into my portfolio site and I promise I will use ul's and il's!

Nice images and lovely clean design. Well done.

 

Fonts are too small though, and maybe you could increase the content div.

 

You are not the first to comment of the font size (see comments above). It is something they wanted but I am due to update the site for them soon and will definitely highlight this issue to them.

 

Thanks for the feedback - much appreciated!

Edited October 14, 201213 yr by redned99

Hi Pete - thanks for all your input regarding this site.

 

Just thought I'd let you know I'm actually working on my portfolio site at the moment and have posted a query on another section of this site which touched on something we were discussing in this topic. I would appreciate it if you could have a look at it:

 

http://www.webdesign...nybody-help-me/

 

Looks like I got to the party late. I'm glad you were able to get a response and good luck