dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Help with First Website Design

  1. #1
    Join Date
    Apr 2015
    Posts
    1

    Help with First Website Design

    Hello, I am attempting to create my first website and having some issues. I picked html and css up about two months ago and I have been stuck on trying to make my website adjust to screen size. I know I need to use bootstrap or some other possibilities, however I am struggling. Could someone please assist me in this matter.

    I already have tons of the website finished. Do I have to completely restart from scratch in order to make this happen? Or can I apply something now that will solve this and make my website mobile, desktop, etc compatible?

    Any help is appreciated, thanks in advance.

  2. #2
    you need to create separate css files for the different screen sizes
    or you can use browser sniffing to deliver the different css files to the different screen sizes

  3. #3
    Join Date
    Mar 2015
    Posts
    220
    You don't *need* to use bootstrap.

    It's impossible to know whether or how much of your website needs to be redone without looking at it.

    You can also do all of your css in one file instead of having multiple css files, but the code would still have to be separated by screen size. If you have a lot of changes due to screen size (which, if you've done a good job building it, you shouldn't), it's easier to do separate files. If you don't, it's easier to do one file.

    First thing to figure out is how you want your page to look on different size screens.

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    280
    Simplest is to use percentage % widths. Remember width of an element depends on width of parent element in which it is nested.

    For example: width: 90%; minimum-width: 100px; maximum-width: 900px;

    See for instance, http://www.josephdenaro.com. There's a JavaScript that sends small-screen devices to a mobile version in which we used an animated GIF.

  5. #5
    Join Date
    Mar 2012
    Posts
    2,518
    If you are a beginner, you do not want to be considering separate mobile-specific versions. Also, you do not have to discard the work you have done so far (which I guess is fixed width). What you need to do is:

    1. Design your basic screen layout for normal PC use (say, fixed width design 960px wide). The only difference at this stage is that I have split the nav bar into two parts, so that (later on) I can move them independently...

    Note: Use CSS settings either in a .CSS file or in a <style> statement in the <head> section. E.g.
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>demo</title>
    <meta charset="utf-8">
    <style>
    /* general reset */
    * {
    margin:0;
    padding:0;
    border:none:
    }
    input, select {
    border:1px solid grey;
    }
    /* end general reset */
    html {
    width:100%;
    height:100%;
    background:#DDD;
    }
    body {
    width:960px;
    height:100%;
    margin: 0 auto;
    background:#EEE;
    }
    h1 {
    font-size:32px;
    padding:12px;
    color:#070;
    background:#EEF;
    }
    #header {
    width:100%;
    height:56px;
    background:#EEF;
    }
    #nav-bar {
    float:left;
    clear:both;
    width:100%;
    background:#000;
    }
    #nav-L,
    #nav-R {
    float:left;
    height:30px;
    font-size:24px;
    color:#FFF;
    background:#000;
    }
    #content {
    width:100%;
    background:#EEE;
    }
    </style>
    </head>
    <body>
    <div id="header">
    <h1>Demo Web Page</h1>
    </div>
    <div id="nav-bar">
    <div id="nav-L">
    nav1 &nbsp;nav2 &nbsp;nav3 &nbsp; 
    </div>
    <div id="nav-R">
    nav4 &nbsp;nav5 &nbsp;nav6
    </div>
    </div>
    <div id="content">
    Your content goes here...
    </div>
    </body>
    </html>
    2. Add media queries to the BOTTOM of the CSS (so they override previous settings). These can do various things like: change the fixed width, change font sizes, and even re-arrange the nav-bar to fit on two lines instead of one. Also, more subtly, for small-screen devices (where the screen width is 480px or smaller), the body width switches to 100% of the screen. If you test this code on a larger screen that won't happen. It stay at 480px wide. But on small screens it will go down to 320px wide.

    E.g.:
    HTML Code:
    /* reponsive code */
    @media screen and (max-width:959px) {
      body {
      width:640px;
      }
      h1 {
      font-size:28px;
      }
      #header {
      height:48px;
      }
      #nav-L,
      #nav-R {
      font-size:20px;
      }
    }
    @media screen and (max-width:639px) {
      body {
      width:480px;
      }
      h1 {
      font-size:22px;
      }
      #header {
      height:40px;
      }
      #nav-L,
      #nav-R {
      width:100%;
      font-size:18px;
      }
    }
    @media screen and (max-device-width:480px) {
      body {
      width:100%;
      min-width:320px;
      }
      h1 {
      font-size:22px;
      }
      #header {
      height:40px;
      }
      #nav-L,
      #nav-R {
      font-size:16px;
      }
    }
    /* end responsive */
    Last edited by jedaisoul; 04-10-2015 at 11:36 AM.

  6. #6
    Join Date
    Mar 2015
    Location
    Philippines
    Posts
    10
    It is easier to redo the ENTIRE website with bootstrap then it is to try and custom code media queries to work with a custom html/css site. You will have major headaches doing media queries from scratch.

    Just bite the bullet and migrate your templates over to bootstrap. It's worth it. And once your done everything will just work.

  7. #7
    Join Date
    Sep 2006
    Location
    new york
    Posts
    280

  8. #8
    Join Date
    Dec 2014
    Posts
    130

  9. #9
    Join Date
    Apr 2015
    Posts
    1
    Quote Originally Posted by daviddakarai View Post
    You can use CSS code to design responsive sites.
    Agreed with him! You can use your css code for responsive designs.

  10. #10
    Quote Originally Posted by joehart View Post
    Agreed with him! You can use your css code for responsive designs.
    Haha I will second that - CSS is the way to go!

    One piece of advice I would give you is that you should code a responsive site as you should design it - mobile up. What this means is you write the CSS for mobile devices first and then make any adjustments to the CSS as the screen size increases using media queries rather than coding the desktop version first then writing the CSS/media queries to adapt it to smaller screens. This will save you a bunch of time and frustration. I remember this being a bit of a light bulb switching on in my head moment back when I was trying to get my head around building responsive sites a few years ago. Attempting it the other way around was a nightmare!

    Best of luck

  11. #11
    Join Date
    Mar 2012
    Posts
    2,518
    @joy92

    The only code in this thread is mine, so I guess your comment was addressed to me? If so, I'd appreciate an explanation of the problems you see in it. Thanks.

    As for learning HTML and CSS perfectly before doing any coding, I would suggest that is somewhat unrealistic. Particularly with all the new stuff in CSS3, some of which is either not implemented yet, requires vendor prefixes, and/or does not degrade gracefully on legacy browsers (so is a little premature to use anyway).
    Last edited by jedaisoul; 05-18-2015 at 03:01 PM.

  12. #12
    Join Date
    May 2015
    Posts
    13
    In design, the foremost task is to layout the key ideas and to determine their placement across the page.
    It is here that Responsive wireframes comes into the picture. Created by James Mellers of Adobe, it offers desktop and mobile varieties of common wireframe mock-ups including homepage, guided entry, promoentry, product detail and comparison pages.

  13. #13
    Join Date
    Mar 2012
    Posts
    2,518
    @lee walker

    I'm not sure of the meaning you associate with the term "layout" in "the foremost task is to layout the key ideas". Did you mean it literally, or did you mean "present"? Or what?

    Furthermore, I cannot see the link between presenting(?) the key ideas and responsive design in particular. The key issue with responsive design is to keep the structural blocks of the display (header, content, main nav, auxiliary nav, footer etc.) in a coherent order, rather than the ideas present in the content.

    Incidentally, your post sounds like a product plug, except that you did not mention the product! I googled "responsive wireframe" and came up with no clear product. So was it the idea of responsive wire frames in general, or a specific product, that you were referring to?

  14. #14
    Join Date
    Mar 2015
    Posts
    220
    joy92 has apparently become a spambot or something. Do nothing this poster says. It is spamming a bunch of threads with "visit this site" links. Hopefully the mod will ban joy92 soon.

  15. #15
    Join Date
    Apr 2015
    Posts
    8
    Can you try these video tutorials for brotsky they are really awesome just try it out , may be it works , i am also a newbie in html and css but i am trying hard to learn to these things from brotskytv, so may that works for you too

    here is the link : https://www.brotsky.tv/category/html/

    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles