Jump to content

quick site critique


AnthonyJ

Recommended Posts

Hi guys,

 

I do not know what your patience level is but do you have a moment to peek at www.arjcommunications.com

Would you consider this site a good beginning for a newbie or ...."Buddy you need to practice your skills"

If you do not have the time I certainly understand.

Link to comment
Share on other sites

  • Replies 99
  • Created
  • Last Reply

Top Posters In This Topic

As per your previous post, my patience level is probably just like the Holy Spirit's, who might suggest you take another puff of whatever you were smoking and let him have one too....

 

Are you looking for a coding critique or a design critique? Andrea will knock you into shape with the coding. As for the design, I would say it's a little bland, needs a little more imagination and more art. At least you have not fallen into the newb trap of flashing scrolling things. However your choice of font for the header is not very legible, the logo definitely needs work and the navigation would look better on one line only with a rollover effect. Also be very careful of spelling mistakes, they give a bad impression and running a spell check or a validation check is no big deal.

Link to comment
Share on other sites

I agree wit virtual about the font of the company name and logo and the navigation (alignment, missing hover) and definitely the spellcheck. ("Gimmic' is properly spelled 'gimmick' and the plural is NOT gimmic's. And when we ask ourselves, we should probably have a question mark.)

 

The photos of your 'slideshow' do not add any information and/or value to the content of teh site, the keyboard pic looks skewed, and it and the one with the 01s are not lined up right.

 

I think the bullet list of your services would look better it if was indented further, and your link to "What we do" would be better recognizable as such if it were underlined. When I first looked, I thought there was something missing, until I realized it was indeed a link.

 

Then there are the tables - they are no longer used for layout - tabular data only. Your navigation itself is in a table that consists of just one cell. Not good practice.

 

Then, as dianikol said - all that CSS in the header? And when you need to make a change, you have to go into every single page and make the same change how many times? Use external sylesheet(s). Also, it's no longer necessary to hack for anything older than IE6, and even then it's always better to use conditional comments, not hacks.

 

Get rid of all the tables (unless you are actually displaying tabular data)

Move all the CSS into an external sheet - actually, considering how much you have, you might want to break it up in more than one).

Run a validator to help you catch coding mistakes.

Link to comment
Share on other sites

You guy's are fantastic!!!

 

The only thing is I really do not understand. I know you can see that I am using WordPress but all of the CSS, tables, and hacking, I really didn't know I was doing it. Basically, I went to the theme forum and looked for similar questions and ( stupidly) copied and pasted code where they said and pretty much got the desired effect... So realizing that I couldn't nail down certain aspects( my nav bar(what is rollover anyway))I went looking for people who can really help me. And I found you guys. So I paid my yearly subscription and got started at the beginning HTML and am working my way down to CSS and will get to PHP. That said I don't know how far you all are prepared to go as far as guiding me to correct the problems you see. Truthfully I am overwhelmed by your responses. Pleased beyond words for sure, but overwhelmed. So if you guy's are up for it where do I start, and what lesson should I watch to understand what you're talking about?

 

Also, I just read about validating before asking for a review. I am so sorry for not seeing that first and wasting time,

my apologies.

Link to comment
Share on other sites

By rollover, we mean how links change color/appearance as you move the cursor over them.

 

Keep working on the beginning HTML and CSS - there's also a good series on creating Wordpress templates. Personally, I don't learn much from copying / pasting other peoples stuff - it may work, but I usually won't know why, nor can I fix it if it doesn't (well, no sometimes I can, but it took a bit).

 

But generally, don't worry about asking questions - that's why we're here - to answer them.

Link to comment
Share on other sites

Thanks Andrea,

 

I will complete the HTML CSS pt1 series and see if I can knock out the nav bar issue... I could not get the (if I am using the correct wording) correct padding down. I would increase and decrease the padding and that wouldn't work so I would increase and decrease the font size and that didn't work so I left it. BTW, what tables are you referring to?

Link to comment
Share on other sites

You have several tables, but here I was referring to this one:

 

<div id="menu1">
<table cellpadding="0" cellspacing="0" style="margin: 0 auto">
<tr>
<td align="center"> 
<ul id="rmenu2" class="clearfix rMenu-hor rMenu"> 
<li class="page_item page-item-12 current_page_item"><a href="[url="view-source:http://arjcommunications.com/"]http://arjcommunications.com/[/url]" ><span>Home</span></a></li> 
<li class="page_item page-item-155"><a href="[url="view-source:http://arjcommunications.com/?page_id=155"]http://arjcommunications.com/?page_id=155[/url]" ><span>What We Do</span></a></li>
<li class="page_item page-item-36"><a href="[url="view-source:http://arjcommunications.com/?page_id=36"]http://arjcommunications.com/?page_id=36[/url]" ><span>Web Copywriting</span></a></li> 
<li class="page_item page-item-43"><a href="[url="view-source:http://arjcommunications.com/?page_id=43"]http://arjcommunications.com/?page_id=43[/url]" ><span>Website Design</span></a></li> 
<li class="page_item page-item-99"><a href="[url="view-source:http://arjcommunications.com/?page_id=99"]http://arjcommunications.com/?page_id=99[/url]" ><span>Social Media</span></a></li> 
<li class="page_item page-item-197"><a href="[url="view-source:http://arjcommunications.com/?page_id=197"]http://arjcommunications.com/?page_id=197[/url]" ><span>Samples</span></a></li> 
<li class="page_item page-item-33"><a href="[url="view-source:http://arjcommunications.com/?page_id=33"]http://arjcommunications.com/?page_id=33[/url]" ><span>Have a Question</span></a></li> 
<li class="page_item page-item-29"><a href="[url="view-source:http://arjcommunications.com/?page_id=29"]http://arjcommunications.com/?page_id=29[/url]" ><span>Testomonials</span></a></li>
</ul>
/td>
</tr>
</table>
</div> 

 

All you really need is the list itself, and there's also no need for those span tags - any styling needed can be done via the ul id.

Link to comment
Share on other sites

Why do you have 200% width set on "h1.blogtitle, h2.blogtitle" ? It's making a scrollbar at the bottom of your page :)

 

Venturing over 100% in css is pretty dangerous except for things like Line-height, font-size etc. Width/height wise it's really not recommended to use values over 100%.

Edited by BeeDev
Link to comment
Share on other sites

BeeDev,

 

I think I set it that way originally to have the blog title span across the whole page. I didn't have that black border at the time. It was one big landscape. But I changed it to 100% and the scroll bar is gone now. Thanks.

 

Ericlenhard,

 

I get it...Don't quit my day job. As far as the images, I don't know how to customize the slide show MM box. Honestly, I wish I could because I could use better images. My wife doesn't like any of them but I felt I needed to put something there that at least spoke to the digital world. Mission failed I guess.

 

Andrea,

 

I do not have the creds to say this but I think the Atahualpa theme is adding that code. I just learned what a span tag is last week. I simply went into the WP back end added a page and started typing in the window. I promise you, I did not add any HTML.

Link to comment
Share on other sites

Andrea,

 

I was e-mailing Stefan about a mentoring program and with the new videos and courses he is preparing, it is taking up all of his time. He did say I may ask one of the advanced members and you are the one he listed. I am looking for someone who can set aside 30 minutes from time to time to bounce questions off of and have that type of mentor-student relationship. Of course compensation would be required. Is this something you would be interested in?

Link to comment
Share on other sites

I'd be happy to take your money --- but alternatively, this forum is a great place to get help - and you'd have more than one mentor (free of charge). If you're still looking for a more private avenue, I'll be happy to help you out, but I' about to leave for vacation, so I cannot promise and set time for about the next three weeks.

 

For starters, I recommend working on (as is building by yourself from scratch following tutorials, maybe) some basic webpages or sites. The one you have, code-wise, is a giant and a nightmare. Looks like it's kind of a patchwork of stuff collected from different places, and it's hard for someone who knows what they are doing to make sense of those endless lines of code and to get a grasp of what belongs to what.

 

Let me know if you still want to pursue a more private tutoring, of if you want to start out via the forum.

Link to comment
Share on other sites

I definitely would like to pursue private tutoring. But go on vacation and have a good time. Let me know when you get back and we can go from there.

I want to get up to speed as fast as possible. I should have completed all the tutorials in the html and css series by the time you get back. BTW, do you have a preference between Dreamweaver and any other editor? I took Ultra Edit out for a test drive and for $50.00 seemed ok to me. But I now found notepad ++ and for free works just fine. I never really had the chance to use D.W. but I know how popular it is.

Link to comment
Share on other sites

I took Ultra Edit out for a test drive and for $50.00 seemed ok to me. But I now found notepad ++ and for free works just fine. I never really had the chance to use D.W. but I know how popular it is.

Notepad++ will probably work fine for you. That's the program I usually use when coding on Windows. I personally don't like Dreamweaver all that much, since I've found it is slow and has a lot of functionality that I don't need. That said, it's pretty useful for some things that are harder to visualize, like complicated table layouts or image maps.

Link to comment
Share on other sites

I tried and I give up. There is probably either a padding involved in one of the surrounding containers, or the navigation table itself just isn't wide enough. Maybe someone with a better eye than mine can zoom in on the issue.

 

This is a pretty straight-forward design, it should not need hundreds of lines of CSS code - and it certainly needs no tables. I know you didn't actually code this site, but if you're trying to learn, I suggest you give up on this mess and just start from scratch.

 

Start over, we'll help. You can even recreate pretty much what you have there, but much much cleaner.

Link to comment
Share on other sites

Not exactly what I was prepared to read. That said, where do I start? Can I still run Wordpress or is this the beginning of my Jedi training and I have to do this from scratch? While I await your response, I will get going on the Wordpress from scratch videos...

Link to comment
Share on other sites

It looks like the navigation table itself isn't wide enough. This fixes it:

 

-- modify #menu1 to remove the left/right dashed borders

-- modify #wrapper to have a max-width of 1125px

 

That said... The code you are working with seems to be a bit of a mess. You have a layout that should expand/contract, based on the size of the viewer's browser, but the main navigation is a fixed size that is basically the same as the max-width set on #wrapper, which defeats the point of a fluid layout. You have a lot of unnecessary elements in the page (like, for example, there's no need for both #wrapper and #container) and unnecessary tables (like the table that surrounds your navigation.) Your main CSS is all inline, within the page, rather than in an external file (which basically defeats the point of CSS?)

 

Personally, if you haven't already, I would start with the basic HTML/CSS tutorials here: http://www.killervideostore.com/video-courses/web-design-1.php. The Wordpress series is good, but Wordpress is built on a mix of HTML/CSS/PHP, and if you don't know the HTML/CSS basics, it'll make things more difficult. If you have already done the Web Design 1 course, keep practicing and start the Wordpress course, and the more you do this the easier it will get.

Link to comment
Share on other sites

Then I suggest you view some basic HTML and CSS videos, and once you have a handle on that, view the Wordpress Basic and the Wordpress Theme from Scratch videos and follow along the 'from scratch' one and recreate your theme.

 

Am I correct in thinking that you want to learn webdesign in general, or are you just interested in modifying your one site?

Link to comment
Share on other sites

Good morning,

 

You are correct in what you are thinking....I am half way finished with WP from scratch. I would not go as far as to say my head is spinning...I get what he is doing. I am just getting caught up on the syntax of PHP. I don't get the () just before he closes a PHP tag....Also there is video called intro to API but he never really deals with it. He references it but...I understand that it is coding for designers but...Do I need it? How do I get it? What do I do with it?

I am sure you saw Ben's reply, I would like to keep that site live while I build the new one. Now both of you have mentioned tables that do not need to be there and it starting to become an inside joke with me 'cuz I still don't know what you guys are talking about..What tables? LOL...Please I mean no disrespect...I know you two know they're there, and one day soon so will I!

Link to comment
Share on other sites

I don't know PHP, and it's not necessary for the Wordpress theme - it would help, but without, I just follow the instructions.

 

Here is some info on the Wordpress API http://codex.wordpress.org/WordPress_API%27s = but I couldn't tell you what this is about - it's not needed for the basic template.

 

Good that Ben found a fix - I'm pretty good at the basics, but Ben does all kinds of fancy design and programming, etc.

 

If you look at the html code on your site - it's waaaay down there following all those hundreds of lines of CSS (that should not even be in your head section), you'll see the table code:

 

(Look for 'table' 'tr' 'td' 'colspan' 'rowspan', 'colgroup', etc - those are table tags)

 

 

<body class="home page page-id-12"> <div id="wrapper"> <div id="container">

<table id="layout" border="0" cellspacing="0" cellpadding="0"> <colgroup> <col class="colone" /><col class="coltwo" /> <col class="colthree" /></colgroup>  	<tr>  		<!-- Header --> 		<td id="header" colspan="3">  		<table id="logoarea" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td valign="middle" class="logoarea-logo"><a href="[url="view-source:http://arjcommunications.com/"]http://arjcommunications.com/[/url]"><img class="logo" src="[url="view-source:http://arjcommunications.com/wp-content/themes/atahualpa/images/arj331.png"]http://arjcommunications.com/wp-content/themes/atahualpa/images/arj331.png[/url]" alt="ARJ Communications & Technologies" /></a></td><td valign="middle" class="logoarea-title"><h2 class="blogtitle"><a href="[url="view-source:http://arjcommunications.com/"]http://arjcommunications.com/[/url]">ARJ Communications & Technologies</a></h2><p class="tagline">On the leading edge</p></td></tr></table> <div id="menu1"><table cellpadding="0" cellspacing="0" style="margin: 0 auto"><tr><td align="center"> 				<ul id="rmenu2" class="clearfix rMenu-hor rMenu"> <li class="page_item page-item-12 current_page_item"><a href="[url="view-source:http://arjcommunications.com/"]http://arjcommunications.com/[/url]" ><span>Home</span></a></li> <li class="page_item page-item-155"><a href="[url="view-source:http://arjcommunications.com/what-we-do-2/"]http://arjcommunications.com/what-we-do-2/[/url]" ><span>What We Do</span></a></li> <li class="page_item page-item-36"><a href="[url="view-source:http://arjcommunications.com/web-copywriting/"]http://arjcommunications.com/web-copywriting/[/url]" ><span>Web Copywriting</span></a></li> <li class="page_item page-item-43"><a href="[url="view-source:http://arjcommunications.com/web-site-design/"]http://arjcommunications.com/web-site-design/[/url]" ><span>Website Design</span></a></li> <li class="page_item page-item-99"><a href="[url="view-source:http://arjcommunications.com/social-media/"]http://arjcommunications.com/social-media/[/url]" ><span>Social Media</span></a></li> <li class="page_item page-item-197"><a href="[url="view-source:http://arjcommunications.com/samples/"]http://arjcommunications.com/samples/[/url]" ><span>Samples</span></a></li> <li class="page_item page-item-33"><a href="[url="view-source:http://arjcommunications.com/contact-us/"]http://arjcommunications.com/contact-us/[/url]" ><span>Have a Question</span></a></li> <li class="page_item page-item-29"><a href="[url="view-source:http://arjcommunications.com/what-others-say-about-arj-communications/"]http://arjcommunications.com/what-others-say-about-arj-communications/[/url]" ><span>Testomonials</span></a></li> </ul></td></tr></table></div>  <div id="imagecontainer" class="header-image-container" style="background: url('http://arjcommunications.com/wp-content/themes/atahualpa/images/header/keyboard wht bkgrnd.png') top center no-repeat;"><div class="clickable"><a class="divclick" title="ARJ Communications & Technologies" href ="[url="view-source:http://arjcommunications.com/"]http://arjcommunications.com/[/url]"> </a></div></div> 		</td> 		<!-- / Header -->  	</tr>  	<!-- Main Body -->	 	<tr id="bodyrow">  				<!-- Left Sidebar --> 		<td id="left"> 			<div id="text-3" class="widget widget_text">			<div class="textwidget"></div> 		</div> 		</td> 		<!-- / Left Sidebar --> 		 				  		<!-- Main Column --> 		<td id="middle">  	  		 		 <div class="post-12 page type-page status-publish hentry post odd" id="post-12">  <div class="post-headline">		<h1>Home</h1> 		</div>  <div class="post-bodycopy clearfix"><p style="text-align: left;">ARJ Communications and Technologies is a web based freelance consulting entity.</p> <p>We specialize in web design and the corresponding web copy (written  content tailored to a specific website) but also offer these services:</p> <ul> <li>Article/Content Writing</li> <li>Ghost Blogging</li> <li>Case Studies</li> <li>E-Mail Auto-Responders</li> <li>Search Engine Optimization (SEO)</li> <li>Social Media Management</li> <li>Video Scripting</li> <li>White Papers</li> </ul> <p style="text-align: left;"> </p> <p style="text-align: left;">There is no arguing that we are in the digital age.</p> <p>That said, whatever medium you are using, web, print, social media, or otherwise, you need the right words for the right campaign.</p> <p>Whether you are selling a service or a product, your message has to be compelling without raising doubt.</p> <p>We all have been on the other side of the copy and when it is all said and done we all ask ourselves “What’s in it for me?” Right?</p> <p>We ask ourselves ” What do I have to <strong>give</strong> to <strong>get</strong> product X or service X”</p> <p>We all strive to find the gimmic(s) behind the promise(s).</p> <p>We here at ARJ Communications & Technologies, located in the Twin Cites of Minnesota, continue to move forward in the latest sciences to keep our clients on the leading edge of communication techniques.</p> <p>No gimmic’s. No false promises. Integrity is the backbone at ARJC&T.</p> <p>The web copy writing and web design services provided by ARJC&T have been taught by industry leaders.</p> <p>Insuring standards of excellence not found by just any freelance copy writing & web design service.</p> <p>Contact us today and let us help move you forward.</p> <p><a title="What We Do" href="[url="view-source:http://arjcommunications.com/?page_id=155"]http://arjcommunications.com/?page_id=155[/url]">What we do</a></p> <p style="text-align: center;"><span style="font-family: Calibri;"> </span></p> </div>   </div><!-- / Post -->						 	 	  		 			    </td> <!-- / Main Column -->  <!-- Right Inner Sidebar -->  <!-- Right Sidebar --> <td id="right"> 	<div id="text-4" class="widget widget_text">			<div class="textwidget"></div> 		</div> </td> <!-- / Right Sidebar -->  </tr> <!-- / Main Body --> <tr>  <!-- Footer --> <td id="footer" colspan="3">     <p>     Copyright © 2011 <a href="[url="view-source:http://arjcommunications.com/"]http://arjcommunications.com/[/url]">ARJ Communications & Technologies</a> - All Rights Reserved    </p>               <script type='text/javascript' src='[url="view-source:http://arjcommunications.com/wp-content/plugins/contact-form-7/jquery.form.js?ver=2.52"]http://arjcommunications.com/wp-content/plugins/contact-form-7/jquery.form.js?ver=2.52[/url]'></script> <script type='text/javascript' src='[url="view-source:http://arjcommunications.com/wp-content/plugins/contact-form-7/scripts.js?ver=2.4.4"]http://arjcommunications.com/wp-content/plugins/contact-form-7/scripts.js?ver=2.4.4[/url]'></script> </td>  </tr> </table><!-- / layout --> </div><!-- / container --> </div><!-- / wrapper --> </body> </html>

 

Link to comment
Share on other sites

OK....If you take a look at the home page it looks stupid. Here is the code that I am using to get my gradient but as you can see there is some sort of repeat going on.....Can you tell me what to get rid of for a smooth background like before?

 

background: #d0e4f7; /* Old browsers */

background: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Opera11.10+ */

background: -ms-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* IE10+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 ); /* IE6-9 */

background: linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* W3C */

Link to comment
Share on other sites

I am just getting caught up on the syntax of PHP. I don't get the () just before he closes a PHP tag....Also there is video called intro to API but he never really deals with it. He references it but...I understand that it is coding for designers but...Do I need it? How do I get it? What do I do with it?

That isn't actually Wordpress specific -- that's just basic PHP. I'd suggest taking a look at the Beginner's PHP videos within the KS University, and specifically the videos on PHP Functions within PHP > Misc PHP Videos. The "()" indicates you are calling a PHP function.

 

For the flat background that you had before, you need to remove the "linear-gradient" lines:

 

background: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* W3C */ 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...