www.webdeveloper.com
Results 1 to 15 of 15

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

  2. #2
    Join Date
    Aug 2013
    Location
    CA
    Posts
    16
    Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive web design is focused around providing an intuitive and gratifying experience for everyone. Desktop computer and cell phone users alike all benefit from responsive websites.

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    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

  4. #4
    Join Date
    Aug 2013
    Location
    Phoenix, AZ
    Posts
    98
    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!

  5. #5
    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.

  6. #6
    Join Date
    Mar 2012
    Posts
    1,250
    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.

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,213
    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.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  8. #8
    Join Date
    Mar 2012
    Posts
    1,250
    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.

  9. #9
    Join Date
    Sep 2013
    Posts
    1
    create your website in your html five or chooses Wordpress Templates

  10. #10
    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.

  11. #11
    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.

  12. #12
    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

  13. #13
    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/

  14. #14
    Join Date
    Sep 2013
    Location
    India
    Posts
    3
    Responsive web design means ensure that your website work well in on both large and small devices.While responsive design always consider in mind images, quick navigation, less loading time, typography.
    Hope this will help you to understand the responsive website design.

  15. #15
    Join Date
    Dec 2012
    Posts
    167
    Quote Originally Posted by AK Sharma View Post
    Responsive web design means ensure that your website work well in on both large and small devices.While responsive design always consider in mind images, quick navigation, less loading time, typography.
    Hope this will help you to understand the responsive website design.
    Yes I agree with you,All points mentioned by you for explaining Responsive web design are good.I also want to share a link having some more information about to make a responsive web design,visit here : http://www.webdeveloper.com/forum/sh...ive-web-design
    Discuss with our experts for free advise if you are planning to build a CMS for your online business. Get in touch today.

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