sstarzyk10

@@Arvi - I know page rank is important so people find the sites, but do you think that the amount of visitors our site gets, say 500 a month vs. 5,000 a month, will increase our page rank significantly? Or like Dr. Iggy said, while visitors numbers are important, so is bounce rate, and even if the visitor amount is lower, if they stay on the site longer, Google will see the site as more relevant. I was unaware that Google even factored bounce rate into their rankings.

The company I work for is debating whether or not to combine a group of 7 sites, all with different domain names, into one website/domain with different directories for each site. They say the reasoning behind this is so we get a lot of traffic on one domain instead of spreading it out across all 7, increasing our search engine ranking. My question is how important is amount of traffic to a site when determining page rank? Especially when comparing that to other SEO techniques, such as quality back links, good on-page content/keywords, etc. I know it has some sort of effect with Google "trusting" your site if a lot of people visit it, but how much does that really matter? I'm advocating against the change, simply for keeping our similar content grouped under separate domains and keeping a good user experience. Plus, I feel like we could just increase our efforts on other SEO stuff to boost traffic and rankings on all the domains instead of doing the big migration to one domain. I'd like to hear thoughts for and against. Thanks! Steve

So I'm going to be moving a website to a new domain in the near future and I know we need to set up redirects on most of the pages for SEO purposes, but it's sort of a tricky situation. I'm not familiar enough with .htaccess code to understand how to do what I need it to do. Could someone help me write the proper redirects? I'm moving a website to a new domain name, but we are putting up a new website at the current domain name as well, so we can't do a full domain redirect. I need to redirect all directories and pages to the same directories/pages on the new domain. Something like this: currentdomain.com/about-us/ -> newdomain.com/about-us/ currentdomain.com/about-us/team/ -> newdomain.com/about-us/team/ currentdomain.com/webinars/(any page) -> newdomain.com/webinars/(same page name) I found this page (https://gist.github.com/ScottPhillips/1721489), and I think below is close to what I need, but like I said, I'm not really sure how this all works. I think I need "redirect from old domain, with subdirectory and/or full path, to new domain with sub directory and/or full path" #Redirect from old domain to new domain with full path and query string: Options +FollowSymLinks RewriteEngine On RewriteRule ^(.*) http://www.newdomain.com%{REQUEST_URI} [R=302,NC] #Redirect from old domain with subdirectory to new domain w/o subdirectory including full path and query string: Options +FollowSymLinks RewriteEngine On RewriteCond %{REQUEST_URI} ^/subdirname/(.*)$ RewriteRule ^(.*) http://www.katcode.com/%1 [R=302,NC] This site is built in Wordpress. Thanks for any help!

I figure this out, in case anyone stumbles upon this same problem. As I suspected, the auto-generated content was showing up at the bottom of the page, not within my scoped div. So I added the following jQuery AFTER calling the auto-complete. $(".ui-autocomplete ").wrap('<div class="jqueryUI" />'); I had tried this earlier - but I had put it before calling the auto-complete, and I was wrapping around the input, not the auto-complete code generated by the javascript. Here is a page that helped me see what code is generated: http://jquery-ui.googlecode.com/svn/tags/1.8.4/docs/autocomplete.html Hope this helps someone else!

Here is a snippet of the CSS: .jquery .ui-menu { list-style: none; padding: 2px; margin: 0; display: block; outline: none; } .jquery .ui-menu .ui-menu { margin-top: -3px; position: absolute; } .jquery .ui-menu .ui-menu-item { margin: 0; padding: 0; width: 100%; } .jquery .ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } .jquery .ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; min-height: 0; /* support: IE7 */ font-weight: normal; }

Using jquery 1.10.4

Hey everyone, I have a very aggravating problem, and I can't figure it out - enough time wasted. I have an input with an ID of "#queryCountry" on it. There is jQuery that is adding the Auto Complete functionality to this input. On this page, I also use UI Tabs. I've styled the tabs how I want them (using jQuery UI styles, but they are in a separate style sheet), however the styles we are using for the Auto Complete screw up my tabs. Solution: Use a CSS scope to target only the Auto Complete field. Great. So in my UI CSS file, I add a CSS scope before each declaration of ".jqueryUI". In the HTML, I wrapped the form containing the "#queryCountry" input in a div with that class, like so: <div class="jqueryUI"> <form name="rateSearch" method="post" action="#"> <input type="text" id="queryCountry" name="queryCountry" class="searchRateInput ui-autocomplete-input" autocomplete="off" placeholder="Type country name" /> </form> </div> When I visit the page and try the form, the tabs keep their style how I want them. The auto complete function works, but the auto complete list of items is totally unstyled. If I remove the scope in the CSS, the auto complete list looks how I want it, and the tabs get all screwed up. I don't see how this could be this hard. I've tried so many things and nothing is working. The styles within the scope aren't being read. It's an ASP.net site if that matters. My ideas: 1. Does it matter when the auto complete function is called during the page load? Maybe it's activating before the html is being rendered? 2. When I inspect the auto compelte list element, it's showing up at the very bottom of the page with some inline styles added to it (I assume to position it under the input). This would mean it's not actually IN my scoped div. What's the point of scoping an element if it doesn't show up inside that div?? I can't get rid of the inline styles, the JS is creating those. Any help is greatly appreciated. I'll do hacks, edit the JS, whatever it takes. I don't think this should be that hard. Hopefully I'm an idiot and this is an easy fix. Thanks, Steve

Overall I like the layout - it is a good design for the type of work you do. My biggest comment would be to work on consistency across all pages. For instance, the home page header has a white background, but on the other pages the top has a gray gradient. Also, you seem to be using very nice, large imagery (home page slider, portfolio, even about us), but then for your services, you have these hand-drawn type icons. To me, they seem out of place and not as professional as the rest of the site. Those icons should match the same graphical style you use with your other images. Just a couple other ideas: On the home page, after the slider area, there is a lot of white background. Adding a row of light gray or something behind the Who We Are area would help break that up. Try playing with some different fonts. With @font-face, you can use a lot of really nice typefaces on the web. It would help your design to have some other fonts for headers and sub headers, things like that. Nice work!

I like the clean and crisp feel of it, but like most people mentioned, it doesn't say "designer" to me. I agree with Oliver too, the top white bar before the logo is a little distracting, and it's a lot of white for just a few links - I think you'd be better off having your logo and navigation the first thing at the top. I'm sure you could find a different place for those few items. The header areas on each page seem too big...a lot of white space for a smaller title. Maybe a larger font size, or a different font like TheFlyingSquirrel suggested, would help fill that area. I also think that there are too many boxed elements. I understand that is part of the overall design of the site, but on the Company page, for instance, every gap between boxes disrupts my reading flow. Not sure how to fix that other than keeping a solid white background for the content and working within that to create some different areas and separations. Adding a third color may help keep my interest too. Overall the site is easy to navigate, and if I was looking for a service, I could find it easily. But the overall color scheme and layout doesn't draw me in and keep me browsing.

Put position:relative; on your .nav li declaration and it should show up where you want.

A lot of how it works will depend on what you're using to open the login window. If you are using a pre-built script, you'll want to check that documentation for their built in functions - one of which is probably a close function. If you built the pop-up manually, then you'll just need a little javascript. Let's say the X is written like: <span class="close">X</span> Then, using jQuery, you'd right something like this: (change #login to whatever the container of the login is) $('.close').click(function() { $('#login').fadeOut("fast"); }); You may need to write something to fade out the background too. Like Samus said, without seeing the code, there is no saying what will work.

@gammarik - Keep in mind that this CSS3 solution, while easy to implement, may not work in all browsers. Some older versions of modern browsers or certain versions of IE may not show the shadow. If it's important to your design, you should use a background image, which should work in all browsers. 1. Slice your PSD and save an image of the white background, including the shadow, as a transparent PNG. 2. On a container div, put this image as a repeating background: background:url(images/bg.png) repeat-y top left; 3. Be sure to pad the div on the sides so any content inside the div is within the white area and not over top the shadow. As you add content, the div will expand down and there you have your background. Lyndsey's solution is great, but keep all browsers in mind when creating a website!

The "company" is the company I work for, so it's not like a client. And as the creative team for the company, we have ultimate say over what looks good and works best. However, reminding me that we are ultimately designing for the target audience, not what we like, then it comes back into perspective - the light gray would probably work better. Thanks everyone for the input!

Here are some quick thoughts: 1. Go Responsive - everything seems a little cramped. On a large monitor, you can use more space, and on smaller screens you can remove things to keep the design clean and less busy. I know there is a lot going on and this may be hard, but it may help, especially with mobile visitors. Check out Bootstrap as a starter framework. 2. The "Up" button that shows up covers the content - seems like it should be farther to the right. 3. Make sure images in the posts aren't too big and have enough margins around them to breathe. 4. I like the colors, but at points, it's too much bright green. Maybe find another accent color, or incorporate more of the brown and/or orange color. 5. The background image is a litle distracting to me. Updating that to something else, or a solid color (maybe with a pattern) may help. Putting more contrast between the content and the background will direct the visitors eyes towards the middle more. Hope this helps!

The > selector targets elements that are direct children of the parent. The + selector targets elements immediately preceded by another element, in this case an LI. So that statement says: Any LI that is a direct child of .nav-custom AND has an LI element immediately preceding it. <ul class="nav-custom"> <li></li> <!-- Direct child of .nav-custom, but not preceded by an LI --> <li></li> <!-- Direct child of .nav-custom, AND preceded by an LI - this would get styled --> <li> <ul> <li></li> <!-- Not a direct child of .nav-custom, so not affected --> <li></li> </ul> </li> </ul> The > selector is used, in this case, to target list items in the navigation menu, but NOT in the drop down menus. And the + selector may be used for something like adding a top border to the list item, but they don't want the first one to have a top border, so it must be preceded by an LI. These selectors are very useful - get to know them!

I'm looking for some outside, designer advice. I work with another designer and we have different tastes. I understand we like different things, but I'm trying to do what's best for the company. Please take a look at the following two images. They are screenshots of one page of a site. One his is layout/design, one is mine. The only two things that are different are the background and the addition of a title bar (where it says Mobile & Landline). Please don't go on about any other design problems you may see (I know there may be more), just take into account the background and title bar and let me know which one you think works better, from a design and user perspective. Thanks for you help!

Aha...duh. Sometimes I just need a slap in the face. Thanks again!

I don't think there is any easy way. Your first option would be to create the map in Flash. But assuming you don't want a Flash solution, I suggest using Adobe Dreamweaver's image maps. You can hand code image maps, but you would need to know each coordinate, which would take a huge amount of time if you're doing complex shapes. In Dreamweaver, you can insert the image onto a page, highlight it, then in the Properties box, use the Image Map tool to draw polygon shapes (NOT a pen tool, just straight edges) around each county. These shapes then link to other pages, or whatever you need. That's probably your easiest option. As for a hover state. I've never tried this before, but when using an image map, you have to give it an ID, so I assume it can be manipulated by jQuery. Maybe then you can use jQuery to add a color or border or something upon hover. If you try this and it works, let me know!

This worked perfect, thank you! Any explanation why that was causing my problem, considering the z-index on the overlay was 1000, while the others were 150 or less. @Alluziion: I need to use a background image to get a slight shadow coming off the footer. But I did see an overlapping problem earlier, and removed a background image from the footer and that fixed it, so I know to check that if this ever happens again.

No, I haven't. I'm referring to the semi-transparent dark overlay. If you click to open the pop-up, then scroll down, you'll see that you can still click on the footer links and search box. That should all be covered by the overlay, and not usable. Does that make sense?? The only way I found to get it to cover the whole screen no matter what is to put it outside the wrapper, but then it seems like I get layering problems, even though I have the z-indexes way different. The dark overlay is on top of the pop up. Unless I move the pop-up div as well, but then I can't position where I need it to show up.

I'm working on a project that requires a lightbox style pop-up. If you click the large green number on the preview site, you'll see the pop-up I'm referring to. I need this pop up to be positioned relative to that green number, so the arrow is always pointing to it. Right now the pop up code is inside that right column, and then positioned absolutely, relative to the sidebar div. As you can see, it seems to be working okay. But the overlay layer doesn't go over top of the footer, and I'm clueless as to why. The overlay div is fixed position, 100% width and height. It is located just underneath the pop-up content, so it's also in the sidebar div. If I move it outside the wrapper, such as just inside the body tag, it then overlays everything, including the pop-up. I've tried putting it in different places, top of page, bottom of page. I am either stuck with the footer not being covered by the overlay, or the overlay covering the pop-up. I'm using a sticky footer technique if that makes any difference. Hopefully you can look at the code/css and see if there is something I'm missing. And if there is an easier way to get this overlay/lightbox effect, while being able to pop open a div from somewhere on the page and position the pop-up wherever I need it, please let me know! http://webworkscorp.com/test/testing.html Thanks!

I didn't take the time to comb through all your code, but from looking at your development site, I just wanted to mention a few things that may help. The overlapping is a problem with your center column width. Having that as a percentage won't work properly, as you can see. Check out the Dynamic Drive layouts. Looks like you're using a Fixed-Fluid-Fixed layout. You can view the CSS and HTML to see how it works. http://www.dynamicdrive.com/style/layouts/category/C10/ As for the height problem. If you're using 100% height, be sure that all parent elements also have 100% height on them, or that will get stuck somewhere and not work. I've always found trying to design using 100% height to be a pain. You're better off using background images. You would need two background images, one on each side, to allow for the middle to still be fluid. Also, research CSS media queries. You can set certain widths with those where if the browser shrinks below that width, those specific styles kick in. For instance, you can have a query that removes the news sidebar if the browser is less than 600px wide, such as phones. In my opinion, these media queries are one of the easiest ways to build a responsive site, and will be around for a long time, so it's good to start reading up on them.

I'm looking at this on a Mac, in Firefox, Chrome and Safari. First of all, the blue image seems to be shorter than the rest. It produced a "truncated" error when I tried to open in Photoshop, so maybe try saving that image again. I would also declare a height and width on the images themselves, as well as in the CSS for the containing div. If you're just using simple fade animations without any paging, I suggest using the jQuery Cycle function. It's clean, easy to use, and there is no CSS that could possibly mess up your layout. You just style the containing div how and where you want it, and let the jQuery do the rest. http://jquery.malsup.com/cycle/ Alluziion has a good idea too, just to make sure there is no extra padding or margins on something being added by other browsers.

When you're validating the page, are you specifying the doc type? If so, try it while letting the validator detect the doc type automatically. Some people were having a similar issue, and it doesn't seem to be a big deal, more of just an annoyance with the validator. http://stackoverflow.com/questions/6161535/ie-breaking-page-and-invalid-markup-validation

Thanks for all the input. Sounds like it's best to start designing for a large screen, and work down from there. And just have the media queries at the bottom of my main CSS file. I can still set it up like I have, but instead of importing other files, just list out the CSS that needs to change. I figured that was probably the best practice, but was just thinking of other options. I notice there was no denying that media queries are the best way to build a responsive layout, as opposed to a javascript solution. Would that be true? @hodephdesign: if you could maybe send me a link to a responsive site you've built, I can check the code using Firebug, and see how you laid out the CSS file, that would be awesome.