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.

Responsive Website

Discussion in 'HTML & Website Design' started by victorekpo, Dec 29, 2016.

  1. #1
    I'm building a website http://houstonetwork.com/insperity/. But I need help with responsive code can you please help me out?
    SEMrush
     
    victorekpo, Dec 29, 2016 IP
    SEMrush
  2. Rahul Vaishnav

    Rahul Vaishnav Active Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    63
    #2
    Hi
    Do you use Bootstrap css framework ?
     
    Rahul Vaishnav, Dec 30, 2016 IP
  3. victorekpo

    victorekpo Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Thank you for suggesting Bootstrap, I'm learning it now and SASS.
     
    victorekpo, Dec 31, 2016 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,111
    Likes Received:
    1,692
    Best Answers:
    239
    Trophy Points:
    515
    #4
    My apologies on your loss of brain cells. Sorry, but the ONLY thing you can learn from bootcrap is how NOT to build a website, and idiotic dumbass mouth-breathing bullshit like SASS isn't going to help one lick either.

    Responsive layout is simply the last in a long series of stepping stones to accessible design. It is something that throwing some off the shelf framework at isn't going to help you do PROPERLY, and in fact can make it many times worse.

    Looking at your site, you are missing some of the most basic concepts of using HTML properly -- such as the use of numbered headings to create document structure, avoiding adding meaningless tags like DIV when you aren't doing anything of value with them, and so forth that you're missing the initial steps to accessible design -- worse, your reliance on HTML 5's equally idiotic and pointlessly redundant 'structural' tags is just adding more bloat to a relatively simple layout. Even that stupid malfing "let's slop a bunch of IE CC's at the start of the page to cover up for developer ineptitude" that Paul Irish pissed on the web with isn't helping matters one bit. Static style in the markup, endless pointless <link> not one legitimate UA uses, sending screen media CSS to all targets...

    Much less you're slopping out the pointlessly redundant HTML 5 structural tags in a 4 Strict document, making the entire thing complete gibberish!

    You'd almost think it was a turdpress template.

    Though even screen-facing you've got problems such as one section of illegible colour contrasts (the light green on white), absurdly undersized fixed fonts, and serif fonts on screen media.

    There's a LOT wrong from just an HTML standpoint alone that would/should be fixed before you even THINK about layout, much less the multiple layouts responsive design is supposed to deliver.
     
    deathshadow, Dec 31, 2016 IP
  5. victorekpo

    victorekpo Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    Thanks for your critique, please point in me the right direction as I am doing this for a job interview.
     
    victorekpo, Jan 1, 2017 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    If you're doing this for a job interview, you've already shown that you don't have the qualifications for doing the job (if the site is to show what you know about web-design). As @deathshadow said, you don't need either Bootstrap or SASS - at least not when you don't even know regular CSS (and HTML). Learning is good, but you need to have a bit of clarity of what you need to learn. First thing is proper, structural HTML. Then you add CSS to it.
     
    PoPSiCLe, Jan 2, 2017 IP
  7. victorekpo

    victorekpo Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #7
    Please enlighten me on the correct HTML structure I basically used a WordPress template because part of the interview is using WordPress and customizing the code I didn't use my own knowledge of html structure. But I would like to know the fixed structure that is proper.
     
    victorekpo, Jan 2, 2017 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #8
    There is no such thing. Although every site/page will have a set structure, that strict structure ends with the first <body>. Everything inside <body> is less strict - although there are some rules, of course.
    Headings
    There should be one h1. Subsequent headings should start at h2, and those h2s start a section of content. If you need headings in that section, you use the next level, in this case a h3. And so on. Headings are structural elements, and should not be chosen by how they look at their default settings in most browsers.
    Paragraphs
    Paragraphs contain... well, paragraphs of text.
    Lists
    You have several types of lists, which all have their use, although the one you'll use the most is probably the ul (unordered list). This can be used for most tasks where you want to list something, it be a menu, an image gallery, a list of usernames, etc.
    Containers
    There are many containers in HTML, but the ones you'll be using the most is probably div and span - which are both semantically neutral - they don't provide anything in the way of defined structure, they're neutral, and will not affect anything (for instance special browsers for non-visual users).

    (This is all very basic, of course).

    Add to these standard elements: classes and IDs. Which is where most of the CSS-frameworks, and also things like WordPress and most other CMSes crashes hard. A typical HTML document utilizing Bootstrap is so waddled down with classes everywhere that you'll have difficulty actually finding the content if you look at the source. There is a tendency to just throw classes at everything, instead of utilizing the cascading part of the CSS. Instead of throwing classes at stuff, you "throw" an ID at a parent container, and uses that as a starting point. Instead of giving all li-elements inside a ul a class, you give the ul itself an ID, like this:
    
    <ul id="usernames">
      <li>User 1</li>
      <li>User 2</li>
      <li>User 3</li>
    </ul>
    [/code>
    And then you specify things for the li elements like this:
    [code]
    #usernames li {
      // CSS goes here 
    }
    
    Code (markup):
    Instead of throwing a class on for every li in that list. If you need to emphasize a specific item, then, of course, you can add a class or ID to that specifc element, but for almost 100% of all cases, the class-gumbo that for instance Bootstrap utilizes is pure and utter crap.
     
    PoPSiCLe, Jan 3, 2017 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,111
    Likes Received:
    1,692
    Best Answers:
    239
    Trophy Points:
    515
    #9
    @PoPSiCLe did a good job covering the basics.
    .. and the default template in turdpress is guilty of this too. See the endless pointless classes they throw at even just the BODY tag.

    That's why this:

    
    <body class="home page-template-default page page-id-2">
    <script src="http:/houstonetwork.com/insperity/civem.js/civem-0.0.7.min.js"></script>
    <div id="header">
    
    <div id="header-container">
    <div id="logo"><img src="http://houstonetwork.com/insperity/wp-content/uploads/2016/12/logo.png" /></div>
    <div id="header-phone"><span style="font-size:10px;font-family:Arial;">Speak to a specialist now</span> <br /><img src="http://houstonetwork.com/insperity/wp-content/uploads/2016/12/phone-icon.png" style="padding-right:5px; width:20px;" /><span style="color:#006595;">855.677.7813</span></div>
    </div>
    
    </div>
    
    <div class="clear"></div>
    
    Code (markup):
    With the blocking script in the body, DIV doing H1's job, static images in the markup, static style in the markup, missing attributes like ALT="" that are NOT optional, and clearing DIV like it's still 2003 is a bloated mess for what should just have been:

    
    <body>
    
    <div id="top"><div class="widthWrapper">
    
    	<h1>
    		<a href="/">
    			Insperity
    			<span>-</span>
    			<small>Inspiring Business Performance</small>
    		</a>
    	</h1>
    	
    	<div class="phone">
    		Speak to a specialist now<br>
    		<div>855.677.7813</div>
    	<!-- .phone --></div>
    	
    <!-- .widthWrapper, #top --></div></div>
    
    Code (markup):
    An H1 as the heading that everything on every page is a subsection of, an anchor back to the home page since most people have come to expect that behavior, the ACTUAL text the heading represents AS text for non image users (apply the image from the CSS), <small> to represent de-emphasis on the tagline, the DIV for the opposing side getting a class but needing NONE inside it since the parent has a perfectly good one, the outer #top called such so <a href="#top">back to top</a> is easy to implement if desired, both outer wrappers needed for the full width style mated to what should be a max-width inner behavior. EVERYTHING else belonging in your external stylesheet where it can not only be cached, but pre-cached for sub-pages too!

    326 bytes despite more aggressive whitespace formatting and comments vs. the 650 bytes your typical turdpress or bootcrap developer vomits up.

    Once you have that H1 in place, your next heading (and all sibling level headings from a document structure standpoint) would be h2, hence this mess:

    
    <div id="container">
    	
    	<div id="container1"> 
    
    <div id="article1">
    <article class="top-text">
    <span style="color:#006595;font-size:40px;">HR Outsourcing: </span><br />
    <span style="color:#349946;font-size:24px;">A Step-by-Step Guide to Professional Employer Organizations (PEOs)</span>
    
    Code (markup):
    ... if you're using ARTICLE, what do you need the DIV for? If you want block level behavior, why are you using span+BR? Those appear to be HEADINGS, in fact a single heading, why are you even using SPAN... and 99% of the time you use <style> or style="", you're SCREWING IT UP!

    Much less the uselessly vague id="container" -- container for WHAT exactly? Container1 being even worse.

    
    <div id="content"><div class="widthWrapper">
    	<div id="outsourcing">
    		<h2>
    			HR Outsourcing<br>
    			<small>A Step By Step Guide to Professional Employer Organizations (PEO's)</small>
    		</h2>
    
    Code (markup):
    Heading and a tagline... note that small means de-emphasis or "would be smaller in a professionally written document such as a legal paper, whitepaper, scientific paper, etc" and not "this text MUST be smaller". 196 bytes vs. the 295 of the original. Even though that would grow the CSS file in return, doing so would allow sub-pages using the same style to pre-cache the appearance, and return visits to also have it cached. This makes return visits load faster, and sub-pages load instantly since ALL they have to do is grab the new markup and nothing else.

    With using HTML correctly you have to separate in your mind the default appearance of the tag as that's NOT what HTML tags are FOR. In that way <b> and <i> mean "this text would be bold or italic in a document for grammatical reasons" -- such as a entity name or book title respectively; at least when the book isn't being <cite>d. <em> and <strong> mean "emphasis" and "more emphasis" respectively. The UA or Layout is NOT required to convey those as actual bold or italic since not all devices HTML can serve are even CAPABLE OF IT.

    This is semantically correct, <strong>You would NOT use STRONG or EM for this:</strong>
    
    I was reading <i>Moby Dick</i> last night at <b>Five Guys</b>
    
    Code (markup):
    If you used EM or STRONG there,
    
    <strong>YOU'D SOUND LIKE <b>BRIAN BLESSED</b>!!!</strong>
    
    Code (markup):
    You list has similar hiccups:
    
    <p>
    <ul>
    <li><div style="font-weight:600;padding-bottom:10px;">Administrative overload</div>
    See how you can spend less time processing payroll and employee paperwork and spend more time on growing your business.
    </li>
    <li><div style="font-weight:600;padding-bottom:10px;">Employee benefits trouble</div>
    Find out how you can get access to affordable, comprehensive benefits for your employees that you couldn't get on your own.
    </li>
    <li><div style="font-weight:600;padding-bottom:10px;">Confusing government regulations</div>
    Learn how you can get a team of specialists who will monitor ever-changing regulations and help you maintain compliance.
    </li>
    </p>
    
    Code (markup):
    On top of a lack of formatting, again the same static style over and over for what should probably be headings, if they ARE headings then this section would already have meaning in which case it's not a list... if it's a LIST it sure as shine-ola is NOT a paragraph, and your list is never closed as your missing the </ul>

    Not as much of an overall code reduction as that section is content heavy, but still strips a good 20% off it despite the addition of formatting and a closing comment.

    
    <div class="features">
    	<h3>Administrative overload</h3>
    	<p>
    		See how you can spend less time processing payroll and employee paperwork and spend more time on growing your business.
    	</p>
    	<h3>Employee benefits trouble</h3>
    	<p>
    		Find out how you can get access to affordable, comprehensive benefits for your employees that you couldn't get on your own.
    	</p>
    	<h3>Confusing government regulations</h3>
    	<p>
    		Learn how you can get a team of specialists who will monitor ever-changing regulations and help you maintain compliance.
    	</p>
    <!-- .features --></div>
    
    Code (markup):
    You want that to bullet like a list, do it in the CSS. (opening the door to fancier bullets if desired thanks to UTF-8 and generated content)

    But a LOT of those concepts are incompatible with how turdpress works, which is why as cute as turdpress is at making blogs for Grandma, it is an EPIC FAILURE if you try to use it for a serious business -- no matter how many sleazeball scam artists saddle up small businessmen to take them for a ride with claims that it is. The WYSIWYG editor built into it basically pissing on semantics and accessibility from orbit when it comes to the quality of markup used on the content.
     
    deathshadow, Jan 4, 2017 IP
  10. Amarkolom

    Amarkolom Active Member

    Messages:
    186
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    88
    #10
    I can assist you to make your website responsive. Is your site in WordPress platform?
     
    Amarkolom, Jan 6, 2017 IP
  11. RL Ganguly

    RL Ganguly Greenhorn

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #11
    BOOTSTRAP & CSS are the codes that can help you out. If your responsive website is built on HTML5, then CSS Media Queries, jQuery slider & CSS3 can be proved useful for you.
    If you are a layman in this, you can hire an experienced developer or can learn coding by yourself from web development tutorial sites.
     
    RL Ganguly, Jan 9, 2017 IP
  12. Naina S

    Naina S Active Member

    Messages:
    203
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    93
    #12
    First you need to understand what is Responsive design. In short Responsive design means - breaking different portions of the design based on the screen width into smaller blocks that actually fits. It also means in Responsive design the user does not have to scroll horizontally the page on small screen nor he needs to zoom in the page to view it.

    There are 2 methods to make your website or any website responsive -
    1. By using CSS Media Queries.
    2. By using framework. The best framework is bootstrap.

    You can just go through CSS Media Queries to know how it work and then skip that part and go to Bootstrap. To understand Bootstrap start with what is Bootstrap - here. After understanding the bootstrap you can start applying it in any html design you have.

    The important thing to know here is that you won't learn bootstrap unless you apply it. This is because by applying it your doubts will be solved and new ideas will come to your mind.

    It is not difficult - It won't take more than 10 hours to make your first HTML page responsive with Bootstrap.

    Happy Bootstrapping !
     
    Naina S, Jan 12, 2017 IP
  13. imbrod

    imbrod Well-Known Member

    Messages:
    208
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #13
    Not quite true, actually. That is adaptive web design that you've described and it's just a part of the story of responsiveness. To be responsive means to be adequate and useable for different platforms/devices, not just visually, but in general design and functionality.
     
    imbrod, Jan 18, 2017 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,111
    Likes Received:
    1,692
    Best Answers:
    239
    Trophy Points:
    515
    #14
    ... and then a decade or more unlearning the laundry list of how NOT to build a website it dupes rubes and nubes into THINKING is a responsive site... which the moment they want to do things like make it accessible or unique, they find out that they REALLY need to go find a stick to scrape that bootcrap off with.

    ANYONE saying "use bootstrap" doesn't know enough about HTML, CSS, JavaScript, accessibility, or UX to be flapping their gums on the topic, and are in DESPERATE need of a quadruple helping of Sierra Tango Foxtrot Uniform!

    It is without a doubt the most mind-numbingly idiotic halfwit rumbling bumbling stumbling dumbass things in web development. Developers are dumber for it even existing!
     
    deathshadow, Jan 21, 2017 IP