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.

Bootstrap 3 carousel dips first slide

Discussion in 'Programming' started by sarahk, Oct 14, 2015.

  1. #1
    Site: upload_2015-10-15_12-55-40.png

    It's got a series of slides promoting an upcoming conference and they all look great except for the first slide

    upload_2015-10-15_12-57-13.png

    Any tricks on how to make that first one sit right?

    I've gone through the css and expected to find something useful that I could tweak, something referring to children etc but nada.
     
    sarahk, Oct 14, 2015 IP
  2. shipumh

    shipumh Active Member

    Messages:
    44
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #2
    [​IMG]

    Add margin-top:-20px; (inline style) for a quick fix.
     
    shipumh, Oct 19, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Yeah, go find a stick to scrape the idiotic mouth-breathing halfwit bullshit known as bootcrap off with before tracking it all over a website's carpets.

    Though with the inaccessible pixel metric fonts, flawed layout methodologies of equal height elements, effectively invisible menu thanks to a lack of colour contrasts, giant scripttard slideshow, bootcraps idiotic "let's make the show/hide menu use twice the markup it needs, abuse form elements outside of a form and go full scripttard on it"

    You never go full scripttard.

    I'd suggest tossing that entire bloated laundry list of how NOT to build a website in the bin... as evidenced by the 17k of markup to deliver 1.4k of plaintext and a half dozen content images. It's a slow loading inaccessible train wreck that would be better killed off sooner than later.
     
    deathshadow, Oct 19, 2015 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #4
    Don't forget you got offered the job first!
     
    sarahk, Oct 19, 2015 IP
  5. NetStar

    NetStar Notable Member

    Messages:
    2,471
    Likes Received:
    541
    Best Answers:
    21
    Trophy Points:
    245
    #5
    What a broken record. Who cares if you don't like bootstrap.... The majority of web sites out there use some sort of framework.. I bet you visit web sites that use the very same frameworks that you hate. And if you refuse to use a web site for using such a framework that proves you are in a league of your own and your opinion on what others should or shouldn't use is irrelevant...and just a matter of your own preference.
     
    NetStar, Oct 19, 2015 IP
    dcristo likes this.
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Actually there are a LOT of websites I don't visit anymore because they are inaccessible broken train wrecks -- in which case I can usually find a site that isn't a broken disaster. The only time I put up with crappy sites is when the content is "that damned good" or unique, and even then I often end up resorting to user.css or user.js to turn the disaster into something usable.

    ... and usually it's asshattery like bootcrap, jQuery, yui or some other halfwit bloated "framework" at fault.

    But of course we have @dcristo with the "wah, wah, I don't want to hear it" where instead of arguing the merits of the framework, you have to assume there's something wrong with me; could it be you can't actually come up with a legitimate benefit to these bloated buggy broken disasters that result in web concepts that have zero damned business on a website in the first place?

    Because of course, I'm the one making ad hominem arguments... right...

    *** SIDE NOTE *** you know the spell check in FF is rubbish when it wants to auto-correct "hominem" into "Eminem"... you don't even want to know what it wants to change exacerbated into...
     
    Last edited by a moderator: Oct 21, 2015
    deathshadow, Oct 21, 2015 IP
  7. Vision2Code

    Vision2Code Greenhorn

    Messages:
    33
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    23
    #7
    You hate Bootstrap so much you put it in your sig? That's kind of weird...
     
    Vision2Code, Oct 21, 2015 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    It is a blight upon the internet that developers are dumber for it even EXISTING. By its very nature it creates non-semantic code through the use of presentational classes, teaches people to slap classes on everything, teaches people to add extra DIV before they actually need them, and typically double the size of the markup to still have to write the SAME amount of your own CSS that then needs some retarded library that minified is bigger than I'd allow my HTML + CSS + SCRIPTS to reach in size?

    Damn straight it's going in my signature along with other mouth-breathing halfwit bullshit like jQuery.

    I've never seen a site built with it that was worth a flying purple fish other than Twitter itself (and to be frank I don't actually consider that to be worth a damned either, as you could probably tell from my normal post length on forums). Typically they are fat bloated inaccessible train wrecks and laundry lists of how NOT to build a website.

    Since as I often say if you don't know what's wrong with code like this:

    
            <div class="container">
                <div class="row holder">
                    <div class="col-md-3 logo"><a href="/"><img src="http://static.nzpif.org.nz/img/badge/www-sm.jpg" alt=""></a></div>
                    <div class="col-md-6 new">
                                                <p>New Zealand Property Investors' Federation, (NZPIF) is the umbrella body for 20 local Property Investors' Associations throughout New Zealand.</p>
                                        </div>
                    <div class="col-md-3 phone">
                                            <p class="text-left"><img src="http://static.nzpif.org.nz/img/2014/icon-ph.jpg" alt=""> <span style="color:#000">Phone:</span> (03) 357 9243</p>
                                            <p class="text-left"><span style="color:#000">Email:</span> <a href="mailto:www&#64;nzpif&#46;org&#46;nz">www&#64;nzpif&#46;org&#46;nz</a></p>
    Code (markup):
    or even something as simple (and ineptly built) as this:
        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>
    Code (markup):
    You probably have zero damned business building websites. That ANYONE can claim it makes life "easier" or makes sites "Accessible" or even is a shortcut to responsive is nonsensical gibberish reeking more of parroting than rational thought; made either through ignorance or a nasty dose of bandwagon.

    People use it out of ignorance, peer pressure and not knowing enough on the topic to make a rational informed decision. Most of the people who defend it's use not being qualified to even flap their gums on the subject of HTML or CSS!
     
    deathshadow, Oct 21, 2015 IP
  9. Vision2Code

    Vision2Code Greenhorn

    Messages:
    33
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    23
    #9
    People like their themes to be built on Bootstrap as it makes it easy for them to build custom layouts, load in icons, etc. I don't think it should be used for every project but it definitely doesn't deserve the hatred you're wasting time/energy on.
     
    Vision2Code, Oct 22, 2015 IP
    ThePHPMaster likes this.
  10. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #10
    But that's the point - it doesn't "make it easier" - you still have to learn how to use Bootstrap, while you could've just learned proper HTML / CSS. Learning another subsection of a language (or two, in Bootstrap's case) is just counterproductive, really. Not to mention that the standard Bootstrap way of doing things add both extra weight to the pages, but also to the libraries needed to load properly - which could all been avoided if you just wrote the page in normal HTML, with a CSS-file attached. Another reason to not use Bootstrap is probably also that the layouts it "helps" build usually have nothing to do on a webpage to begin with. Like equal height containers, 4 or more columns, grids that break the minute you zoom, up the font-size, or do anything apart from doing nothing, etc.
     
    PoPSiCLe, Oct 22, 2015 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    My reaction every time someone uses the word "easy" when talking about a framework:

    [​IMG]

    I will never understand how adding something extra to learn, that makes you write more HTML and more CSS, that results in layout concepts that have no business on websites and makes you struggle to make the simplest of changes, that prevents people from even learning how to do anything properly in the first place, is somehow magically "easier". Sure sounds like more work to me -- particularly when the results are such utter and complete nonsense.

    Again, see that <nav> that I took right from their simplest demo? Relies on scripttardery to do CSS' job, endless pointless classes for nothing, abuse of a button tag outside of a form (a scripttard classic), has a comment placement known to trip rendering bugs, uses a class that's confusing since it's the same as a pseudostate... how the hell is that train wreck of idiocy easier than:

    <div id="mainMenu">
    	<a href="#mainMenu" class="showMenu"></a>
    	<a href="#" class="hideMenu"></a>
    	<ul>
    		<li><a href="#" class="current">Home</a></li>
    		<li><a href="#about">About</a></li>
    		<li><a href="#contact">Contact</a></li>
    	</ul>
    <!-- #mainMenu --></div>
    Code (markup):
    Which is what I'd have in place to implement the same functionality? But sure, three to four times the markup is "easier" -- RIGHT. NEEDING Javascript to even have a responsive element function at all is "easier" -- RIGHT... throwing presentational classes at everything is "easier" -- RIGHT...

    I want you to build an ark.... RIGHT...

    It's as delusional as antivaxxers, foodies and religious extremists.
     
    deathshadow, Oct 22, 2015 IP
  12. Vision2Code

    Vision2Code Greenhorn

    Messages:
    33
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    23
    #12
    A framework like Bootstrap makes many developers more productive, maybe easier was the wrong word. You put way too much energy into this. If I was wrong then the framework would not as big as it is today...
     
    Vision2Code, Oct 22, 2015 IP
    ThePHPMaster likes this.
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Another word that does not apply. How is making more html "productive"? How does ignoring separation of presentation from content when a layout is supposed to be responsive "productive"? How is ignoring the reasons HTML and CSS even exist "productive"?

    It's another one of those terms people throw out there about it that's utterly and completely unsupported by the effort required or the end result.

    Sites built with that nonsense are such utter and complete useless trash to me as a USER, that when someone asks for even the simplest of fixed my advice is to pitch the entire disaster in the trash and start over clean, so you actually have SOME sort of control and aren't doing things that have no damned business on a website in the first place.

    ... and remember, popular doesn't make something good. See Donald Trump, Kanye West, and Skrillex.
     
    deathshadow, Oct 22, 2015 IP
  14. Vision2Code

    Vision2Code Greenhorn

    Messages:
    33
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    23
    #14
    Maybe you should try to developer a website with Bootstrap.. if you think it's not productive it's likely because you're not that skilled in HTML/CSS or you haven't actually given it a chance. CSS is meant to style sites, and DIVS are meant to have IDs so you can target them. What is wrong with that? I think you're just upset because you're seeing people make sites that look better than yours and they're doing so in a very short amount of time.

    You're right about popularity though, Donald Trump is horrible.
     
    Vision2Code, Oct 24, 2015 IP
    ThePHPMaster likes this.
  15. malky66

    malky66 Acclaimed Member

    Messages:
    3,996
    Likes Received:
    2,248
    Best Answers:
    88
    Trophy Points:
    515
    #15
    lol..now you really are just taking the piss, pretty sure @deathshadow was skilled in HTML & CSS before you were even an itch in your daddy's pants.
     
    malky66, Oct 24, 2015 IP
    sarahk likes this.
  16. Vision2Code

    Vision2Code Greenhorn

    Messages:
    33
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    23
    #16
    WOW. I was clearly going for the he hasn't given it a chance option. It sounds like someone is too negative to adapt..
     
    Vision2Code, Oct 24, 2015 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #17
    EVERY single thing it does runs entirely contrary to everything I know about accessibility, design, and the entire reason HTML and CSS EXISTS. I would never get as far as completing a site with it since even their stupid halfwit "starter template":

    http://getbootstrap.com/examples/starter-template/

    Is fat bloated idiotic non-semantic inaccessible BULLSHIT. As I keep saying, if you don't know whats wrong with this:

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    Code (markup):
    Or this:
        <link rel="icon" href="../../favicon.ico">
    Code (markup):
    Or these:
       <!-- Bootstrap core CSS -->
        <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
    
        <!-- Custom styles for this template -->
        <link href="starter-template.css" rel="stylesheet">
    Code (markup):
    Much less asshattery like this:
        <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
        <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
        <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
    
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    Code (markup):
    Or bloated nonsense like this:
        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>
    Code (markup):
    Or outright dumbass bullshit like this:

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="../../dist/js/bootstrap.min.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
    Code (markup):
    THEN YOU HAVE ZERO DAMNED BUSINESS BUILDING WEBSITES!!!

    When their STARTER template is such bloated idiotic halfwit bullshit, why would ANYONE use that by choice?!?

    In case you are unaware of what's wrong with that:

    1) If you have to use X-UA there is something disastrously wrong with your HTML or CSS

    2) "shortcut" should be included with "icon" for legacy support.

    3) no media targets on the stylesheet <link> -- I'm so sure that screen layout makes sense for print, aural or teletype.

    4) IF you need scripttardery for legacy compatibility or to make a page responsive, you probably don't know enough to be telling others how to build pages.

    5) That stupid hamburger icon crap that needs scripttardery to even function and basically doing something CSS can do 99% of all by itself, resulting in THREE TIMES the markup needed for that with a anchor doing h1's job, endless pointless classes, confusing use of a reserved word (active) as a class... (since it already exists as a pseudo, that's just shitty coding)

    6) Even MORE scripttard bullshit that takes and even DUMBER framework, the idiocy known as jQuery, to further bloat out the page for NO legitimate reason...

    Which is how even their starter template with no actual content results in 255k in 7 files to deliver 210 bytes of plaintext -- for something that if I wrote it probably wouldn't even break 4k in 3 files. I goes even further being broken in landscape thanks to an incomplete viewport meta, having nothing resembling semantic markup, up-tree linking breaking portability -- EVERY SINGLE LINE OF THEIR SIMPLEST DEMO are stunning examples of developer ineptitude.

    But sure, writing more HTML and having to write more CSS of your own by relying on some 200+k of libraries and frameworks is "easier" -- sure it is.

    Which of course is why if I had written that same page, it would have gone something like this:

    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1"
    >
    
    <link
    	rel="shortcut icon"
    	href="favicon.ico"
    >
    
    <link
    	rel="stylesheet"
    	type="text/css"
    	href="screen.css"
    	media="screen,projection,tv"
    >
    
    <title>
    	Starter Template for SFERL
    </title>
    
    </head><body>
    
    <div id="top"><div class="widthWrapper">
    
    	<h1><a href="#">Project Name</a></h1>
    
    	<a href="#top" class="showMenu"></a>
    	<a href="#" class="hideMenu"></a>
    
    	<ul>
    		<li><a href="#" class="current">Home</a></li>
    		<li><a href="#about">About</a></li>
    		<li><a href="#contact">Contact</a></li>
    	</ul>
    
    <!-- .widthWrapper, #top --></div></div>
    
    <div id="content" class="widthWrapper">
    	<div class="leader">
    		<h2>Semi-fluid Elastic Responsive Layout Starter Template</h2>
    		<p>
    			Use this document as a way to quickly start any new project.<br>
    			All you get is this text and a mostly barebones HTML document.
    		</p>
    	<!-- .leader --></div>
    <!-- #content.widthWrapper --></div>
    
    <script src="library.js"></script>
    
    </body></html>
    Code (markup):
    Basically almost a third the markup even with the more aggressive formatting habits and extra settings.

    I have never seen a site sleazed together with bootcrap or relying on nonsense like jQuery that wasn't a fat bloated steaming pile of shit, filled to the brim with things I'd NEVER do in coding a website, and quite often with layout concepts that have zero damned business on a website as they force you to write content to the design instead of having the design adapt to the content.

    Just LOOK at the INEPTITUDE required to sleaze out even the simplest of layouts with it like this:

    http://getbootstrap.com/examples/justified-nav/

    Gibberish use of numbered headings, paragraphs around non-paragraph content, endless pointless classes for NOTHING, endless pointless scripttardery for Christmas only knows what, again no media targets on the <link>... and even something as simple as this:

    <div class="col-lg-4">
    Code (markup):
    Qualifies as "if you don't know what's wrong with that, you have ZERO business writing websites".

    Hey Zeus H mammary plowing Christmas, just how ignorant do you have to be to slurp up this stuff like following around Pam Anderson with a waffle cone in the hopes she really does crap strawberry ice cream?!?

    Setting aside my knowledge as a developer, I've never seen a site as a USER built with bootstrap that wasn't an inaccessible broken mess on anything other than the magical combination of default font size and screen resolutions the designer happened to be using. If you have even the slightest accessibility needs -- you know, part of the audience HTML and responsive design are both supposed to be addressing -- bootcrap ends up being the developer giving you a giant middle finger; hence why as a USER I respond to people using bootcrap in kind... and that's pretty much all my ranting here is -- responding in kind to developers who tell users to go perform an anatomically impossible sexual act upon themselves because said dev's are too lazy, ignorant or sleazy to give a shit if what they vomit up and have the unmitigated gall to call a website is actually useful to users.

    MUCH LESS that the resulting pages run anywhere from three to ten times the total filesizes needed AND two to twenty times as many separate files so they are agonizingly slow loading once you get into having a real site? Screw that and screw that type of thinking!

    Adapt? I'm not into adapting to dragging things kicking and screaming back to the bleeding edge of 1997 development practices, which is mostly what asshattery like bootstrap, jquery and even the majority of HTML 5 seems to be bound and determined to do!

    Of course, if you are already working in an environment filled with "HTML, what's that" and "accessibility, what's that" development where you let PSD jockeys piss all over the place in their ignorance and then sleaze it into systems like Turdpress where the people writing the markup and the markup it shoves down your throat is bloated maggot ridden filth to begin with, such concepts may be lost on you.

    See why 99% of the nonsense at template whorehouses like Themeforest, templateMonster, and even Code Canyon are nube predating scam artist sleaze put together by people who don't know enough about HTML, CSS or accessibility to be designing but two things right now...

    Dicking around drawing goofy pictures in Photoshop is not design, bootstrap is a laundry list of how NOT to build a website, jQuery is a fat bloated pile of manure most people use to either do CSS' job, stuff that would be simpler and easier without the framework, or has no damned business on a website in the first place... HTML 5 reintroduces redundancies 4 strict was trying to get rid of and then introduces all new pointless redundancies -- and they "let their powers combine" to enable people who have no damned business making websites either prey on the ignorance of clients who don't know any better, or delude themselves into thinking they know what "Design" means -- when clearly they do not!
     
    Last edited: Oct 24, 2015
    deathshadow, Oct 24, 2015 IP
    malky66 likes this.
  18. Vision2Code

    Vision2Code Greenhorn

    Messages:
    33
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    23
    #18
    That was the most arrogant thing I have read in a long time. Your website is fact that you don't know enough about design to hate on other designers who are actually building beautiful websites. Please show off some of your work if you feel like you're such a great designer. I have the feeling you can code but that's it.

    Oh, and I did somewhat agree with the first half of your last message. But wow, HTML 5 is the future and what you better get used to if you're in the business of building websites. Seriously, how can you ignore? If you can do something better then hey, that's great! Talk about what you do, don't just hate on HTML 5, jQuery and Photoshop web designers.. What good does that do?
     
    Last edited by a moderator: Oct 26, 2015
    Vision2Code, Oct 26, 2015 IP
    ThePHPMaster likes this.
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #19
    First, @sarahk, sorry but I'm about to go full threadjack.

    <hengist>threadjack, THREADJACK, THREADJACK, you're all gonna die... die...</hengist>

    You never go full threadjack.

    Heh, just telling it how it is...

    ... and there it is, Beauty. What if I told you that beauty -- much like SEO -- is only a small part of building a website and/or design? Something a dearly departed friend used to say on the subject:

    "Doesn't matter how pretty a site is, if it's useless to visitors what good is it?"

    DESIGN must by definition include the engineering and structure, not just spanking it on a canvas like Bob Ross and his happy little trees. That "engineering" including things like meeting accessibility norms and providing graceful degradation for when all the fancy stuff like CSS and JavaScript don't function. That's part of why CSS even exists and is the ENTIRE reason HTML exists!

    There's a reason I hold up Google as an example of brilliant design; it's utilitarian. You want to give these PSD jockeys with the unmitigated gall to call themselves designers a fright? Try telling them that Craigslist is "good design"; their reaction is typically that their -- to borrow from Larry the Cable Guy -- "peeper shrinks in so far it shoots out their pooper".

    What do visitors come to websites FOR? The answer is the CONTENT. That's why I advocate content first development... You may want to take the time to read the thread I made explaining using progressive enhancement and the "content first" approach since it takes the time to actually explain there is more to a website than what it magically looks like for people at the same resolution, dot pitch, and quality of vision that the "designer" sat in front of. A REAL designer accounts for these things from the start.

    https://forums.digitalpoint.com/threads/progressive-enhancement-design-from-the-inside-out.2759516/

    My own personal page I have great issues finding a colour scheme I'm happy with -- made a big mistake with that one and designed it on a IPS, forgetting that regular LCD's typically get 15% gamma applied to the green and/or blue so instead of the Commodore tans it was designed for, a lot of people are getting washed out orange or purple.

    But let's use another site with a more practical finished design:
    http://www.ewiusb.com/

    That is an example of a site done correctly; or at least as correctly as I could do six years ago (I've improved my methodology since then a good deal). The header matches the product, the background and footer matches the product's packaging (Though I still hate on the footer's drillplate and brushed look, it's fine as is).

    But MORE IMPORTANT than "ooh shiny" appearance is that it meets every major accessibility qualification that your typical "designer" would be stuck going "what's that" or end up being fined for if used on a government, bank or public utility site in many nations worldwide. The UK for example is famous now for this!

    The design uses dynamic fonts and is elastic. This means normal users will get this:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal96.jpg

    But large font/120dpi users like myself get this:
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal120.jpg

    Notice the images do not scale, only the fonts, padding, columns and max-widths. This means the layout will work anywhere from a 12px (older Sun Workstations) right up to a high end 4k media center's 32px or more system default font-size; hence why declaring font sizes in pixels and designing in pixels is inept nonsense.

    Images off/blocked (a common choice for people on metered connections like our friends in Canada, Austrailia or New Zealand) it's not as pretty, but it's still 100% functional and useful.

    http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom800WideNoImages.jpg

    It even thanks to it's semantic markup and logical document structure gracefully degrades when CSS is unavailable.

    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNoCSS.jpg

    Which is good since that's what screen readers (programs that read the screen to you), braille readers and search engines pay the most attention to.

    Also important to those and some navigation aids and browser extensions is the ability to navigate and decipher the page using it's heading orders:

    http://www.cutcodedown.com/images/ewiUSB/headingOrders.png

    Which check out just fine. Rememeber a h1 is the heading EVERYTHING on the page is a subsection of, h2 is the start of a subsection of the H1, H3 are the start of subsections of the H2, and so forth, with a horizontal rule -- hr -- indicating a change in topic where a heading is unwanted/unwarranted. That TOO should be considered part of "design". It's also why HTML 5's nonsenscial NAV, ARTICLE, SECTION, HEADER and FOOTER tags are pointless redundancies... though not as bad as the outright ignorant HGROUP tag that we FINALLY convinced them pissed on the meaning of numbered headings from so on high you'd think the almighty just got back from a kegger.

    ... and all that was done BEFORE I even thought about making it responsive:

    http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom800Wide.jpg
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom640wide.jpg
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbTinyMobile.jpg

    It also meets bandwidth targets. Simple fact is if a page takes more than 30 seconds to load most people will go somewhere else... another failing of the multi-megabyte monstrousities built from hundreds of separate files for nothing. As a rule of thumb I calculate my target markup size these days (I've revised the numbers lately) as:

    3072 bytes + plaintext * 1.5 + 128 bytes per form element + 256 bytes per content image or media element (object, video, audio, etc).

    Notice I say content image, as in things that BELONG in IMG tags, as opposed to design/template images which have NO DAMNED BUSINESS IN THE MARKUP!

    Since the home page of that site has 4624 bytes of plaintext, 6 content images, and no forms/media embeds, that's...

    3072 + 6936 + 768 == 11,544 bytes as the "ideal" target size for the markup using my current methodology -- since this page is build using my older methods that the markup comes in at 13,006 bytes is well within acceptable norms.

    If you use more than twice that "ideal" not only is the code rubbish, the "design" probably is too if you consider more in "design" than just what it happens to look like on the magical combination of resolution, screen size and default font settings you happen to be seated in front of.

    Which is why that entire page is only 115k in 21 files -- so small even dialup can handle the size and so few files that 2.6 seconds is a real-world empty cache first load's handshaking, with a likely worst case scenario of 13 seconds.

    Remember, each file past the first EIGHT counts as 200ms extra load time average, a full on second or more worst case. Only if you are VERY lucky and live in magicland atop fiber that itself sits spitting distance from a backbone would you EVER see anything faster than 200ms handshaking per file!

    ... another reason building a site that requires dozens of separate images, dozens of separate scriptardery to create the "gee ain't it neat" animated crap, and dozens of separate CSS files out of ignorance or over-reliance on framework methodologies are BAD DESIGN!

    NO MATTER HOW MALFING PRETTY IT IS!

    Again, if it's painfully slow, agonizing to use and compromises legibility providing zero accessibility aids, the "design" getting in the way of or distracting from actual content, WHAT GOOD IS IT?

    ... and if you are working content first, concerning yourself with UX, actual SEO (as opposed to the hoodoo-voodoo most people blindly throw at sites), content delivery and accessibility, is an essential part of the design process.

    ... and since most "designers" when pressed have no clue what the WCAG even is, is proof that they don't know enough to be "designing" a blasted thing as they don't know design. All they know is graphic arts! Might be cute and flashy for a one-off advertisement, but effectively useless for actual content delivery.

    ... and the ONLY reason they get away with it is most people forking over cash to them don't know enough about accessibility, user experience, or even what websites are for to make a rational decision; making them easily swayed by "ooh, shiny".

    I always get a good chuckle when people call HTML 5 "the future"... since I've been doing this long enough to recognize the HTML 3.2 / proprietary tag / 4 Tranny mentality. The Future? BWAHAHA. RIGHT! Looks more like the bleeding edge of BAD 1997 practices to me...

    ... at least if you limit yourself to it as a markup specification and ignore all the things from JS and CSS that have jack **** to do with writing HTML.

    It reintroduces old redundancies 4 Strict was trying to get rid of. When the REAL HTML 4 (strict) was created, they rejected EMBED, BGSOUND and APPLET as redundant (of those only APPLET was ever officially part of HTML) to OBJECT. For the next iteration we were even supposed to stop using IMG for being redundant to OBJECT, something we could have done if IE didn't inhale the proverbial equine of short stature. Now not only is EMBED magically in the specification, they add the pointlessly redundant AUDIO and VIDEO tags? Pathetic side note, I discovered under the hood that Webkit and Blink actually use post-processing JS to change those into OBJECT tags! Found that out poking around in nw.js, electron and Vivaldi.

    Then there's the whole "let's piss on logical document structure" crap of encouraging multiple H1 by "resetting" it every time you use SECTION or HEADER, the garbage (now defunct) HGROUP that proved the people who made it (the WhatWG, not the W3C) had zero understanding of HTML 2, 3 or 4... ASIDE serves no legitimate purpose unless you're either using it in as presentational manner as CENTER, or typing out the script to Ferris Beuller's Day Off. NAV is redunant to using numbered headings and horizontal rules properly since the ONLY reason it exists is to allow things like non-visual UA's to "skip past" it to the next content section; Hence why it has ZERO semantic impact and for things like menu's you're still supposed to put a UL inside it.

    Even footer is redunant to HR if the footer has no heading.

    Other elements like CANVAS are great, but have ZERO BLASTED BUSINESS in the HTML since they're scripting only elements. The only legitimate reason I could see for it would be for fallback content, but isn't that redundant to NOSCRIPT and the detection you should be doing in the scripting of if the context was created ANYWAYS?!? Why does this have a HTML element? If it were just a new nodeType for the DOM, then fine. Otherwise, not so much.

    But to be fair, I'm the guy who thinks the onxxx attributes for scripttard hooks should be stricken from HTML, just as document.write should go away, JS should be given a PROPER mechanism for chain loading other scripts, and innerHTML should be blocked from being allowed to add content to the live DOM.

    Now, there ARE things I do like... they finally clarified HR's role to match that of professional writing; the new shorter doctype and head elements are welcome though the lack of version control bugs me no end. (That living document crap? NOT a fan!).

    The new form element types and attributes are nice too, but some of them are quite troublesome; placeholder probably being the worst offender since even though the specification comes right out and says it:

    http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

    ... and I quote: "The placeholder attribute should not be used as a replacement for a label."

    Yet every blasted artsy fartsy type calling themselves "Designers" STILL piss on websites with the loss of context asshattery of abusing placeholder and skipping having actual <label>! (or worse it's scripttard pre-5 equivalent) It's called false simplicity and is one of the many artsy-fartsy bits of nonsense that is the antithesis of good DESIGN.

    Again why most "designers" who all they know is dicking around in Photoshop don't know enough about websites to be designing a blasted thing. It's like if you were having a skyscraper built and instead of bringing in Charlie Frattini, you brought in Pablo Picasso. The end result might be pretty, for the week or so it remains standing until a good stiff breeze knocks it over...

    ... or in the case of some other artsy fartsy folks who consider themselves to be architects like the jokers who keep making these stupid curved buildings DESIGNED to fry people on the streets or in neighboring buildings. Might look pretty, doesn't make it practical.

    I have, at great length, you're just new enough you haven't seen it. In fact I've spent years helping people for free JUST to take those few I feel have the potential to one day be great designers and developers and give them a leg up.

    See this directory containing about a decade worth of my helping people here and on other forums:
    http://www.cutcodedown.com/for_others/?C=M&O=D

    Sadly I lost the date indexes on a lot of those when I moved to different hosting last year.

    I've actually been helping people less and less of late because their projects are so utterly and totally banjaxed thanks to mouth-breathing dumbass asshattery like turdpress, bootcrap and jQuery -- much less having smoke blown up their ass by "designers" that the entire project would need to be tossed in the bin and started over from scratch to actaully fix anything!

    The absolute rubbish nubes and even some people who should know better are vomiting up and calling websites is pretty much on par with the broken bloated crap pre-dotcom burst. Wasting megabytes on doing kilobytes job, hundreds of handshakes doing dozen's job, and zero concern if the page is actually useful.

    Again, see 99.9999999% of the garbage scam artists dupe the ignorant into wasting money on at places like ThemeForest or TemplateMonster. There's a reason I consider such "designers" to be nothing more than predators taking advantage of the ignorant!

    Mind you, there's good money to be made taking advantage of people; politicians, businessmen and religious leaders have known this for time immemorial!

    Ah yes, the "wah, wah, you're saying something negative" diaper wearing response. Sorry, New Englander, we're not a friendly people and will tell you when something stinks. In fact we'll tell you "go take a shower you smelly bum" as we give you the shirt off our backs and driving you to the local shelter; certainly better than the plattitudes and fake plastered on smile common to the south where they tell you everything is fine whilst showing you the door... or the "nobody can say anything that might upset others" asshattery common to the tofu eating millivegan anti-vax whackjob west coast!

    What good does it do? Possibly warn nubes away from broken practices that will just result in some sleazy scam artist raping them for all they're worth? Encourage others to pay attention and try to make sites better, smarter and more useful?

    What's wrong with pointing out the broken, gibberish, mouth-breathing dumbass nonsense that makes people work harder instead of smarter, lets scam artists take them for a ride, and perpetuates their ignorance? Well, unless you ARE one of the sleazy scam artists preying on the ignorance of others -- then one certainly should take offense to everything I'm saying since Joe forbid I interfere in your livelihood -- no matter how many fools lose their shirts as a result!

    I shared mine, do you have an example of what you consider to be a good work? Go ahead and rip mine to shreds (I can take it), but please make it a level playing field by including something of yours or something that you at least consider to be good work.

    Dimes to dollars what you think is a good site is actually broken, slow inaccessible train wreck of how NOT to build a website; no matter how pretty it is. This would be because you don't even know what the WCAG is, what accessibility actually means, or even what a website is actually supposed to do other than sit there and look pretty.

    ... and that's probably NOT your fault; it's the fault of all this crap I keep "hating" on and predators in the industry who have deluded you into believing their noodle-doodle BS built upon a mountain of ignorance actually serves a legitimate purpose.

    See garbage like this:
    http://armada.dream-demo.com/

    Which I'm sure the art faygelah's cream their panties over -- ignoring the inaccessible fixed metric (px) fonts, illegibility of the white on many of the images, massive space wasting and bandwidth wasting full screen backgrounds to hide actual content of value and make the page take a few MINUTES to load here, perfect width and height layout elements which cannot ever be made elastic and makes it have to work ten times harder to even TRY and be responsive, which of course the pathetically broken attempt at being responsive is the expected result of it needing to find a stick to scrape the bootcrap off with.

    Hence the ape-shit ridiculous 4.21 megabytes in 112 separate files resulting in a 20.24 second first-load here, and a worst-case first-load for first time visitors of as much as a minute and a half!

    Illegible colour contrasts, fixed metric fonts, massive bloat for nothing, broken responsiveness due to layout concepts that have no place on a website in the first place, "where's the beef" slideshow garbage, inaccessible broken forms... That's NOT good design no matter how pretty it is. The only way you could consider it to be good design is if all you care about is appearance, and plow if it's actually useful to users.

    Don't suppose that's one of yours? I tried reverse engineering off your contact info, was the only thing web related from a "dream-themes" I could find related to websites.

    Structural design you care about girder sizes and tolerances. Mechanical design you care about tensile strengths and manufacturing methodologies... so how the hell is "it's pretty so who gives a flying purple fish about anything else" considered to be "web design"?!?

    Probably similar to why conventional gaming and comics are in the tank; some people blame it on the web when the truth is the artists and fiction writers have become the "inmates running the Asylum" upping the production costs out of the target audience's hands. There's a reason a manga collection in Japan is still the equivalent of a buck fifty US... it's black and white on cheap pulp instead of glossy full colour cover to cover!

    We have artists who know shit about accessibility or user interaction calling themselves "designers"; we have front end coders who sleaze things together any old way using off the shelf frameworks that prevent them from ACTUALLY learning how to use HTML or CSS properly (also leaving them woefully ill-equipped to know if those frameworks are worth a ****), and we have back-end developers who don't know enough about either of those to call bullshit when he's handed bullshit!

    THEN people wonder why I have a problem with that? HERPA. FREAKING. DERP.

    You want GOOD design advice? Check out nnGroup. Look for articles at places like webAxe.

    See good articles on a few of the topics I touched on here such as:
    http://baymard.com/blog/false-simplicity
    http://www.nngroup.com/articles/form-design-placeholders/
    http://www.nngroup.com/articles/text-over-images/

    Of course you even MENTION the "Nielsen Norman Group" most "designers" get their panties in a wad with strings of expletives that make my posts seem outright tame. You'd almost think it called "bullshit" on EVERYTHING PSD jockeys, scripttards and framework users do.
     
    deathshadow, Oct 27, 2015 IP
    mmerlinn likes this.
  20. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #20
    I "visited" that website. TEN MINUTES LATER on Comcast Cable THE FIRST PAGE WAS STILL LOADING! I gave up. Obviously a pile of crap so high even God could not see over it.

    "Left uncontrolled, 'designers' can render any environment totally useless."
    --- Found on the web ---
     
    mmerlinn, Oct 27, 2015 IP