Magento Expert Forum - Improve your Magento experience

Page 1 of 2 12 LastLast
Results 1 to 20 of 39

what is responsive design?

  1. #1

  2. #2
    Junior Member
    Join Date
    Apr 2015
    Posts
    109
    Thanks
    0
    Thanked 8 Times in 8 Posts

    Default

    Responsive design mean the webpage that is compatible to open properly in all devices like tab, mobile and desktop, and from SEO point of view the best benefit of responsive design is to it helps user to stay on and proper call to action can help you bring more visits that will turn in to customers.

  3. #3
    Junior Member
    Join Date
    Jan 2015
    Posts
    201
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Default

    Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

  4. #4
    Junior Member
    Join Date
    May 2015
    Posts
    50
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Mobile user can view your web site with clear view this is responsive,that is your site responsible for every device its called responsive design

  5. #5
    New member trimantra's Avatar
    Join Date
    Jan 2015
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Responsive design means your web pages are reformat depending on your devices or your web pages are adapt to the size of your current Devices.



    Web Development & Design company in India

  6. #6
    Junior Member
    Join Date
    Mar 2015
    Posts
    283
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    Responsive Web Design (RWD) is an approach of laying-out and coding a website such that the website provides an optimal viewing experience — ease of reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices.

  7. #7
    Junior Member
    Join Date
    Feb 2015
    Posts
    81
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.

  8. #8
    Junior Member MrJaswal's Avatar
    Join Date
    Apr 2015
    Location
    Ludhiana,Punjab,India
    Posts
    29
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by kimi108ka View Post
    what is responsive design? how does a responsive webpage help the mobile and other devices.

    In simple word, Responsive design is made, to fit your site into any screen without zooming in/out. Its the latest trend in web designing world and its good for users experience in smart phones or tablets.
    Last edited by MrJaswal; 14-07-2015 at 08:22 AM.

  9. #9
    New member
    Join Date
    Jul 2015
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Step 1. Declare the viewport meta

    First you need to put this card into the folder <head> section on the HTML code of the website.

    Code:
    <meta name = "viewport" content = "width = device-width, initial-scale = 1">
    Step 2. Write CSS to the width of the device
    Code:
    body {
       background: #fff;
       color: 333;
    }
     
    @media all and (max-width: 320px) {
       body {
          background: #e7e7e7;
       }
    }
    This means your website will default (background) is white, but when scaled to the browser from 0px to 320px, then it will have a base of gray with color code # e7e7e7

  10. #10
    New member dakshadesign's Avatar
    Join Date
    Sep 2014
    Location
    Balongi Road, SAS Nagar Mohali, Punjab
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Responsive design means website design that fits according to the device resolution and provide good user experience.

    Responsive Web Design Company India

  11. #11
    New member
    Join Date
    Jul 2015
    Location
    Punjab
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Responsive Web design (RWD) is an approach whereby a designer creates a Web page that “responds to” or resizes itself depending on the type of device it is being seen through. That could be an oversized desktop computer monitor, a laptop, a 10-inch tablet, a 7-inch tablet, or a 4-inch smartphone screen.
    Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media.
    1. The first part, flexible layouts, is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width.
    Basic formula for responsive is section is target ÷ context = result

    Example for refrence for Responsive Web Design:

    <div class="wrapper">
    <div class="left-part">...</div>
    <div class="right-part">...</div>
    </div>

    .wrapper {
    width: 538px;
    }
    .left-part,
    .right-part {
    margin: 10px;
    }
    .left-part {
    float: left;
    width: 340px;
    }
    .right-part {
    float: right;
    width: 158px;
    }

    .left-part,
    .right-part {
    margin: 1.858736059%; /* 10px ÷ 538px = .018587361 */
    }
    .left-part {
    float: left;
    width: 63.197026%; /* 340px ÷ 538px = .63197026 */
    }
    .right-part {
    float: right;
    width: 29.3680297%; /* 158px ÷ 538px = .293680297 */
    }

    2. Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation.
    eg. @media all and (max-width: 420px) {
    .your-class, #your-id {
    float: none;
    width: auto;
    }
    }
    3. Flexible Media, Images, videos, and other media types need to be scalable, changing their size as the size of the viewport changes.
    eg. img, video, canvas {
    max-width: 100%;
    }

    I hope this will clear your basics about Responsive Web Design. Here is the link of a responsive website which will clear you when you'll open this link in Desktop, iPad, Mobile etc. http://www.indianfashionera.com/

  12. #12
    Junior Member kanesimicart's Avatar
    Join Date
    Jul 2015
    Location
    CA, USA
    Posts
    54
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

  13. #13
    Junior Member
    Join Date
    Aug 2015
    Posts
    12
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by miencotich View Post
    Step 1. Declare the viewport meta

    First you need to put this card into the folder <head> section on the HTML code of the website.

    Code:
    <meta name = "viewport" content = "width = device-width, initial-scale = 1">
    Step 2. Write CSS to the width of the device
    Code:
    body {
       background: #fff;
       color: 333;
    }
     
    @media all and (max-width: 320px) {
       body {
          background: #e7e7e7;
       }
    }
    This means your website will default (background) is white, but when scaled to the browser from 0px to 320px, then it will have a base of gray with color code # e7e7e7
    Thanks, great example. Easy to imagine

  14. #14
    New member
    Join Date
    Sep 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

  15. #15
    New member
    Join Date
    Sep 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You put water in a cup, it becomes the cup; You put water into a bottle, it becomes the bottle… Be water, my friend.” —Bruce Lee

    Back in the 1970s, Master Lee already laid down the basics of what the industry has dubbed responsive design. True interactive design experiences are like water: they take the form of the device you’re viewing them on, and in turn fully deliver the content and experience, regardless of that device.

    Like all things that last and remain effective…it must remain adaptive. That takes strategic thinking, not just fancy code.


    Thanks,
    Nextbits
    [email protected]

  16. #16
    Junior Member
    Join Date
    Jan 2016
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.

  17. #17
    Junior Member
    Join Date
    Mar 2015
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Responsive design have very flexible nature like a water because you can keep water in container with any size and any shape, it does not matter because the water will adjust according to the shape of your container. Similarly, the responsive design will work same in all size and shaped devices like desktop, laptop, mobile and tabs.
    You can search more informative and interesting information about responsive website design from http://www.clickmatix.com

  18. #18
    Junior Member
    Join Date
    Nov 2015
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The main thing which i like about web designing is that it needs creativity and we need to work differently acccording to our clients need this needs a creativity and innovation.

  19. #19
    Junior Member
    Join Date
    Mar 2016
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Responsive design teams create a single site to support many devices, but need to consider content, design and performance across devices.

  20. #20
    Junior Member
    Join Date
    Mar 2016
    Posts
    220
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries.

Page 1 of 2 12 LastLast

Bookmarks

Posting Permissions

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