2022 Developer Survey is open! Take survey.

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).

Filter by
Sorted by
Tagged with
4 votes
1 answer
42 views

Responsive Websites <meta name="viewport" content="width=device-width, initial-scale=1">

Everywhere I look (e.g. Web.dev), it tells you that you must use <meta name="viewport" content="width=device-width, initial-scale=1"> in the header of your HTML file, so ...
user avatar
1 vote
1 answer
11 views

How to check template on safari desktop and mobile without mac?

I am developing a HTML/CSS template. I am using Fedora Linux platform to write codes and test pages. For test my template on safari (especially mobile version) I have some trouble without any apple ...
user avatar
  • 11
1 vote
1 answer
26 views

Are there pitfalls to implementing a hybrid site with both responsive layouts and dynamic serving layouts?

I have a 20 year old site that I want to upgrade to a responsive layout. Originally it was a desktop-only layout but when a significant portion of my user base went mobile I implemented dynamic ...
user avatar
3 votes
1 answer
57 views

Google Search Console errors occuring and disappearing all the time

In the Google Search Console I keep getting some errors under "Mobile Usability" that pop up every once in a while and then disappear again. To be more exact, it's these two errors mainly, ...
user avatar
0 votes
0 answers
34 views

On Desktop, is larger responsive ads worse than 970x250 ads?

I have a website and I used to place 970x250 ads for desktop users. Later I changed the ads to a responsive one and it's bigger than 970x250. It's 999x260. I thought a bigger room would bring more ...
user avatar
2 votes
0 answers
21 views

Dynamic Serving via 'vary http': Is still valid? Why the industry prefer full responsive websites instead?

I have a client that asked me to develop a website using a dynamic serving technique, basically he uses the vary http header in order to serve different versions of the front-end discerning them based ...
user avatar
1 vote
0 answers
41 views

max-width and data-srcset: Chrome is loading the wider version on mobile

I've been trying to use responsive+lazyload images on my website, and I created the following piece of code: <center><picture> <source type="image/webp" media="(max-width:...
user avatar
  • 423
0 votes
1 answer
36 views

Google SEO crawl budget problem with a website of 2,400,000 URLs: should I keep on serving AMP files?

I manage a website with 200,000+ products, with 2,400,000 URLs: 600,000 URLs for non-AMP visitors in English (per product: 1 page of features, 1 page with photos, 1 page with opinions) 600,000 URLs ...
user avatar
  • 423
1 vote
1 answer
45 views

How to manage page caching to serve different AdSense units for Mobile and Desktop

I'm trying to cache the pages of my website, which are responsive and show the same contents for Desktop and for Mobile, with the exception of the location of the AdSense units if the visit is from ...
user avatar
  • 423
1 vote
0 answers
20 views

What are the different ways to creating template for a website from scratch? [closed]

I would like to know the different ways we can create template for a website because many times the pre-made templates available online don't fit to the requirements of everybody. The style I want ...
user avatar
  • 111
1 vote
1 answer
37 views

Is there a CSS or JS solution to stop bad word wrapping arround images on mobile?

I have a blog post here which works fine on a larger screen but not so much on a smaller one. As you can see from the screenshot below the paragraph breaks very poorly around the image. Given how ...
user avatar
1 vote
0 answers
27 views

Do we need to specifically support old browsers to be WCAG compliant or is following the robust principle enough?

I understand WCAG is technology agnostic, so it doesn't specify which browsers, devices, and operating systems that a website needs to be accessible on. However, our site isn't responsive on certain ...
user avatar
2 votes
1 answer
31 views

Two menus one for desktop one for mobile, screen reader issues?

Suppose a webpage has two menus, one for a "desktop" sized screen and another for tablets/phones. It might looks something like this: <body> <div class="hide-me-on-wide-screens"> <...
user avatar
  • 161
1 vote
1 answer
59 views

Does it matter if I use a different design elements for desktop and mobile versions of my site?

My question is about responsive designs (HTML + CSS). Does it matter if I use a different elements for desktop and mobile versions of my site? I mean that my page isn't really responsive, it only ...
user avatar
1 vote
1 answer
155 views

GTmetrix complains of un-optimized images in responsive design

The website GTmetrix is giving me low score on "Optimize images" for the following reason: On my main page I have 4 columns with images. Each column takes 25% of the screen resolution so on my ...
user avatar
  • 125
1 vote
0 answers
30 views

Designing a site with ads (adsense) for 4K monitors

I am in the planning stages of my new website. With the rise of 4K monitors I want to make my site appealing to people who use these larger resolutions. My site design is based on the responsive 12 ...
user avatar
1 vote
0 answers
187 views

Is max-height allowed on google responsive ads?

AdSense has a help page stating the acceptable modifications of ad code. AdSense Document One of the section speaks about specifying an expandable width and a fixed height. (The example given on the ...
user avatar
  • 2,233
0 votes
1 answer
81 views

Dynamic Serving with different url [duplicate]

We have a website math.tutorvista.com. We use dynamic serving web pages. Desktop URL: https://math.tutorvista.com/geometry/analytical-geometry.html Mobile URL: https://math.tutorvista.com/...
user avatar
1 vote
0 answers
13 views

Developing an online platform for generating text logos [closed]

I'm trying to develop a online platform which will automatically generates text logos when the text inputs by user. I searched many ways to find some resources to starting my task. but couldn't found ...
user avatar
  • 11
0 votes
2 answers
767 views

Responsive web design causes social media buttons to overlap the logo on smaller screens [closed]

I haven't developed a website in quite some time, and am currently working on one for a friend's small company. I put together a simple design, and have been able to get the content itself to be ...
user avatar
-1 votes
1 answer
26 views

My site is very old and is intended for desktops but 60% visitors are mobile [closed]

my site is 16 years old and still looks great on a desktop monitor but looking at the statistics 60% of visitors enter my mobile devices my question is there a simple zoom script to mimic the finger ...
user avatar
  • 1
1 vote
0 answers
23 views

Old Mobile site redundant now main site is responsive

I have an old site which has a mobile.example.com, I finally got around to updating the main site to a responsive version that means the old mobile site is no longer needed. However I am not sure if ...
user avatar
  • 981
1 vote
1 answer
79 views

Server.Transfer method for mobile version

I just want to be sure if i use server.transfer method for display mobile version of my website, is it good for SEO and google ? somehow i managed to use this method to display mobile version of my ...
user avatar
  • 237
3 votes
1 answer
405 views

Foundation: flex-video vs responsive-embed

Please, explain to me what are the pitfalls to use ZURB Foundation's flex-video instead of responsive-embed (or vice versa). I've made a layout where I don't see any difference between two: <!-- ....
user avatar
  • 153
3 votes
1 answer
498 views

SEO for links duplicated and hidden for responsive design

I would like to know if duplicating some links in the menu for responsive purposes (display:none in some cases) can affect SEO. Simple example: <ul> <li><a href="/one">one</a&...
user avatar
  • 31
2 votes
2 answers
111 views

Delivering the optimal image experience to all from website regardless of device

I was deeply involved in other work and out of the blue, the co-owner of the site informs me that the website isn't 100% right for all people. While he isn't technically inclined compared to me, this ...
user avatar
4 votes
1 answer
3k views

How to avoid request of all images used for different devices using media query?

I want to know, how can I avoid loading all images I created for different devices using media query. Currently my mark up look like below : <img src="/media/1062/lg.png" alt="Fresh from ...
user avatar
  • 173
0 votes
1 answer
68 views

What is the ideal URL format to use for images served at multiple sizes

I am building responsive image functionality for a site (written ASP.NET MVC, although that is almost irrelevant here). My question is not technical, but about the most semantic way to serve images at ...
user avatar
3 votes
3 answers
156 views

How long will Google Search take to recognize that a website is now mobile-friendly?

I updated a client's website 3 weeks ago to use Bootstrap. Since then I've run almost every other day Google's Mobile-Friendly test and also Google's PageSpeed, and all results are in the green. ...
user avatar
2 votes
1 answer
346 views

Do certain ads need to have fixed dimensions even for a responsive website

I am working on a responsive website using a fluid grid system, which means that my content has no "fixed" width, but rather use a proportion of the screen width (e.g 3/12 or 4/12) We would like to ...
user avatar
  • 135
1 vote
0 answers
40 views

Forum Software Suitable For The Modern Web [closed]

I know that forums are in no way as popular as they used to be, but I always wanted to set one up, and still do, so I'm really considering my options. Let me outline what I'm after. I preferably ...
user avatar
  • 11
0 votes
1 answer
167 views

m.example.com vs. responsive website

I am working on SEO project for the website aasaanjobs.com. The website has two different entity for desktop users and mobile users. I was thinking deindexing https://m.aasaanjobs.com/ completely and ...
user avatar
1 vote
1 answer
1k views

Auto Re-Size YouTube Embedded Video

I'm building a website that I hope to feature heavily on embedded youtube videos, but the embed code only allows you to specify one width, which is a problem when it comes to the whole mobile ...
user avatar
1 vote
1 answer
917 views

Structured data. Img. Width

With structured data and img width and height, Google says "number required". Does it mean that Google only accepts the numbers in pixels? https://developers.google.com/search/docs/data-types/articles ...
user avatar
  • 799
0 votes
1 answer
115 views

Should I build my non-mobile web site in Bootstrap? [closed]

w3schools.com defines Bootstrap as "... framework for developing responsive, mobile-first web sites". If I am not interested that much in building a mobile-compatible web site (I am but it is not my ...
user avatar
  • 179
0 votes
1 answer
2k views

Rendering different HTML contents based on screen size - good idea from SEO perspective?

Is there an adverse effect of capturing screen size with JS and rendering different HTML contents via AJAX based on user's screen size, mainly from SEO perspective? I'm working on an ecommerce app ...
user avatar
  • 101
4 votes
2 answers
5k views

Google mobile friendly test is reporting "resources not loading"

The google mobile friendly test conveniently shows resources that could not be loaded...but it says nothing regarding how to go about fixing them. I know this may be a broad question, but I'm just ...
user avatar
  • 348
0 votes
1 answer
571 views

AdSense ad display in media queries

I am creating a new layout for my website and I have AdSense ads there. I have read that you can have up to 3 ads on one page. I am creating responsive design now and I want to use 4 ads but 3 will ...
user avatar
1 vote
0 answers
56 views

Best practice with visual responsive html restructuration

I have to follow a sketch of the main webpage of a website I'm building. The main page is essentially blocks rendered as rows, but one row is divided in 4 blocks that are not of the same height (so I ...
user avatar
3 votes
1 answer
560 views

Can I remove AdSense using jQuery?

This question is not on how to remove AdSense, but if I can remove AdSense from my website using jQuery. I was reading the policies on AdSense and I'm a little confused. On the page regarding the ...
user avatar
  • 554
4 votes
1 answer
816 views

Google Cache: Blank Page (Responsive Design) [closed]

I've been aware of this issue for sometime but sadly not had the downtime to address, but I want to ensure that its actually a problem before wasting my time. The problem that I have is that Google's ...
user avatar
  • 32.6k
3 votes
2 answers
3k views

What units to use in responsive design?

So I am really at loss which units to adopt when developing responsive layouts. Some say use viewport units. Other people say use rem. Other say use media queries and pixel ratio. So what unit is the "...
user avatar
  • 253
1 vote
2 answers
71 views

What is the best size for massive header images on front page?

Most sites these days have wide screen images that are responsive and fit most of the screen on home page. Height seems to be at around 600 and width at 1920 However...when responsive it can shrink ...
user avatar
1 vote
3 answers
76 views

Definitive way to describe Responsive Web Design to a layperson?

Normally when I describe RWD to a non-web person (and bear in mind this might be a non-technical manager or a client), I'll say something like: The site will be designed in such a way that it will ...
user avatar
5 votes
2 answers
487 views

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 ...
user avatar
  • 345
1 vote
0 answers
35 views

Forcing all images to be rendered before adsense ads load

I have a problem. On my mobile pages where each page consist of a large picture, I have it set with CSS so that the image fits the entire available width of the screen. I want to avoid using fixed ...
user avatar
1 vote
1 answer
47 views

Serving a non-responsive css to ie8 and lower

We are rewritting our website to a responsive design (and maybe RESS in the future). Analytics figures impose us to support some old browsers (ie7 and ie8). We have 2 CSS: site.css: full css with ...
user avatar
  • 345
3 votes
1 answer
982 views

How does the Media Query apply to smartphone resolutions?

With the launch of new iPhone 6 Plus with a resolution of 1920x1080 px, it got me thinking how is this resolution different from the screen widths we UI developers define in our CSS in media-query ...
user avatar
  • 175
1 vote
1 answer
94 views

If I used CSS to size an image, would google understand the new size?

Say I have this html code (replace x and y with actual numbers): <html> <head> <style> IMG {width: 100%;height: auto; max-width:xpx; max-height:ypx;} </style> &...
user avatar
4 votes
3 answers
159 views

How does google check for responsive design?

I know that google is checking for responsiveness when ranking sites and I'm wondering, how it is done.. is it looking at media queries only? I want to make a page with many absolutely positioned ...
user avatar
  • 41