1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

First site... What do you think?

Discussion in 'Websites' started by sabscape, May 6, 2013.

  1. #1
    Hello guys and gals. I have just recently started learning HTML and CSS I really like it. The only problem is that I have nobody to give me any kind input or direction past "it looks nice". Yes the web has many great resources however human interaction is always helpful. I made my first website for my aunt's salon & spa. I would appreciate it if I could get some input on how I am doing or mistakes I have made. Oh and I apologize in advance for horizontally laid out CSS. I'm not sure if that's acceptable or not but I've always seen it laid out vertically.

    sforoutan55555.coffeecup.com

    Thank you x10.
     
    sabscape, May 6, 2013 IP
  2. Sonwebhost

    Sonwebhost Active Member

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #2
    Ok site needs a submit form for orders can add a free paypal to the site, directions, and about us page. Good job on your first site. Enjoy
     
    Sonwebhost, May 6, 2013 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    The use of graphics for text makes it inaccessible. you have text, make it TEXT, not an image. Screen readers, braille readers, search engines, people blocking images due to bandwidth restrictions, there's more to web development than making some images and slicing them up.

    Likewise the complete lack of content telling people where they are on the home page isn't all that useful -- I'd probably shink or axe the photo sucking down most of the page and move the 'about' page to be the home, though that funky sliced image on that page is kinda... ick, especially with the colors all washed out like that.

    It's a fixed width design, meaning it's useless for netbooks, tablets and smaller devices, and anything other than the magical screen size you happened to have drawn your pretty pictures at. Starting from a goofy picture of a website is the road to failure, since you're letting the paint program dictate the layout instead of building useful semantically marked up content, then letting that dictate the layout.

    The fonts are declared in fixed metrics, aka PX -- so fonts do not auto-enlarge for the folks who expect it to. You should where possible be declaring fonts in %/em, while remembering that EVERYTHING should be fluid or auto-adjusting to deal with that.

    You've got presentational images (like swoosh3 and headergirl8) in the markup -- since they are not actually content and are just presentational they have NO business in your HTML -- likewise you are using multiple large .png files with alpha transparency... to the point you have 180k in 2 files for that swoosh/headergirl section alone doing a single ~40K or smaller jpeg's job.

    NOT that said images are 'viable for web deployment' since it's 100% fixed width layout design; and no matter what the artsy fartsy types or lazy 'sleaze out a site any old way' folks will tell you, fixed width layout is a miserable steaming pile of /FAIL/ from an accessibility standpoint.

    You are using javascript for hovers -- that's CSS' job -- and you're using multiple image files on said hovers where things like the incorrectly named "CSS Sprites" could again reduce the number of files needed.

    Likewise you have no ALT text for your images (again, images off IS important), attributes like BGCOLOR that have no business being used on any website written after 1997, static style inlined in the markup, TYPE on the favicon which could actually result in it NOT working, and of course the HTML 5 doctype when you aren't even doing anything HTML 5. (Not that I would EVER recommend the steaming pile of half-assed idiocy known as HTML 5 with it's setting coding practices back a decade or more!)

    You redeclare the font sizes without re-declaring the line-height, that can lead to cross-browser issues. Your font-family stacks are incomplete, and you seem to be trying to use serif fonts on screen. Serif is for print, sans-serif is for screen. Say it with me: Serif is for Print, Sans-Serif is for Screen.

    You're just starting out, I get that -- but you've failed to grasp what HTML is for or how websites actually work. The images for text and fixed sized images to build a layout in particular is just "uhm... NO!". Hell, the 'services' page being nothing but one giant image as text with no actual content?!? That's just "wow" on how NOT to build a website!
     
    deathshadow, May 7, 2013 IP
  4. sabscape

    sabscape Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Thank you so much for your very helpful comments, deathshadow. I totally agree that the text should be text. I originally had it that way but became frustrated and took the easy way out. I don't want anyone to think I just want to throw images together to quickly put together a site. I want to learn how to build sites properly so I take your comments very seriously.

    I used the Doctype declaration because I was having a lot of trouble with Internet Explorer compatibility. the Doctype seemed to keep everything displaying smoothly across different browsers. I understand this is probably not the best way to do this. I will have to do some more research on cross browser compatibility.

    Is it really so wrong to have a fixed width? I feel like I have seen a lot of professional sites that have a fixed width and I've read at a few places that it's fine as long as you don't set the width more than 800px (mine is 1000px I know. I read this recently and plan on remaking the site properly). I feel like there aren't many screens people use now with a resolution width less than 800. And if you are using a dinosaur computer, I would imagine that you would be used to running into problems when browsing the internet. Also since I was using a lot of images that were set pixel sizes it seemed like using %'s would cause some problems like images and containers stretching. Also I personally dislike websites that constantly resize themselves into different layouts. If I want it to still be a fixed width would I have more success with making the container size set in em's then? I think I may be missing something.

    ^^^ Amazing. Thank you.

    I do really appreciate the constructive criticism and apologize for the noobiness.
     
    sabscape, May 7, 2013 IP
  5. Sonwebhost

    Sonwebhost Active Member

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #5
    http://loads.in/
    Look at it here see how it working
     
    Sonwebhost, May 7, 2013 IP
  6. david_of_makurl

    david_of_makurl Greenhorn

    Messages:
    3
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #6
    I actually thought it looked pretty nice, the design looked like something you'd find on a professional site, for a first site, it's above average.
     
    david_of_makurl, May 7, 2013 IP
  7. freelancewebaz

    freelancewebaz Well-Known Member

    Messages:
    976
    Likes Received:
    23
    Best Answers:
    1
    Trophy Points:
    145
    #7
    It's a decent first attempt at building a website however a few things should be noted (most of which have already been pointed out).

    1. You shouldn't use inline CSS in most situations.
    2. The bgcolor attribute that you set on the body tag should be removed and replaced with a proper CSS rule
    3. Implementing the menu rollover via CSS rather than obtrusive javascript is the way to go
    4. You used the HTML doctype but used things that won't validate (see the report http://html5.validator.nu/?doc=http://sforoutan55555.coffeecup.com/)
     
    freelancewebaz, May 7, 2013 IP
  8. Abh

    Abh Active Member

    Messages:
    162
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    60
    #8
    Nice first time website. Mine was better but i was testing all sorts of things and made it more complex intentionally.

    You learn better by making the site for someone else, clients come with crazy ideas and you need to make them real.
     
    Abh, May 7, 2013 IP
  9. gkuang2

    gkuang2 Active Member

    Messages:
    103
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    60
    #9
    The site looks great. With more experience you can probably sell your services on here. Good Job.
     
    gkuang2, May 7, 2013 IP
  10. matt_62

    matt_62 Prominent Member

    Messages:
    1,827
    Likes Received:
    515
    Best Answers:
    14
    Trophy Points:
    350
    #10
    I think it looks clean and simple.I am guessing it is just practice and not a final site? I only ask as you will really need your own domain name also what you really need is to make it easier for people to contact you, You could put in a small inquiry form on the right hand side. Or on the right have a button "make a booking" and have that link to your contact page.
    I disagree with the others in regards to putting paypal on the site. Based on the fact that your aim seems to be to list the features of your business and gain potiential foot traffic, rather then to sell products online.

    @everyone else, I think you will find the op is using some sort of RVbuilder software, I doubt he has full control over what the code generates, and or, if he does have that control, he may be at the stage where he doesnt know what html /css is.
     
    matt_62, May 7, 2013 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    ANY doctype will fix that -- I still prefer using a RECOMMENDATION Doctype like HTML 4.01 STRICT or XHTML 1.0 STRICT (I use the latter in most cases) instead of one that's still in DRAFT... if for no other reason than HTML 5 being a steaming pile with a buggy validator, loosened structural rules, re-introducing pointless redundancies, and in general setting coding practices back a decade or more.

    You SHOULD have a doctype, I just take issue with HTML 5's pointless lip-service one.

    Have you seen what it does on a iPod touch? iPhone? Droid Phones? Tablets? Netbooks? There will ALWAYS be lower resolution devices or devices that LIE about their resolution (as being double or half what it really is unless you overrride that)... how useful is that 800 designed layout going to be when it's shown 4" wide or smaller?

    Lazy sleazeball ****'s you mean who's sites have bounce rates through the roof.

    ... and what good is that crappy little stripe 800px layout on a 1920 or 2560 wide display? How useful is it to large font/120dpi users?

    It's a sleazy cop-out used by artsy fartsy types, script kiddies who think their stupid image rotating banner crap is of any use to users instead of a massive waste of space and bandwidth (and if it DOES result in impressions/conversions it's because they put their CTA's in them!), and just plain lazy developers who don't actually give a flying purple fish about accessibility.

    It's the trifecta of inaccessible design; fixed width, fixed metric fonts, inaccessible color contrasts... and yes, a lot of 'professionally' done sites have all three; but that's the difference between working as a 'professional' and actually doing professional grade work. There's a reason you don't see the trifecta on most of the big success stories of the web.

    It's not about "dinosaur" computers, is a iPod Touch 4 a 'dinosaur'? Icoo D70W? Samsung Galaxy 4s? 27" 2560x1440 IPS display?

    That's why full fixed width images are NOT viable for web deployment no matter how much the photoshop jockeys spanking it on the display and then having the cojónes to call themselves "designers" seem to think they are.

    Shouldn't bother you if you're not resizing the window all the time -- which is the point of responsive layout. We're not talking different width for every page, we're talking making content adjust to smaller displays and make better use of larger displays, and in general tailoring the delivery of the content to the user's preferences instead of the designers.

    Which for most designers is a kick to the crotch concept; they cannot put their ego's aside long enough to realize their cutesy artsy crap is USELESS to anyone visiting a website. It's a mental hurdle that is quite difficult to jump; but the fact is people visit websites for the CONTENT, NOT the goofy graphics you hang on it, NOT for the gee ain't it neat scripting and effects, but the CONTENT.

    Fixed width layout that's useless on netbooks, tablets and phones, while at the same time an inaccessible crappy little stripe on anything 21" or larger is NOT good design -- EVER! Anyone telling you otherwise is packing you so full of sand you could change your name to Sahara.

    These are usually the same idiots who start out drawing goofy pictures of a layout before they have semantic markup of the content or a working semi-fluid elastic

    EM's is called elastic layout, I do advise doing this BUT, not as a fixed EM size either... again you end up with a crappy little stripe at 1920+ and useless on anything smaller than a breadbox. Semi-Fluid (has a maximum width to prevent long paragraphs from getting hard to read), Elastic (so that maximum width enlarges when the default font size is different) and Responsive (adjusting the layout to best meet the capabilities of what it's being shown on) -- ALL THREE, anyone not doing that is just crapping out inaccessible useless train wrecks.

    ... and yes, there are a LOT of "professionals" just crapping sites out any old way. Just like there are a lot of "professionals" dumb enough to advocate using bloated garbage frameworks like jQuery, idiotic garbage like OOCSS or HTML/CSS frameworks, and bloated overpriced crap like Dreamweaver or other idiotic 'tools'. The only thing in said list that can be considered professional grade tools are the people promoting their use!

    I think you're missing that certain things -- like fixed width full-content area width images have no place on an accessible website... on that same list are things like multiple equal-height boxes, fixed height elements on anything past the logo, etc, etc... There are a lot of things one can do in design that FORCE you into a fixed width; and that artsy fartsy garbage has little if any business ON A WEBSITE! If somethign looks like it's going to interfere with the fluid and responsive part of your layout, it doesn't belong on the site that way! It's called "working within the restrictions of the medium".

    ... and yes, said "professionals" will protest such statements; that's because they get upset when their ineptitude is aired for the world to see! Most people don't want to hear "pull your head out of 1997's arse" or "You've been making useless inaccessible crap for a decade and a half" -- when it's the truth. Most would rather accept a fiction than an inconvenient or embarrassing truth! There's actually a psychological term for it: dissonance reduction. When a truth (supported by facts, in this case things like the HTML/CSS specs, original intent of HTML, point of CSS, and accessibility guidelines like the WCAG) conflict with what they've been taught off inaccurate outdated garbage sites liek W3Schools, from educators who aren't qualified to teach someone how to use a restroom, or just plain ignorance or an unwillingness to put actual effort into their work. To borrow from Ike:

    "Some of the officers, in the long years of peace, had worn for themselves deep ruts of professional routine within which they were sheltered from vexing new ideas and troublesome problems." {snip} "Urgent directives from above and protest from the occasional 'alarmist' could not eliminate an apathy that had its roots in comfort, blindness, and wishful thinking."
    -- Dwight D. Eisenhower, Crusade in Europe.

    We all start somewhere, trust me a decade and some change ago I was making all the same mistakes! The presence of so much web rot and bad advice out there, along with broken methodologies and ways of thinking about websites doesn't make the learning process easy. The core concepts of good design and development like semantic markup, separation of presentation from content, and responsive layout are dismissed by many "professionals" who cannot see any farther than the screen they happen to be seated in front of, or scoffed at by those who just cannot be bothered to do anything but sleaze out another inaccessible train wreck nobody wants to use -- and if they have traffic at all, it's just because their content is so damned good, people will put up with any amount of annoying, painfully useless BS to get at it!
     
    deathshadow, May 8, 2013 IP
  12. sabscape

    sabscape Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #12
    Okay it looks like I may need to go back to Google school for a minute to get a little more comfortable with html/css. Thanks for all of your comments. They will seriously help me get things right. I'm glad I could get a could get some direction while diving into all of this.

    Once again thank you deathshadow for the wide assortment of input and advice. There does seems to be a huge problem in our society with people being unwilling to opening their mind to change. I imagine the problem would still exists among web developers. It's hard to imagine one having a closed mindset in such a progressive industry.


    I will have it up on a real domain pretty soon. This is the domain and the site that's on there now:

    inspirationglencoe.com

    That's part of the reason why I'm redoing it. She hates it and I want to learn how to create web sites. Boom. I didn't use any kind of web builder though. Just Notepad, Notepad++, and Photoshop. I know what html/css is and what it does but I am still foggy with when and where to use what or how certain properties work together.

    Oh and my apologies for not posting this in the review section. I got a warning. :confused:
     
    Last edited: May 8, 2013
    sabscape, May 8, 2013 IP