I suck at building websites what am I doing wrong?

by RedShifted

Posted: 12 years ago 10 replies

WEB DESIGN

I'll tell you the main problem for me is not knowing how to use wordpress. I see guys with beautifully made, tight, informative websites like this:

Basement Waterproofing Information and Estimates | Wet Basement Contractors

Then I try to make a site in that niche, and it comes out like a child made it:
http://www.allcountywaterproofing.com/

I have no idea how they get all these neat little boxes in their sidebar and how they get things to look so tight. For instance, I can't even TYPE on my home page without the text displaying all ugly/sloppy looking.

WHAT am I doing wrong?

Like under the "basement waterproofing done right" bar look how far down the text is. Yet when I backspace, it deletes the picture and brings the text up directly underneath the bar. Like there is NO in between space so I can have just a little gap, its ALWAYS that huge gap, or no gap at all.

I HATE WORDPRESS. This should not be this difficult to learn how to make something as SIMPLE as text and images show up properly. I'm paying people on fiver to help me do things, and its still looking awful. Is it the theme I'm using?

Can someone tell me what theme this site is?
Basement Waterproofing Information and Estimates | Wet Basement Contractors

Look how tight their text is and its still easy to read. My text, not so much. When I try to mix text and pictures together, its IMPOSSIBLE to get it aligned properly.

Then I have no idea how they're making these little boxes with gray border around them, then filling them with pictures that have clickable links on top of the pictures. CAN SOMEONE PLEASE TELL ME HOW YOU DO THAT?

I would gladly pay a web guy, but this is a skill I NEED to learn.

Is it plugins that I need? I know the layout looks like crap and am about to start all over from scratch now. It doesn't have enough text, but the reason I used a big slider is I can't get text and images to sit right together in wordpress. So the ONLY way I see myself really getting this site "tight" is buy designing all the text/images in photoshop, and importing them over as pictures. Once I make a photo, I have no idea how to put another clickable image over it, or layer boxes, I'm just as such a loss right now I'm going to wind up redesigning a whole nother site, that looks just as bad because I can't figure out the SIMPLEST THINGS IN WORDPRESS.

This is a joke. I honestly feel like I can't do anything right working in wordpress.

#building #websites #wrong

Patrick 12 years ago

Hello,

First of all you don't need to get hyper about the fact that you hate wordpress or dont like it. Wordpress also doesn't care what your opinion is about it (: D ). Wordpress isn't a "magic" CMS, that you install and then wish and it delivers it exactly the way you wished.

All the steps that you have mentioned above are very easy to do if you have HTML and CSS skills.

At this point, I cannot give any other advice to you but to master in HTML and CSS, or hire someone to do it for you.

Patrick.
- Thanks
- 1 reply
Signature
Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support
{{ DiscussionBoard.errors[6327294].message }}
- jamaks 12 years ago
  
  Hi Redshifted, have to agree that the example you are giving is not a wordpress theme.
  As for the gap under the "basement waterproofing done right" this is caused by the style attached to the floated image and when it is in place there is 2em padding, which of course is removed if image removed. I do not know how much you can edit the stylesheet with wordpress but that is the obvious place to start. Have fun with it.
  
  Jim
  
  [ 1 ] Thanks
  
  {{ DiscussionBoard.errors[6327479].message }}

Tomos Wyn

12 years ago

Originally Posted by RedShifted

I HATE WORDPRESS. This should not be this difficult to learn how to make something as SIMPLE as text and images show up properly. I'm paying people on fiver to help me do things, and its still looking awful. Is it the theme I'm using?

I don't think you hate WordPress. Its a great system, keep at it and you'll get better, and get to know WordPress better. I think most of your problems stem from not knowing as much about HTML and CSS. Fundamentally this is what wordpress uses for its templates (as well as some PHP). Get to grasps with the basics of HTML/CSS and you'll get better whilst working with WordPress.

Originally Posted by RedShifted

Can someone tell me what theme this site is?
Basement Waterproofing Information and Estimates | Wet Basement Contractors

Can't say looking through the source, but it isn't WordPress. This is the guy that built it: Basement Related Websites I Have Worked on

Originally Posted by RedShifted

Like under the "basement waterproofing done right" bar look how far down the text is. Yet when I backspace, it deletes the picture and brings the text up directly underneath the bar. Like there is NO in between space so I can have just a little gap, its ALWAYS that huge gap, or no gap at all.

You seem to have an empty paragraph tag adding some space there. It's impossible to say what's going wrong without seeing what's going on without seeing your source code.

Originally Posted by RedShifted

Then I have no idea how they're making these little boxes with gray border around them, then filling them with pictures that have clickable links on top of the pictures. CAN SOMEONE PLEASE TELL ME HOW YOU DO THAT?

Either make an image in Photoshop with a gray border and link to it in your template file like so:

Code:

<a href="@">
<img src="/path/to/image.jpg" alt="alt text" title="title" />
</a>

Or create the image and add in a border with CSS:

Code:

HTML:
<a href="@">
<img src="/path/to/image.jpg" alt="alt text" title="title" />
</a>

CSS: 
a img { border:1px solid gray; }

Originally Posted by RedShifted

So the ONLY way I see myself really getting this site "tight" is buy designing all the text/images in photoshop, and importing them over as pictures

Many go down this route when building websites, including myself. You design the website in Photoshop and slice the images up. You then write some HTML and CSS that makes use of these sliced images.

I would gladly pay a web guy, but this is a skill I NEED to learn.

I've worked with people who think like this, and it's worked out good for them. They've taken what I've written and reverse-engineered what I've done to see how it works (if that makes sense).

It might make sense to download a premade theme (free or premium), install that and start doing minor tweaks until your happy. Little by little you'll get there!

I hope that made sense to you and starts getting you on your way.

[ 1 ] Thanks

{{ DiscussionBoard.errors[6327349].message }}

RedShifted 12 years ago

Wow you just showed me the motherload of basement waterproofing sites!

I checked that guys blog, then checked the chicks blog who he worked with, these people have designed A LOT of basement sites. A lot of them look the same too which I thought was hilarious.

They seem to be using a lot of the same content for all these different sites. I'm noticing too my problem is I'm focusing way too much on whats around the content, rather than the content itself. Like I murdered the header I made, so I'm taking out EVERYTHING, and just going back to the absolute basics.

It seems like these designer are taking incredibly basic websites, and just filling them out with beautiful/simple content.

I'm trying to make my site "artsy" and fancy, and its totally killing its identity.

Thanks a lot for dealing with my frustration and trying to help me because YOU DID.
You helped me a lot, I'm going to use all these dozens of sites they made to inspire something similar (in terms of simple clean layout), but different.

I got to stop trying to be a graphic designer when I'm not. I can do stuff in photoshop, but I need to leave all this fancy stuff alone and stick to the basics. Maybe I'll be able to make a better website this time if I just change what I'm focused on!

thanks - Red
- Thanks
{{ DiscussionBoard.errors[6327455].message }}
ueon 12 years ago

try reproducing designs that you think are good, and as you do it more, you'll be able to design your own pieces.
- [ 1 ] Thanks
{{ DiscussionBoard.errors[6327465].message }}
Rick Britton 12 years ago

yup, do it in html and css within wordpress and it will come out right
- Thanks
Signature
{{ DiscussionBoard.errors[6327642].message }}
RedShifted 12 years ago

Thanks guys! I definitely think I can figure out how to change the css within the stylesheet if worse comes to worse I'll buy another fiver gig.

So I'm trying to give the site an identity this time, and decided to do some experimental work in photoshop. I realized I can delete the entire top portion of the header, and I changed the hue a bit, and I think this shade looks better than the blue I had before.

I'm going to submit this header idea on fiver now, to see if someone can get rid of the jagged edges, then I'm going to have someone redo our logo again.

http://www.allcountywaterproofing.ou...com/wordpress/

After that I'm pushing our video down lower, and changing all the slideshow images to something classier with far less text. Then a our form will come up to the top right, and I'm having someone on fiver make the form look more professional.

I think I might have something to work with now, that looks a bit more distinguished, and with the right graphics/content it may look professional this time.

As I produce it now I will keep reference sites nearby as I didn't do that before, and I'm not putting in any more content untill I'm 100% sure each piece will work. When I made the site before I was just making images in photoshop, saying "oh yeh that looks nice", then I'd put them in the site and be like "that looks terrible".

Maybe someone can help me with this one last question. I have a guy on fiver install a slider for me and I gave him the 3 images to do it.

How can I change the images in the slider? All I have to do is replace those photos in my "media" area right? Make them with the same name then just delete the old ones and put in new ones? Will the slider automatically find the images?

I'm afraid to start uploading new images as it I break the slider thats another gig on fiver lol. I've spent so much money on fiver in the last 2 days for the smallest little fixes which is another reason I'm trying to learn this stuff on my own.

But all I have to do is just replace the pics in my "media" section right?

Thanks guys thats my last question for now.
- Thanks
{{ DiscussionBoard.errors[6327685].message }}
Tomos Wyn 12 years ago

Your slider images are located here (from viewing source) http://www.allcountywaterproofing.ou...s/main-teaser/

It's hard to say if the guy you hired hardcoded the slider or if it's generated dynamically by WordPress - your best bet would be to ask him.

Backup the images in that directory I linked you to, upload the new ones (same size) and refresh, slider images should now be changed.
- [ 1 ] Thanks
{{ DiscussionBoard.errors[6327729].message }}
RedShifted 12 years ago

HAHAHA THANK YOU SO MUCH!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!! You just saved me another $5 on fiver. I had a feeling it wouldn't be as simple as replacing the images in my media folder just to think I was willing to pay someone $5 just to take 3 images and drop them into that folder. I get so excited when I learn new things like this as its really so valuable to know as much as I can for my own benefit.

Finally I'm making some progress now once this new banner comes back, and cleaner images for the slide show, then a customized blue/green form on the top right, this website will look 1000xs different!

THANK YOU SO MUCH for your help I feel like I owe you 5 bucks now! =] Red
- Thanks
{{ DiscussionBoard.errors[6327830].message }}
webpeon 12 years ago

hey Red.. Im not sure if youve ever heard of firbug for firefox or chromes 'inspect element' option, both of which basically do the same thing.

I recommend using either of these as you learn to tweak the final look of your website, I cant really explain how each works without consuming alot of time, Im sure theres quick tutorials online somewhere which could but basically its a tool you can use to live edit the code used to display your site without making permanent changes inside the files itself...

I use chromes inspect element myself, right click the part of the page youd like to change and select 'inspect element' it'll pull up a new box, html on the left and css on the right (theres a heap of other settings in that box but for now the default selections will be fine) though feel free to play, its not destructive, double click on any of these values and adjust... its a fullproof learning experience as youre not actually editing the files themselves, relaod the page and its back to default, once happy make the necessary changes in your files and youre all set.
- Thanks
Signature

Web 2 Mobile
The Future of The Web
{{ DiscussionBoard.errors[6328434].message }}

I suck at building websites what am I doing wrong?

Trending Topics

Google Ads, landing pages, and Clickbank links

Carry out better target audience research

YouTube gets shopping display tools and affiliate partnership updates

A Very Strange Internet Problem

Membership area with multiple income streams