SitePoint Sponsor

User Tag List

Page 2 of 4 FirstFirst 1234 LastLast
Results 26 to 50 of 87
  1. #26
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Size swap is good, and it looks much better/cleaner centered... though it still feels like a splash page, the hover effects are still broken (though at least appearing now) and in browsers where they do work, the px metric fonts are illegibly small, the transparency keeps them from having sufficient contrast to be legible.... They're just not viable for web deployment that way.

    I'd suggest just cutting their heights in half, taking half the padding between them and the header area away as a waste of space, and just putting the text below each one... in %/em so people can actually read them.

    Or at the very least lose the fancy/hard to read font on them.

    I also find it odd neither firebug nor dragonfly can operate on the page... scripting conflict of some sort?

    Really things like 'three across equal width/equal height" falls into the category of "pretty but useless" -- same for goofy animated effects done on your only real content on the page... even for a artists website. ESPECIALLY when you let jquery crap all over the page.

    Also disturbing what happens images off -- I realize as a artist showing off work that's not a giant concern, but it's still troublesome.

    I'm going to take a stab at a rewrite just to show you how I'd approach the same thing -- we're talking identical functionality... without the scripts for nothing, without the HTML 5 nonsense... and relying on a few less 'div for nothing'... just so you can see what I mean.

  2. #27
    SitePoint Member FlyingFreedom's Avatar
    Join Date
    Dec 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great site mate! It's a good design for a portfolio type site showcasing your talents. I feel some of your individuality from looking at it, and the type of personality you have in life. Its simple and creative, thats all you need! My only complain would be to get a domain, because a subdomain from a free hosting site won't look to good if a potential client is looking to hire you. Aside from that, good work and good luck!

  3. #28
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Footer overhaul. I didn't like how it looked, so I decided to just redo it.

    After studying design theory a bit I've decided to put a more noticeable call to action on the home page. I'll do that tomorrow probably.

    The portfolio entries now have thumbnails.

  4. #29
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forgot to mention, I also made it so the thumbnails on the portfolio page are automatically generated. Just less work for me.

    Here's a to-do list I came up with:

    -Add a call to action to the front page
    -POSSIBLY get rid of the sidebar, move the bio to the footer, and use the aside area for other content (probably not anytime soon)
    -Make it compatible with IE8 (I am not designing for IE7 and lower no matter how hard you try to convince me. That will cause more headaches than it's worth. I do have a reason to support IE8, however, because for whatever reason a lot of people are still using XP.)
    -Include a script to support html5 tags in older browsers
    -Figure out why some of the link transitions don't work in Chrome (could use some help with this)
    -Possibly swap the backgrounds of the sidebar and content areas to the same gradient as the new footer
    -Get wordpress working
    -Write the work page
    -Make an .htaccess file to get rid of index.php in the urls (might not be possible on the free host)
    -Get a new host/domain name
    -Get rid of the torn edges on the front page graphics, as they are inconsistent with the rest of the image borders on the site
    -Modernize some of the CSS (I'm still using floats in some places where I could be using inline-blocks, particularly the front page graphics which could definitely be coded better)
    -Either get rid of the hover description on the front page graphics (sniff), or figure out how to make them appear underneath the images if on a device where 'hovering' isn't really possible
    -Make a mobile stylesheet
    -Add facebook share and tweet buttons to portfolio entries
    -Simplify the scrollbar on portfolio entries (sort of like OSX Lion's scrollbars)
    -And of course, any more suggestions you guys might have.

    These are in no particular order; just typed them as they popped into my head.

  5. #30
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://keithpickering.zxq.net/blog/

    Got a blog template pretty much finished. Just need to make a WP theme out of it. Let me know what you think

  6. #31
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Well, it sure takes a long time to load! Is that a plus?

    The footer is kind of confusing...the large space b/w heading, tagline, and the actual info I'm looking for is too big. It looks like three separate sections.

    Also, I'd change the 2nd tagline to "If you're dying..."

    Also, is the twitter name "DouchebagMario" really a professional name that you want prospective employers seeing?

    ~TehYoyo

  7. #32
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Spritanium View Post
    http://keithpickering.zxq.net/blog/

    Got a blog template pretty much finished. Just need to make a WP theme out of it. Let me know what you think
    Switch the fonts to %/em so people can actually read it (the whole auto-enlarge thing), decrease the minimuim width to 752px so netbook users can actually read it (even aiming for 1024 users 1000 is too much; remember, 32px min, 48px ideal), switch the max-width to em so people with different system metrics get a useful page width and actually read it, fix the color contrast issues on the menu and 'tags' so, well... do you see a trend here?

    Getting rid of some of the nonsensical redundancies could help too... like:

    Code:
    <header>
      <h1>Contact Info</h1>
      <h2>Because I'm lonely.</h2>
    </header>
    Heading tags inside a header tag as the only content (pointless), h2 which is NOT the start of a subsection and as such shouldn't even BE a numbered heading tag... Good example though of what's "wrong" with HTML 5... with all the extra allegedly semantic elements -- those aren't articles, heading is redundant, multiple headings makes no sense, and if one was to use the 'correct' html 5 wrapper "section" at that point what's the difference between that and using a DIV again?

    Also not sure what a lot of your CSS is even there to accomplish.... like the transition on the outermost container?

    Even this:
    @import url(normalize.css);

    just put the reset in the regular page and save yourself the 'handshake for nothing'.

    Much less the jquery for nothing (what's that even on the page for?!?), clearfix nonsense for nothing, id on elements that shouldn't need them, no id on elements that should (unless you really plan on never using the NAV element anywhere else on the page), and all those pointless HTML 5 wrappers for, well... nothing. Even the vague names like "container" -- every div is a container.

    Of course again the 'three across equal width' thing in the footer is another of those "not viable for web deployment" concepts if you actually care about accessibility... or don't care about it breaking.

  8. #33
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The clearfixes are from when I was using floats for almost all the content. Switched to inline-blocks when I realized that I honestly don't care the slightest bit about IE7 and lower. I'm going to remove them; I just haven't done so yet.

    The fancybox script is on the page for images in blog posts. There aren't any there yet, but it's going to be required anyway.

    Articles in html5 are defined as "any independent item of content", e.g., anything that makes sense by itself with the surrounding content stripped away. All three of the areas in the footer have headers of their own; and they all contain content relevant to those headers, and irrelevant to anything else on the page. So they can be correctly referred to as articles.

    Sections, on the other hand, refers to a "generic section of a document". This article recommends using it to "divide the different sections of a one-page website or portfolio". I have a section for the top area (logo and nav), the middle area (content and asides), and the bottom area (links and footer). These areas are all separate sections of the page, independent from one another. But since it wouldn't make sense to put them on their own (for example, why would you post a logo and navigation by itself when the logo refers to nothing and the navigation links wouldn't even lead anywhere; and why would you post a footer with a copyright by itself when the copyright isn't declaring ownership of anything?), it makes sense for them to be sections instead of articles. I COULD make them divs, but divs have no semantic meaning and are to be used for styling purposes or when no superior alternative is available. For example, the container div is there to keep everything from stretching beyond 1280px. It exists purely for aesthetic purposes, and so it wouldn't make any sense to call it a section.

    But at the end of the day, they're all block elements, so apart from semantics it doesn't matter what they're labeled as...I could make a full page with nothing but articles and it would still render the same way.

    The blog posts are semantically perfect; I've done enough research to be pretty sure of that.

    The nav argument is true; I just added an id to it in case I ever need to use another nav element. I don't see any elements with id's that don't need them. Could you point them out? It's always been my understanding that anything only appearing on the page once should be given an id instead of a class.

    The transition on the container was something I was playing with, so there would be a smooth animation when the window was resized. But I ditched this in favor of just making the whole layout fluid down to 1024px (still need to make that mobile stylesheet). Just another thing I need to get rid of but haven't yet.

    My mistake about the h2's in the footer, I replaced them with p's. So now the header tag does make sense.

    I did a lot of research regarding footers to come up with this one. Here's the gist of what I learned: a footer should contain contact info, it should contain any extra information that doesn't fit in another section, and it should tell the user what to do now that they've reached the bottom of the page. Should they scroll back up? Go to another website? The footer should at least hint toward something so they aren't left guessing. Also, find 10 modern websites, and I guarantee at least a few of them will have the multi-column footer design...it's very common nowadays. I've made sure that it doesn't break in any modern browser (I now have Firefox, Chrome, Opera, and IE10 now and I frequently check on all four)

    I'm sure my CSS could be optimized better, but I'm planning on waiting until I have everything finalized, at which point I'll go back and check for what I actually NEED.

    Most of the fonts are em already, correct? I've been trying to get away from using pixels for font sizes.

  9. #34
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Spritanium View Post
    Most of the fonts are em already, correct? I've been trying to get away from using pixels for font sizes.
    Did you make a change in that regard since my last post? You had a px declaration on body before and it was rendering 'too tiny' everywhere -- now you seem to have 87.5% -- which is rounding kinda funny (a bit tiny even for 87.5) -- that could just be trebuchet though -- the sans-serif font that has legibility issues much akin to a serif one -- it's just too fancy for it's own good. In any case that alone is making a huge difference in my opinion of the page's layout.

    Though with the automatically larger fonts the 'arrow' in your date hovers is chopped off and the twitter icon loses it's bottom two lines -- lemme guess, stating the hover state height in px? That's part of why I'd advise AGAINST silly little animations like that and just show the links all the time. (especially since CSS3 animations don't do 'auto' on height, and that means editing the stylesheet every time you want to add or remove a social icon)

    On the contact info thing -- I've never liked putting it in the footer; it's one of those things I like to put right up top; but that's usually for businesses where the most important thing is who we are, what we do, and how do you get hold of us. Personal blogs play by a bit different rules as it's more about running ones mouth and voicing opinions, so putting it in the footer is fine.

    On the h2/p -- i'd probably make them ALL h1 for html 5, h2 for html 4, without the HEADER tag and a small tag inside the heading... It looks better CSS off, and makes more sense semantically than having a heading tag inside a header tag.... It's just one of those things that bugs me about HTML 5.

    The 'unneccesary ID's" refers to the HTML 5 structure -- if you used the old SENSIBLE heading orders (instead of the HTML 5 "there's really no reason to even have anything more than H1 anymore" structure) H1 would be a unique, the topmost header tag would serve no purpose killing a tag AND a ID, that h1 could then use a graceful degrading image replacement instead of the current "hey where did the heading go" it has, etc, etc...

    Oh, and since that text in the aside isn't actually an aside... well... Sidebar != aside. You might be setting it aside, but you're not grammatically doing an aside... if you're not breaking the fourth wall, it's probably the wrong tag.

    ... and fancybox -- I hate lightbox to begin with (usually results in me either middle clicking on all image links to bypass it, or screaming at the display "for **** sake just let me open the **** image") -- but this one's even worse than usual being 17k after compression (32k uncompressed) WITH needing that idiotic bloated jquery garbage. Worst of the worst. Well, that's not entirely true -- at least it doesn't break middle clicking like SOME implementations do. I'm actually trying to make one that doesn't suck, and finding out much of the suckage is actually browser limitations.

    If I was to write the same thing, the markup would probably go something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Keith Pickering &bull; Blog
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		Keith <span>Pickering</span>
    		<b><!-- image sandbag --></b>
    	</h1>
    
    	<ul id="mainMenu">
    		<li class="first"><a href="/">Home</a></li>
    		<li><a href="/blog/">Blog</a></li>
    		<li><a href="/portfolio/">Portfolio</a></li>
    		<li><a href="#">Work</a></li>
    	</ul>
    	
    	<hr />
    	
    	<div id="contentWrapper"><div id="content">
    		<!-- double wrapper for more versatile fluid columns -->
    		
    		<h2>Blog</h2>
    		
    		<div class="article">
    		
    			<h3>Post Title</h3>
    			
    			<div class="timeAndSocial">
    				Mar <span>25</span>
    				<img src="/images/icons/facebook.png" alt="Facebook" />
    				<img src="/images/icons/twitter.png" alt="Twitter" />
    			</div>
    			
    			<p>
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Praesent mauris. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Sed dignissim lacinia nunc.
    			</p><p>
    				Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. <b>Curabitur tortor</b>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.
    			</p><p>
    				<b>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa</b>. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. <i>Pellentesque nibh</i>. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. 
    			</p>
    			
    			<div class="category">Category: <a href="#">Posts</a></div>
    			<div class="comments"><a href="#">0 Comments</a></div>
    			<ul class="tags">
    				<li><a href="#">#Tag 1</a></li>
    				<li><a href="#">#Tag 2</a></li>
    				<li><a href="#">#Tag 3</a></li>
    			</ul>
    			
    		<!-- .article --></div>
    		
    		<div class="article">
    		
    			<h3>A Different Post Title</h3>
    						
    			<div class="timeAndSocial">
    				Jan <span>4</span>
    				<img src="/images/icons/facebook.png" alt="Facebook" />
    				<img src="/images/icons/twitter.png" alt="Twitter" />
    			</div>
    			
    			<p>
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Praesent mauris. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Sed dignissim lacinia nunc. 
    			</p><p>
    				Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. <b>Curabitur tortor</b>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.
    			</p><p>
    				<b>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa</b>. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. <i>Pellentesque nibh</i>. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. 
    			</p>
    			
    			<div class="category">Category: <a href="#">Other Posts and Stuff</a></div>
    			<div class="comments"><a href="#">90,000 comments</a></div>
    			<ul class="tags">
    				<li><a href="#">#words</a></li>
    				<li><a href="#">#sentences</a></li>
    				<li><a href="#">#Lorem Ipsum</a></li>
    				<li><a href="#">#Why does this have so many comments</a></li>
    				<li><a href="#">#And another tag for good measure</a></li>
    			</ul>
    			
    		<!-- .article --></div>
    		
    	<!-- #content, #contentWrapper --></div></div>
    	
    	<hr />
    	
    	<div class="sideBar">
    	
    		<div class="subSection">
    		
    			<img
    				src="/images/profile.jpg"
    				alt="Keith Pickering"
    				class="leadingPlate"
    			/>
    	
    			<h2>Who Am I?</h2>
    			<p>
    				I'm <strong>Keith</strong>, and I'm a freelance graphic designer from the US. I don't like using fancy buzzwords to describe myself, but I've been told I'm good at what I do, so hopefully you'll take a look at my work, and possibly consider hiring me for your next project. If not, it's okay. I still love you.
    			</p>
    			
    			<hr />
    			
    			<p class="showMore">
    				To find me on other various corners of the internet, check the links at the <a href="#" class="scrollToBottom">bottom of the page.</a>
    			</p>
    			
    		<!-- .subSection --></div>
    		
    		<div class="subSection">
    		
    			<div class="blogList">
    				<h2>Categories</h2>
    				<ul>
    					<li><a href="#">Posts</a></li>
    					<li><a href="#">Other Posts and Stuff</a></li>
    					<li><a href="#">Even More Other Posts</a></li>
    					<li><a href="#">Gotta Have Them Posts</a></li>
    					<li><a href="#">Posts Galore</a></li>
    					<li><a href="#">Posts: Live and Uncut</a></li>
    				</ul>
    			<!-- .blogList --></div>
    			
    			<div class="blogList">
    				<h2>Archives</h2>
    				<ul>
    					<li><a href="#">January 2012</a></li>
    					<li><a href="#">February 2012</a></li>
    					<li><a href="#">March 2012</a></li>
    					<li><a href="#">April 2012</a></li>
    					<li><a href="#">May 2012</a></li>
    					<li><a href="#">June 2012</a></li>
    					<li><a href="#">July 2012</a></li>
    				</ul>
    			<!-- .blogList --></div>
    			
    		<!-- .subSection --></div>
    		
    	<!-- #sideBar --></div>
    	
    <!-- #pageWrapper --></div>
    
    <hr />
    
    <div id="footerWrapper"><div id="footer">
    
    	<div class="subSection">
    		<h2>
    			Contact Info <span>-</span>
    			<small>Because I'm lonely.</small>
    		</h2>
    		<ul>
    			<li class="email"><a href="mailto:thatonekeithguy@gmail.com">thatonekeithguy@gmail.com</a></li>
    			<li class="phone">1(760)613-0297</li>
    			<li class="skype"><a href="callto://spritanium">spritanium</a></li>
    			<li class="steam"><a href="steam://friends/add/spritanium">spritanium</a></li>
    		</ul>
    	<!-- .subSection --></div>
    	
    	<div class="subSection">
    		<h2>
    			Social <span>-</span>
    			<small>Because you're dying to know what I had for lunch.</small>
    		</h2>
    		<ul>
    			<li class="facebook"><a href="http://www.facebook.com/mynameiskeith">mynameiskeith</a></li>
    			<li class="twitter"><a href="http://www.twitter.com/DouchebagMario">@DouchebagMario</a></li>
    			<li class="tumblr"><a href="http://toomuchkeithtohandle.tumblr.com">TooMuchKeithToHandle</a></li>
    			<li class="youtube"><a href="http://www.youtube.com/spritanium">spritanium</a></li>
    		</ul>
    	<!-- .subSection --></div>
    	
    	<div class="subSection">
    		<h2>
    			Links of Interest <span>-</span>
    			<small>Because I spend way too much time on the internet.</small>
    		</h2>
    		<ul>
    			<li><a href="http://fancyapps.com/fancybox/">FancyBox</a> jQuery Lightbox Alternative</li>
    			<li><a href="http://slidesjs.com/">Slides</a> jQuery Slideshow Plugin</li>
    			<li><a href="http://www.red-team-design.com/">Red Team Design</a> Some pretty useful tutorials for web development</li>
    			<li><a href="http://www.sitepoint.com/">SitePoint</a> Great articles on web design, and a really helpful forum too</li>
    		</ul>
    	<!-- .subSection --></div>
    	
    	<hr />
    	
    	<div>&copy; Keith Pickering 2012.</div>
    	
    	<div class="copyrightPolicy">
    	
    		But I'll be incredibly flattered if you actually want to steal my work.
    		
    		<div>
    			<img
    				src="/images/keithpaper.png"
    				alt="Copyrights are pretty important bro"
    				class="trailingPlate"
    			/>
    			<h2>Copyright Policy</h2>
    			<p>
    				All of the images on this site, with the exception of the footer icons (from <a href="http://icondock.com/free/vector-social-media-icons">IconDock</a>), and a few other images that are credited accordingly, were made by me, and I hold the copyright for them. But that doesn't mean I'm greedy about it.
    			</p><p>
    				I'm a pretty reasonable guy. So if you want to use something you find on this site for a personal project, just <a href="mailto:thatonekeithguy@gmail.com">drop me a line</a> and we'll work something out.
    			</p><p>
    				Alternatively, if I'm using an image that you created and you'd rather it not be here, let me know <i>before</i> filing a lawsuit. I'll gladly take it down. Well, I probably won't be too glad about it, but you know what I mean.
    			</p>
    		</div>
    		
    	<!-- .copyrightPolicy --></div>
    	
    <!-- #footer, #footerWrapper --></div></div>
    	
    </body></html>
    Admittedly it swings an axe at all the HTML 5 nonsense and the scripting -- if you really want the scripting I'd put the static script you had after the footer in an external file so it's cached across page-loads. ... probably try to find something leaner and non-jquery reliant as well. I'd also be tempted to add dummy spans to the links under contact info/social so as to use CSS sprites -- eliminating seven handshakes? Could probably do the same to the images in the date fields though I'd be tempted to leave those be -- since they don't have any actual text in their anchors.

    If I remember later I might take a stab at a CSS rewrite for that too, just to show you the how/why/where of my approach.

  10. #35
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would you recommend replacing all the pixel values (width, height, position, margin, padding, etc) with em or %?

    Good call at using a ul for the tags, and h2's for the category and archives. I'll definitely take a few ideas from that rewrite.

    As for the logo, using that huge negative indent has always seemed a little hacky to me. If you have a better way to do it I'd be more than happy to use it.

    And CSS sprites for the social icons aren't a bad idea, but why would I need extra spans for that? Couldn't I just use background-position and overflow: hidden?

    Right now the icons are displayed using :before for the li's in the footer area, where they're assigned a background image. Seems like I could do the same thing with background-position and a single grid image of all the social icons.

  11. #36
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just replaced all the social icons in the footer with a css sprite. That should help the loading time quite a bit

  12. #37
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Yeah. Change your tags color...I can hardly read them and I'm (I like to think) normal.

    Did you take into consideration my comments?

    ~TehYoyo

  13. #38
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I'm working on the load times.

    As for my twitter name, I don't think it's that big of an issue personally. If people are offended by the word 'douchebag' they shouldn't even be AROUND any site I've made

  14. #39
    SitePoint Member
    Join Date
    Mar 2012
    Location
    http://www.dancedepotonline.com
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The site is extreamly simple in design, try to put some images and also some sort of flash animation.

  15. #40
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Spritanium View Post
    Yeah, I'm working on the load times.

    As for my twitter name, I don't think it's that big of an issue personally. If people are offended by the word ' @#!*% ' they shouldn't even be AROUND any site I've made
    Just thought I'd give my input I'm not offended, it's just that, if I were doing a sales pitch, I wouldn't want my twitter name as that.

    Maybe it's just me being a student and thinking about colleges and prospective employers now investigating FB, Twitter, etc.

    ~TehYoyo

    Edit:
    Quote Originally Posted by peter200285 View Post
    The site is extreamly simple in design, try to put some images and also some sort of flash animation.
    Ah...no. don't do that. He's already got many images. Flash animation is very unnecessary, hard to make, time-consuming to make, annoying to watch load, and not available to search engines.

    Simple is, more often than not, better than complicated. He gets a clear message apart and it's refreshing to have little content.

  16. #41
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never in my life am I putting a flash animation on a website I design. There's nothing I hate more than switching noscript off just to access content that should be visible in the first place.

    That's why my site is perfectly usable with javascript off c:

    Well, apart from the "scroll down to the bottom of the page" thing, but I guess they'll just have to rough it and press the End key

  17. #42
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Spritanium View Post
    Never in my life am I putting a flash animation on a website I design.
    Agreed, pointless bloated waste; much like the STUPID MALFING rotating image banner garbage that serves no real purpose apart from pushing down what people actually visited the website for -- the content.

    See how jquery animations are the new flash -- and no, that's not a compliment.

  18. #43
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only jquery animations I'm using are for the "scroll to the bottom" link and the two scripts I have (fancybox and slidesjs; the site works fine without them but only one image is visible in the slider with scripts disabled. I'll probably just have it fall back to a grid of images in that case). I'm not trying to overdo the scripting. I'm thinking I'll put the inline script into a separate file soon.

    Also, do you know much about php? I'm thinking about posting my scripts for generating portfolio entries to see if there's a better way. Not that I'm sure there is; I just have a very basic understanding of php and I wouldn't want to be overcomplicating something that should be simple.

    Oh, and try resizing the main page now. I know you're not too big a fan of the hover descriptions, but I've gotta say this is a pretty successful liquid layout.

    I'm in the process of installing a few VMs of XP with different versions of IE on them (most likely just 6 and 8) so I can start testing in IE8 without installing that **** on my PC. As for 6, I'm not going to resort to any hacks to make it look pretty, but I'm at least going to make sure the content is all legible. Then I'll slap on a warning about how their browser is 11 years old and it's not my fault my site doesn't look great in it.

  19. #44
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you guys think it would be better to make the portfolio entries pop up in an iframe rather than ajax? Iframes seem a little outdated, but it would be easier to add social share buttons for each entry (which I've been meaning to do)

  20. #45
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Layout now works at 752px (for the most part)

  21. #46
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Really like the layout, nothing new as such but it's nice and clean and usable.

    I think the best thing about the website is your text. By this I mean the way you speak to the reader is very welcoming and friendly, but I guess to some people they may question how professional you are as it could be seen as being a bit too casual to some.

  22. #47
    SitePoint Member
    Join Date
    Mar 2012
    Location
    Norwich, UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey in general you have a great site design here.

    In terms of aesthetics, the only fault i can find is your h3 headings in your blog pages - with the black to white rounded gradient - they just look oldschool, and dont realy match the rest of the site. Personaly, a solid colour here would look best.

    In terms of coding, stick with HTML5. However much others may rant about it, it's the future and there no avoiding it. Just dont use it as an excuse to code badly.

    Although you say your not to bothered about size/ load speed, you should be. Admitedly it doesnt make a massive different to small sites, but it does make a difference to your end users. Whilst your file sizes are ok, you need to set up headers and etags to allow your images and static files to be cached. I'd suggest doing this in your .htaccess file - if your host allows it. You also have like 5 seperate css files - it would be best to combine these into one and reduce the amount of lookups needed.

    In terms of your hosting - like others have said you definatly need your own domain name. And in terms of using free hosts, although they seem great they can be really limiting, especialy for php/ mysql. You should seriously consider getting a doamin and paid hosting. Especialy considering you can get them so cheep at sites like godaddy - even if they are nobs. I used free hosts for a long time when i was learning php, and as soon as i swithced to a real host i wished i'd done it so much sooner.

    On a final note - notepad - seriously? Haha you say you use photoshop etc so do you not have dreamweaver? If not you should really consider it - it will make your coding so much easier!

    Anyway overall nice site dude!

  23. #48
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://keithpickering.zxq.net/wordpress/ Wordpress is confusing. But I'm making progress on a theme identical to the rest of my site. I'll probably convert the entire site to wordpress after I get it perfect (I'm sure deathshadow60 will rip me a new one for that sdgdsf)

    Anyway, does anyone know why nothing shows up when you try to view comments or separate posts by category or month? Or why my h1's are miraculously smaller when it's using the same stylesheet as the rest of the site?

    I wish I could have someone do this for me, but I don't have any money to give away :P

    Also, don't mind the terrifying pictures in the test posts

  24. #49
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what the reply above has to do with my post?

  25. #50
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •