dcsimg
www.webdeveloper.com
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 49

Thread: How to create responsive website design?

  1. #1

    How to create responsive website design?

    Can any one give me best tips for responsive website design
    Share on Google+

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    Might help...

    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/
    Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/


    Care With Font Size: http://www.w3.org/QA/Tips/font-size
    Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/
    Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html

    Introduction to Responsive Web Design: http://www.1stwebdesigner.com/design...edium=twitter#!

    Mobile Website:

    Learn the Mobile Web: http://learnthemobileweb.com/2009/07/mobile-meta-tags/
    10 Ways the Mobile Web is Different: http://www.elated.com/articles/10-wa...-is-different/
    Redesigning a Site For Mobile: What's Involved?: http://www.elated.com/articles/redes...hats-involved/
    How to Validate and Test for the Mobile Web: http://designfestival.com/how-to-val...&utm_term=More
    Share on Google+

  3. #3
    Join Date
    Aug 2013
    Location
    Phoenix, AZ
    Posts
    128
    Quote Originally Posted by Major Payne View Post
    Might help...

    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/
    Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/


    Care With Font Size: http://www.w3.org/QA/Tips/font-size
    Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/
    Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html

    Introduction to Responsive Web Design: http://www.1stwebdesigner.com/design...edium=twitter#!

    Mobile Website:

    Learn the Mobile Web: http://learnthemobileweb.com/2009/07/mobile-meta-tags/
    10 Ways the Mobile Web is Different: http://www.elated.com/articles/10-wa...-is-different/
    Redesigning a Site For Mobile: What's Involved?: http://www.elated.com/articles/redes...hats-involved/
    How to Validate and Test for the Mobile Web: http://designfestival.com/how-to-val...&utm_term=More
    Thanks for all the links!
    Share on Google+

  4. #4
    Join Date
    May 2013
    Posts
    55
    Media queries is the best thing I can suggest, but when using them make sure you decrease font size and line height for mobile device.
    Share on Google+

  5. #5
    Join Date
    Mar 2012
    Posts
    2,649
    In my experience, responsive design works best when you choose a minimum page width you will support, say 480 px. This is because trying to support smaller hand-held devices as well as full-size screens involves too much compromise. Also I use media-specific style sheets rather than media queries. I find them easier. And remember: IE8 and below ignore media specific code. So, on the assumption that IE8 and below are only found on PCs, I set up media-specific style sheets as folllows:
    - style.css (the default) assumes a larger screen size, say, 640+ px wide, and ignores hand-held and printer-specific classes.
    - handheld.css assumes smaller screens, say 480 px to 639 px wide.
    - printer.css assumes that the output is intended for printing only.
    Last edited by jedaisoul; 09-14-2013 at 02:56 PM.
    Share on Google+

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,968
    A word about mobile web development...

    <rant>
    I access the web often through my Android smart phone and get completely cheesed off with developers who enforce a mobile site on me when my web browser is more than capable of showing and using a standard web page.

    So can which ever retard thinks its OK to force a user in to a web page that does not suit my purpose please stop preaching that mobile devices should be forced in to viewing something that resembles a page of buttons with the occasional image please?

    Give viewers BOTH options and set a cookie and if a cookie can't be set, a session cookie so that the visitor can appreciate the web as THEY WOULD LIKE TO SEE IT.
    </rant>

    ... because web developers don't always know whats best.
    STOP using $ prefix on JavaScript variable names...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...
    Share on Google+

  7. #7
    Join Date
    Mar 2012
    Posts
    2,649
    Quote Originally Posted by \\.\ View Post
    So can which ever retard thinks its OK to force a user in to a web page that does not suit my purpose please stop preaching that mobile devices should be forced in to viewing something that resembles a page of buttons with the occasional image please?

    Give viewers BOTH options and set a cookie and if a cookie can't be set, a session cookie so that the visitor can appreciate the web as THEY WOULD LIKE TO SEE IT.
    </rant>

    ... because web developers don't always know whats best.
    I agree that developers should not default to a mobile-specific sub-site just because the device is classed as "handheld". Mobile-specific sites are only really needed for devices with display widths below 480px. Above that, mobiles are perfectly capable of displaying responsive web pages.

    However, I would suggest that, rather than offering the user a choice, the distinction should be based on display width, not whether it is a mobile device.
    Share on Google+

  8. #8
    Join Date
    Sep 2013
    Posts
    1
    create your website in your html five or chooses Wordpress Templates
    Last edited by jedaisoul; 11-05-2014 at 03:56 PM. Reason: link removed
    Share on Google+

  9. #9
    Join Date
    Jul 2013
    Posts
    73
    First of all you need to make the right choice between the implementation of responsive, dynamic or mobile URL. These types of mobile website are suitable for different needs. For example, if you require major differences between desktop and mobile versions of the website (for example, completely different content), a mobile URL is a good choice. Responsive design is not the best solution for heavy content, such as video - it can slow down the website. If you need to deliver only a part of the desktop content, dynamic webpage is what you need.

    Some more tips on improving mobile website ranking.
    Share on Google+

  10. #10
    Join Date
    Sep 2013
    Posts
    221
    Responsive web design is no doubt a big thing now. If you still not familiar with responsive design , check out the below code which may help you.

    Step 1. Meta Tag (view demo):
    Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the <head>.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Step 2. HTML Structure:
    In this example, I have a basic page layout with a header, content container, sidebar, and a footer. The header has a fixed height 180px, content container is 600px wide and sidebar is 300px wide.

    Step 3. Media Queries:
    CSS3 media query is the trick for responsive design. It is like writing if conditions to tell the browser how to render the page for specified viewport width.

    The following set of rules will be in effect if the viewport width is 980px or less. Basically, I set all the container width from pixel value to percentage value so the containers will become fluid.

    /* for 480px or less */
    @media screen and (max-width: 480px){

    #header {
    height: auto;
    }
    h1 {
    font-size:24px;
    }
    #sidebar {
    display: none;
    }
    }

    You can write as many media query as you like. I've only shown 3 media queries in my demo. The purpose of the media queries is to apply different CSS rules to achieve different layouts for specified viewport width. The media queries can be in the same stylesheet or in a separate file.
    Share on Google+

  11. #11
    Join Date
    Sep 2013
    Posts
    1
    Check out this tutorial on responsive webdesign, I found it very useful: http://www.lingulo.com/tutorials/css...e-from-scratch
    Share on Google+

  12. #12
    Join Date
    Sep 2010
    Posts
    17
    You may use tools for responsive web designing. check out some tools shared on this post http://themesquirrel.com/themeblog/t...web-designing/
    Share on Google+

  13. #13
    Join Date
    Dec 2012
    Posts
    7
    I highly recommend using both Javascript to test the device, and also css media queries. This way you will be sure that your responsive design will be optimized for different screen resolutions and devices also.
    I am using WordPress, and I was building pegsweb.com, I had a big problem on tablets because I was using css media queries only. I resorted to Javascript & css and these issues are gone completely.
    Last edited by jedaisoul; 10-13-2014 at 05:01 PM.
    Share on Google+

  14. #14
    Join Date
    May 2014
    Location
    bangalore
    Posts
    39
    Use twitter bootstrap for create responsive site. or otherwise You can create your own code.

    you just add the meta name and content to the header position of the html.

    After that Add media query to your css style page.

    most important use the "%" symbol for width and height size.
    Share on Google+

  15. #15
    Join Date
    Oct 2014
    Posts
    3
    The best things you can do if you are totally new to responsive design are

    1. Check out Bootstrap at http://getbootstrap.com. This is a great tool to help you get started quickly.
    2. If you want to go deeper, go to http://lynda.com and pay the $25 to get access to all of their great courses.
    Share on Google+

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