Questions tagged [responsive-webdesign]

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

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

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
  • Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions.

Source: Wikipedia

119 questions
30
votes
6 answers

How important is responsive web design?

I've heard a variety of opinions regarding the pros and cons of using responsive web design recently and was wondering whether it was necessary for small businesses that target small geographical areas to implement responsive web design? Some…
22
votes
8 answers

Should I split a large CSS media queries file into separate files for each screen size?

I am working on a responsive design website to deliver content for all screen sizes. I have media queries for 5 different "steps", and the CSS file is around 30 Kb. Would it be better to split this into separate files and make them similar to…
CamSpy
  • 1,629
  • 2
  • 17
  • 24
17
votes
3 answers

Does Google serve different result according to responsive design?

Say a website implements responsive design in order to display a proper user interface according to the screen width of the device (smartphone, tablet, laptop...). Does Google display different search results according to the device's screen width?…
Jérôme Verstrynge
  • 4,645
  • 2
  • 27
  • 49
12
votes
5 answers

Is it OK to use jQuery for responsive web design?

I have been tasked to update a site to make it responsive and appear correctly on smart phones. Unfortunately, the site in its current form isn't very easy to work with - I can't just change the CSS. Is it considered bad to detect the browser size…
MeltingDog
  • 1,373
  • 3
  • 21
  • 36
11
votes
1 answer

Duplicate content on the same page - SEO ramifications?

In certain situations, I've seen Responsive Design websites with duplicate content on the same page. The pages had duplicate HTML structure and content in some parts of it due to Responsive Design. For example, a menu structure for mobile layouts,…
Jake Wilson
  • 911
  • 2
  • 8
  • 19
11
votes
3 answers

Reponsive Web Design : Does it download the same amount of data on every device?

I want to redesign my blog and website on wordpress to accommodate ever increasing mobile users and tablet users. I am also hearing about responsive design. I want to know does a responsive web design download the same amount of data on a computer…
Nikhil
  • 313
  • 1
  • 6
9
votes
2 answers

Is it acceptable to repeat the same h1 tag for desktop and mobile browsers in a responsive site?

I have a website with a page that has a video as the main content. It uses a responsive design layout that requires the

tag (with the same text) to be used in two different places: one for desktop browsers and one for mobile browsers. I will…

Sandesh Yadav
  • 217
  • 2
  • 9
9
votes
3 answers

What are the most frequent viewport sizes to use in responsive design?

I see differnt suggestions from very detailed (like here) to more brief, like google (here). so I am wondering what are the most suitable sizes to be used @media screen.
alfish
  • 558
  • 1
  • 6
  • 14
7
votes
1 answer

Does Google penalize sites for showing a different menu for mobile compared to desktop?

I'm really concerned about a design I have been handed by a designer. It changes the menu for mobile and desktop. On mobile you can only access the main categories, that will lead to all the content and sub links. On desktop the menu can reveal more…
7
votes
3 answers

How to make content load faster for mobile on a responsive design site?

So, I have a responsive design site. Studies say that for mobile devices we need to show a bit less content (graphics and such), and that we need to make sites load quicker for mobiles. If I set some page elements in css to display:none for mobile,…
CamSpy
  • 1,629
  • 2
  • 17
  • 24
7
votes
1 answer

Responsive images require excluding the width/height attributes?

One of the tenets of responsive web design is responsive images: sizing images using percentages rather than concrete values. This is done via CSS. The problem I have is the standard practice of including the width and height attributes on the img…
Grant Palin
  • 2,736
  • 3
  • 28
  • 41
6
votes
3 answers

Will Google omit my site from mobile search results if I do not have a mobile optimized site?

I have heard rumors that if I do not have a mobile-optimized web-site (whether through responsive design or redirection to a mobile version of the site) that Google will not show my site when a user searches on their mobile phone. Is there any truth…
5
votes
2 answers

AdSense responsive format resizable on the fly

The AdSense responsive format sizes the advertising only on load. If the user resizes the window (from large to small), the advertising is not resized (even with media queries) and keeps its initiale size. It seems that we are only allowed to…
Toto
  • 345
  • 2
  • 13
5
votes
1 answer

Can I view my PC localhost test site on my android tablet without uploading it?

I am working on a web site which is running on my PC via XAMPP. I want to test the site on my android tablet (galaxy tab) to make sure that the responsive design behaves that way it is designed to. I am wondering if there is a way to connect my…
Hoytman
  • 459
  • 1
  • 5
  • 12
5
votes
2 answers

What is the right approach to use AdSense with responsive web design?

Recently I was studying responsive design a lot and designed couple of sites. But I was wondering how would I use Google AdSense (which is pixel based) ads on my responsive design? Very typical example is suppose I have a 728x90 ads on header. Or if…
Sisir
  • 379
  • 3
  • 13
1
2 3 4 5 6 7 8