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.

Make Responsive Website

Discussion in 'HTML & Website Design' started by habibkhan, Dec 24, 2013.

  1. #1
    Suggest me easy methods to make website responsive.
    If u have any tool or plugin for this purpose please share.
     
    habibkhan, Dec 24, 2013 IP
  2. profoundDmd

    profoundDmd Greenhorn

    Messages:
    18
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #2
    Making your site responsive isn't just something you can easily do...
    The process starts from the moment you type your very first letter of code. There aren't any 'easy methods'. If your developer ignored responsiveness as he was making your site, chances are you better start from scratch, instead of messing about in your html/css. If you're lucky you can solve your problems using some (or alot...) media queries (google that).

    You can use frameworks to aid you in the process, as I did, and I found it to be quite helpfull.

    It'll probably be easier to just give us the link to your site.
     
    profoundDmd, Dec 24, 2013 IP
  3. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #3
    Start off with a semantic markup, enhance it PROGRESSIVELY with CSS and juggle with different layouts using media queries. And that's it.

    I respectfully disagree.
     
    wiicker95, Dec 24, 2013 IP
    deathshadow likes this.
  4. profoundDmd

    profoundDmd Greenhorn

    Messages:
    18
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #4
    Well, that depends on how, as you said, semantic your site is, how much content does his site have....and yes maybe I spoke too soon, it COULD be fairly easy, but in most cases I wouldn't count on it.
     
    profoundDmd, Dec 24, 2013 IP
    1a26z likes this.
  5. jk.deff

    jk.deff Active Member

    Messages:
    59
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    55
    #5
    The easiest way is to choose a suitable Responsive Template. For example see templatemonster.com
     
    jk.deff, Dec 24, 2013 IP
  6. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #6
    Add this line to head tab:
    <link href="styles.css" type="text/css" media="screen" rel="stylesheet"/>

    Add below CSS for responsive:

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    /* Styles */
    }
    
    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }
    
    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }
    
    /* iPads (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) {
    /* Styles */
    }
    
    /* iPads (landscape) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape) {
    /* Styles */
    }
    
    /* iPads (portrait) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait) {
    /* Styles */
    }
    
    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width : 1224px) {
    /* Styles */
    }
    
    /* Large screens ----------- */
    @media only screen
    and (min-width : 1824px) {
    /* Styles */
    }
    
    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }
    Code (markup):
     
    creativewebmaster, Dec 24, 2013 IP
  7. jk.deff

    jk.deff Active Member

    Messages:
    59
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    55
    #7
    In modern conditions based on resolution of the screen is not quite correct, because there are screens with different pixel density.
     
    jk.deff, Dec 25, 2013 IP
  8. hassan001

    hassan001 Active Member

    Messages:
    468
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    70
    #8
    Hi Habibkhan,
    If you already know HTML/CSS I assume that it would be handy to make your website responsive yourself. Here are the 2 resources I am sharing with you that I personally took help from when starting responsive themes...

    www.1stwebdesigner.com/css/responsive-website-tutorial/

    froont.com

    I hope this will be helpful for you :)

    Regards
    Hassan
     
    hassan001, Dec 26, 2013 IP
  9. Alexisnicholson

    Alexisnicholson Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #9
    You can create CSS rules to apply different styles based on the page width or orientation. For example, you can make the menu a fixed width on screens smaller than 768px, and fluid on larger screens. Or make list items float left on screens larger than 1024px.
     
    Alexisnicholson, Dec 26, 2013 IP
  10. johnstyle6

    johnstyle6 Greenhorn

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    23
    #10
    Responsive website are the demand of modern days. These sites are the best because they gave great looks to the site, attracts the more visitor to the site. Today most of the web designer offers good responsive web design services.
     
    johnstyle6, Dec 26, 2013 IP
  11. Nick Son

    Nick Son Member

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    2
    Trophy Points:
    41
    #11
    Do you use Joomla or any open source system?
     
    Nick Son, Dec 27, 2013 IP
  12. makeit easy

    makeit easy Active Member

    Messages:
    2,067
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #12
    Just replace your template with a new responsive one. It's the easiest method if it's a wordpress.
     
    makeit easy, Dec 27, 2013 IP
  13. mareslo

    mareslo Member

    Messages:
    94
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    43
    #13
    Mate you have 1 super nice video on youtube about making wordpress website and make it responsive and so on :).Check it it's 1 hour long.


    I hope i helped you

    Greetings
     
    mareslo, Dec 27, 2013 IP
  14. Irfan-khan

    Irfan-khan Greenhorn

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #14
    Use bootstrap. it more easy and helpful. it very new technology. i use it. it very easy to use and helpful.
     
    Irfan-khan, Dec 27, 2013 IP
  15. habibkhan

    habibkhan Member

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #15
    thanks to all for giving these useful tips.
     
    habibkhan, Dec 28, 2013 IP
  16. satyajit.sadhukhan

    satyajit.sadhukhan Member

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #16
    u could try with bootstrap
     
    satyajit.sadhukhan, Dec 28, 2013 IP
  17. 1a26z

    1a26z Member

    Messages:
    28
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    40
    #17
    If you start from scratch you can play around and test how blocks work before you have content in there.
    It gives you a great idea just seeing borders and how boxes with background colors reshape and interact with the page - plus if you get this right, it will save a ton of time once you're adding content.

    That said, designing from scratch is more work, but for a truly responsive layout that isn't dodgy and filled with more markup than it should be, it's best to build from the ground up. Not all sites should just 'use bootstrap' because they can.
    Rather put the key elements of your site on paper.
    Decide what you want on the different devices.
    Then get someone who knows what they're doing to build it.

    Responsive design is something that should be built from the ground up.
    I redesign a lot of static sites and they're garbage. Usually code isn't too neat either, so playing around would be a waste of time. Once you know what the code does, you can just look at a static page and design a responsive page identical to it *if you wanted. Doing this is much quicker than trying to rebuild code and optimise something that wasn't intended to be responsive.

    Best of luck :)
     
    1a26z, Dec 29, 2013 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #18
    I have NEVER found it to be more work -- at least if you give a flying purple fish about sustainability, maintainability, accessibility and so forth. Most 'frameworks' by their very nature encourage inaccessible non-semantic markup, presentational use of classes, and as such are the opposite of the entire point of using HTML to build a website in the first place!

    Which is why to me anyone saying to 'use a framework' needs a double helping of sierra tango foxtrot uniform -- with a wee bit of golf alpha foxtrot charlie on the side. Idiotic halfwit BULL like Bootstrap does nothing to make anyone's life easier, no matter how many people out of apathy or ignorance claim otherwise.

    A while back I answered one of these threads with a "simple" example of how I develop a site -- using what we should ALL be using in terms of semantic markup, separation of presentation from content, progressive enhancement so it has graceful degradation, and the 'for screen' layout being semi-fluid, elastic and responsive.

    https://forums.digitalpoint.com/thr...-and-responsive-design.2657812/#post-18592775

    The big thing is that if you've been paying attention the past decade and a half to what things like 4 Strict and the WCAG have been trying to tell us, practicing fluid or semi-fluid elastic layout with semantic markup and separation of presentation from content, adding the new 'responsive' layout is a no-brainer that takes little if any effort. The ONLY reason it's a struggle for most people is their basically still having their head wedged up 1997's ass; with their non-semantic layout, presentational use of classes and tags, inaccessible design and bloated halfwit bullshit frameworks.

    Which is why bootstrap is just as likely to bite you in the ass going down the road as anything else, since it too is an inaccessible wreck that pretty much ignores all the progress of the past fifteen years. But then what do I know, I say the same thing about that idiotic halfwit bull known as HTML 5!
     
    deathshadow, Dec 29, 2013 IP
  19. 1a26z

    1a26z Member

    Messages:
    28
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    40
    #19
    deathshadow, you totally misunderstood my post, I think???
    I was not advocating, at all, that someone should use 'boot strap'.
    ^ That was in fact my way of saying do not use it (or other frameworks/cms') just because they're there/available/ready to use.
    Just you quoted me and I'm guessing you misunderstood, or more likely I failed to use enough words to explain my point in better detail, if that indeed is the case my apologies.

    As for suggesting it's easier to build from the ground up, it is *in my experience.
    So often I look at a layout or design concept and can build it much quicker, with much less code than I could if I was to delve into code that was already there, but maybe that's me.

    I was not suggesting a well known site should scrap and rebuild, but rather if you have the opportunity to have not laid a letter of code, seriously sit back and think about it, all the elements you want and need, especially the ones you don't want on smaller devices. I look at it like building a house, if you've built a house before then the next one you build you can spend more time 'planning' to get it right. And if you've built thousands of houses, then you could build a brand new one much quicker than you could repair all the elements in an old one that is falling apart.

    Sorry if I was getting my wires crossed, just reading many of your other posts I agree with you in huge ways. I hope this post clears it up :)
     
    1a26z, Dec 30, 2013 IP
  20. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #20
    I think you got confused as I was agreeing and disagreeing at the same time. I agree people shouldn't just use "bootstrap" -- at the same time I've never understood how anyone could consider using it to be "easier" or not using it to be "more work"

    That was my point... since you said: "designing from scratch is more work -- I'm saying it isn't.
     
    deathshadow, Dec 30, 2013 IP
    1a26z likes this.