My New Portfolio Site

Phreaddee

Super Moderator
Staff member
it loads quite slow and the slideshow is pointless.
certainly doesnt need to be on everypage
and I figure with a <head> that size, it should be doing something fancy.
alas it doesnt.
and $299 come on man, your killing us and yourself.
 

bowenac

New Member
it loads quite slow and the slideshow is pointless.
certainly doesnt need to be on everypage
and I figure with a <head> that size, it should be doing something fancy.
alas it doesnt.
and $299 come on man, your killing us and yourself.

Yea I am hosting it on my own server... which could be why. I have plans for the slider its just acting as a placeholder right now though.

Also $299 would be a pretty basic wordpress site. A couple pages, I don't see how or why anyone should be charging more than that. I could bust something like that out in a day or two.
 

chrishirst

Well-Known Member
Staff member
Your typography needs some work.

Your choice of colours and the small letter spacing combined with the lack of "leading" on the font in use makes the text difficult to read.

And WHY do you have that huge cunk of image taking up half of the space on the page.

Verdict: A definite case of developer "kewl" over design and usability.
 

bowenac

New Member
Your typography needs some work.

Your choice of colours and the small letter spacing combined with the lack of "leading" on the font in use makes the text difficult to read.

And WHY do you have that huge cunk of image taking up half of the space on the page.

Verdict: A definite case of developer "kewl" over design and usability.

Interesting, I do appreciate your feedback. I don't have a hard time reading it and have not had anyone else that has viewed this page mention anything about it. The image slider is a personal preference and will be doing something with it in time. It's no where near half the page. However I have thought about some letter spacing because of the type of font used. Thanks for the suggestion.

I see you criticize people about sliders and other jquery all the time about developers and cool factor haha. I just don't get why you mention this in everyone's feedback. It's like you highly dislike the ease of jquery packages or something. When in fact a lot of people really like them, why re invent the wheel? Just about everyone I talk to about a web site they all mention how they want a banner/image slider.

Lack of "leading" again personal preference that I don't agree with. But again appreciate the feedback this is a feedback request. But I do disagree because I do not think it is needed. I hardly ever see leading sentences. Some of the most amazing websites I have seen don't ever use it.

Since I see this from you more often than not... I just have to ask. Are you a graphic designer? It seems that maybe you dislike the use of "KEWL" features on websites. Maybe you feel this has an effect on your work or something I don't know. I see a few members here always crapping on peoples use of jquery sliders, gallerys, and other uses. So whats the deal why do you dislike them so much? Hope I am not coming off as rude, honestly not what I am trying to do just trying to understand your logic.
 
Last edited:

Phreaddee

Super Moderator
Staff member
Lack of "leading" again personal preference that I don't agree with. But again appreciate the feedback this is a feedback request. But I do disagree because I do not think it is needed. I hardly ever see leading sentences. Some of the most amazing websites I have seen don't ever use it.
"leading" is a graphic design term... to dumb it down for you it is line-height.
your site could certainly use a larger line-height for readability.
almost all sites in the world have some form of leading applied. it is the vertical rhythm of your site.
It's no where near half the page.
you are right its closer to two thirds, and everything above the fold on my 13" laptop.

everyone I talk to about a web site they all mention how they want a banner/image slider.
but why? they never tell you why, they want one because everyone else has one. that doesnt in any way validate them. same with folk who want a business facebook page(because it helps with traffic), but then NEVER update them, therefore rendering it totally useless. image sliders are the same. they dont actually add anything to the site, certainly don't help it to look "original". If you are going to add an image slider it has to be excellent, and it has to be a call to action on each and every slide. otherwise get rid of it.
why do we hate sliders so much? 80million wordpress sites and 90% of them look the same, and they all have this "ultra cool" image slider. been there done that. years ago.no doubt chris too has seen them for years and years as well. try something different. at least don't make it essentially your entire site. as I said, each and every page with this on it is just overkill.

Yea I am hosting it on my own server... which could be why
possibly, but unoptimised images and a massive head probably are more relevant factors.
 

bowenac

New Member
"leading" is a graphic design term... to dumb it down for you it is line-height.
your site could certainly use a larger line-height for readability.
almost all sites in the world have some form of leading applied. it is the vertical rhythm of your site.

you are right its closer to two thirds, and everything above the fold on my 13" laptop.


but why? they never tell you why, they want one because everyone else has one. that doesnt in any way validate them. same with folk who want a business facebook page(because it helps with traffic), but then NEVER update them, therefore rendering it totally useless. image sliders are the same. they dont actually add anything to the site, certainly don't help it to look "original". If you are going to add an image slider it has to be excellent, and it has to be a call to action on each and every slide. otherwise get rid of it.
why do we hate sliders so much? 80million wordpress sites and 90% of them look the same, and they all have this "ultra cool" image slider. been there done that. years ago.no doubt chris too has seen them for years and years as well. try something different. at least don't make it essentially your entire site. as I said, each and every page with this on it is just overkill.


possibly, but unoptimised images and a massive head probably are more relevant factors.

Points taken... my understanding of "leading" was different spacing before each sentence.

Which images do you think are unoptimised? And massive header... must be the blank theme I am using for wordpress then. What exactly are you referring to... assuming the slider and jscript?
 

Phreaddee

Super Moderator
Staff member
<head>
HTML:
<!doctype html> 
<!--[if lte IE 8]><html class="no-js ie7 lte8" dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/"><![endif]--> 
<!--[if IE 8]><html class="no-js ie8" dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/"><![endif]--> 
<!--[if IE 9]><html class="no-js ie9" dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/"><![endif]--> 
<!--[if !(IE)]><html class="no-js" dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/"><![endif]--> 
<head> 
<meta charset="UTF-8" /> 
<meta name="viewport" content="width=device-width" /> 
<meta name="Description" content="" /> 
<title> Web Design for the PNW Washington OregonPNW-WEB</title> 
<link rel="pingback" href="http://www.pnw-design.com/xmlrpc.php" /> 
<link rel="stylesheet" href="http://www.pnw-design.com/wp-content/themes/PNWWEB/css/normalize.css" media="all" />  
<link rel="stylesheet" href="http://www.pnw-design.com/wp-content/themes/PNWWEB/css/mobile.css" media="screen and (max-device-width: 1000px) " />    
<link rel="stylesheet" href="http://www.pnw-design.com/wp-content/themes/PNWWEB/style.css" media="all" /> 
<script src="http://www.pnw-design.com/wp-content/themes/PNWWEB/js/prefixfree.min.js"></script> 
<script src="http://www.pnw-design.com/wp-content/themes/PNWWEB/js/modernizr.custom.js"></script> 
<!--[if (gte IE 6)&(lte IE 8)]> <script src="http://www.pnw-design.com/wp-content/themes/PNWWEB/js/selectivizr.js"></script> <![endif]--> 
       <!-- Add jQuery library -->   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>  
  <!-- Add mousewheel plugin (this is optional) -->   <script type="text/javascript" src="http://www.pnw-design.com/wp-content/themes/PNWWEB/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>   
 <!-- Add fancyBox -->   <link rel="stylesheet" href="http://www.pnw-design.com/wp-content/themes/PNWWEB/fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />   
<script type="text/javascript" src="http://www.pnw-design.com/wp-content/themes/PNWWEB/fancybox/source/jquery.fancybox.pack.js?v=2.0.6"></script>   
 <!-- Optionally add helpers - button, thumbnail and/or media -->   
<link rel="stylesheet" href="http://www.pnw-design.com/wp-content/themes/PNWWEB/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />   
<script type="text/javascript" src="http://www.pnw-design.com/wp-content/themes/PNWWEB/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>   
<script type="text/javascript" src="http://www.pnw-design.com/wp-content/themes/PNWWEB/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>       
<link rel="stylesheet" href="http://www.pnw-design.com/wp-content/themes/PNWWEB/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />   
<script type="text/javascript" src="http://www.pnw-design.com/wp-content/themes/PNWWEB/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>     
<!--Nivo-->     
<link rel="stylesheet" href="http://www.pnw-design.com/wp-content/themes/PNWWEB/nivo-slider/themes/default/default.css" type="text/css" media="screen" />     
<link rel="stylesheet" href="http://www.pnw-design.com/wp-content/themes/PNWWEB/nivo-slider/themes/orman/orman.css" type="text/css" media="screen" />     
<link rel="stylesheet" href="http://www.pnw-design.com/wp-content/themes/PNWWEB/nivo-slider/themes/pascal/pascal.css" type="text/css" media="screen" />     
<link rel="stylesheet" href="http://www.pnw-design.com/wp-content/themes/PNWWEB/nivo-slider/nivo-slider.css" type="text/css" media="screen" />                  
<!-- Add Slider -->     
<script type="text/javascript" src="http://www.pnw-design.com/wp-content/themes/PNWWEB/nivo-slider/jquery.nivo.slider.pack.js" ></script>   <!--Nivo-->            
<script type="text/javascript">     
$(window).load(function () {     
$('#slider').nivoSlider({     
effect: 'boxRainGrow', // Specify sets like: 'fold,fade,sliceDown'     
slices: 15, // For slice animations     boxCols: 8, // For box animations     
boxRows: 4, // For box animations     
animSpeed: 250, // Slide transition speed    
 pauseTime: 6000, // How long each slide will show    
 startSlide: 0, // Set starting Slide (0 index)     
directionNav: true, // Next & Prev navigation     
directionNavHide: true, // Only show on hover     
controlNav: true, // 1,2,3... navigation     
controlNavThumbs: true, // Use thumbnails for Control Nav     
controlNavThumbsFromRel: false, // Use image rel for thumbs     
controlNavThumbsSearch: '.jpg', // Replace this with...     
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src     
keyboardNav: true, // Use left & right arrows     
pauseOnHover: true, // Stop animation while hovering     
manualAdvance: false, // Force manual transitions     
captionOpacity: 0.8, // Universal caption opacity     
prevText: 'Prev', // Prev directionNav text     
nextText: 'Next', // Next directionNav text     
beforeChange: function () { }, // Triggers before a slide transition     
afterChange: function () { }, // Triggers after a slide transition    
 slideshowEnd: function () { }, // Triggers after all slides have been shown    
 lastSlide: function () { }, // Triggers when last slide is shown     
afterLoad: function () { } // Triggers when slider has loaded     
});     
});  
 </script>       
 <script type="text/javascript">       
  $(document).ready(function() {         
$(".fancybox").fancybox().trigger('click');        
 });           </script>        
<script type="text/css">        
 .hide{         visibility: hidden;         }       </script>         
 <!-- This site is optimized with the Yoast WordPress SEO plugin v1.2.5 - http://yoast.com/wordpress/seo/ --> 
<title>Web Design for the PNW Washington Oregon</title> <meta name="description" content="PNW Design offers afffordable Freelance Web Design Solutions for the PNW Washington Oregon and surrounding areas.  Seattle Tacoma Portland"/> 
<link rel="canonical" href="http://www.pnw-design.com/" /> 
<meta property='og:locale' content='en_us'/> 
<meta property='og:title' content='Web Design for the PNW Washington Oregon'/> 
<meta property='og:description' content='PNW Design offers afffordable Freelance Web Design Solutions for the PNW Washington Oregon and surrounding areas.  Seattle Tacoma Portland'/> 
<meta property='og:url' content='http://www.pnw-design.com/'/> 
<meta property='og:site_name' content='PNW-WEB'/> <meta property='og:type' content='article'/> 
<!-- / Yoast WordPress SEO plugin. -->  
<link rel="alternate" type="application/rss+xml" title="PNW-WEB &raquo; Feed" href="http://www.pnw-design.com/feed/" /> 
<link rel="alternate" type="application/rss+xml" title="PNW-WEB &raquo; Comments Feed" href="http://www.pnw-design.com/comments/feed/" /> 
<link rel="alternate" type="application/rss+xml" title="PNW-WEB &raquo; Home Comments Feed" href="http://www.pnw-design.com/home/feed/" /> 
<link rel='stylesheet' id='contact-form-7-css'  href='http://www.pnw-design.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.2' type='text/css' media='all' /> 
<link rel='stylesheet' id='jquery.lightbox.min.css-css'  href='http://www.pnw-design.com/wp-content/plugins/wp-jquery-lightbox/styles/lightbox.min.css?ver=1.3.4' type='text/css' media='all' /> 
<script type='text/javascript' src='http://www.pnw-design.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script> 
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.pnw-design.com/xmlrpc.php?rsd" /> 
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.pnw-design.com/wp-includes/wlwmanifest.xml" />  
<meta name="generator" content="WordPress 3.4.1" /> 
</head>


your BG image is 416kb.
slide1 is 146kb
slide2 is 117kb
 
Last edited:

bowenac

New Member
Yup about what I assumed its all wordpress besides the slider and css haha how do you figure that is a massive header. I highly doubt any of that has any effect on the load time and 100% comes down to my ISP and package. I have a friend who lives in Canada and he said the site is snappy... I live in WA State. I have asked a bunch of others as well so not sure maybe it is your connection making it load slow.

Are you familiar with wordpress, and <head> tags? Everything that is in the head is supposed to be in the head. And also the images you think kb is unoptimized just trying to understand what you are talking about.

I guess I could make another js file for the inline script but don't see that making much of a difference. Do you?
 
Last edited:

Phreaddee

Super Moderator
Staff member
I highly doubt any of that has any effect on the load time and 100% comes down to my ISP and package.
actually thats where you are wrong there is too many http requests happening there. of course I am familiar with wordpress and head tags, and no everything thats in the head DOES NOT NEED TO BE IN THE HEAD.
for instance almost all your <script> tags can be placed near the bottom of the document.
the css can be combined
and the inline script need not be there either.

there is also a lot of superfluous scripts in there that are not even needed and are just wasting space.
have you even noticed you have two <title> tags as well?
trust me it can be trimmed down to under 20 lines.

the main BG image could easily be a png-8 and optimised to around 30-40kb
as with the two slider images you could easily shave half of that off.

I have a ADSL2+ connection at home, its not my connection.
 
Last edited:

bowenac

New Member
Thanks I optimized those images you were referring to and the header as well. I will be doing some more to the header.

I also get what you mean about the slider being on every page. I am thinking of some things to do for the other pages.

As always appreciate your feedback.
 

chrishirst

Well-Known Member
Staff member
It's no where near half the page.
I run at 1280x1024 on one screen and 1440x900 on the other, my BROWSER window is NOT at full screen (about 1100x1000) and I assure that it does.

Also I have a vision problem (which many many people do) and for me it is pretty much unreadable. This is why I say it is a triumph of "kewl" over usability, a well designed UI should take usability and accessibility into account.

Website accessability and usability is a legal requirement in most countries not just something thrown in as an afterthought.

I am thinking of some things to do for the other pages.
Why?? People should be coming to your pages to find out if you meet their needs as a designer or as a developer. They are NOT there to marvel at how distracting you can make a document.
Leave the "kewl" tricks, fancy slideshows etc. on documents that are meant for showing those kind of things as examples of your work, the documents that you want to be read and find out about YOU as a developer should have no distractions from your "call to action" on them.
 
Top