4
votes
Foundation: flex-video vs responsive-embed
Reading the documentation of .flex-video and .responsive-embed classes does not help to distinguish the difference between them. And testing them is not helpful either as we get, obviously, the same ...
- 374
4
votes
Accepted
Responsive Websites <meta name="viewport" content="width=device-width, initial-scale=1">
The best answer for this is in a Stack Overflow post:
https://stackoverflow.com/questions/61238548/side-effects-of-removing-width-device-width-from-viewport-meta-tag-when-initi
Relevant quote (...
- 5,204
3
votes
Google mobile friendly test is reporting "resources not loading"
When the Google mobile friendly test says that a resource could not be loaded, it usually means that it is blocked by robots.txt. Check your robots.txt file and ensure that you don't disallow ...
- 98.4k
3
votes
Accepted
AdSense ad display in media queries
You should refer to google documentation on how to modify responsive ad code
If you want to only show ads for certain screen sizes you can use CSS to accomplish this. The following example shows you ...
- 1,316
3
votes
SEO for links duplicated and hidden for responsive design
I'd suggest minimizing the amount of duplicate links. If this is not possible, then consider using different labeling for each link.
For example, have the business logo at the top of your site as a ...
- 13.6k
3
votes
Accepted
Google Search Console errors occuring and disappearing all the time
This is fairly common, however, the frequency that you are experiencing it is not.
I manage SEO for a lot of websites, and only see this come up every once in a while. I hit "validate fix" ...
- 6,221
2
votes
Accepted
How does the Media Query apply to smartphone resolutions?
There is a difference between the physical pixels that iPhone 6 plus can display and the screen size. Screen size is the pixel size that affects your CSS media query.
IPhone 6 plus has screen size of ...
- 206
2
votes
Definitive way to describe Responsive Web Design to a layperson?
A responsive website is a single website that will look good on devices of various screen sizes without the need for horizontal scrolling, zooming, or server side device detection.
At this point, a ...
- 98.4k
2
votes
Rendering different HTML contents based on screen size - good idea from SEO perspective?
is it a good practice to render different HTML contents from server-side based on screen size?...Also, we prefer not to separate the website into two versions...
No for a couple of reasons.
As ...
- 13.6k
2
votes
Google mobile friendly test is reporting "resources not loading"
If the Status says "Other error", there seems to be no clear reason for it but appears to happen for heavy sites loading a lot of resources. I had the same issue and after a lot of searching,...
- 121
2
votes
Should I split a large CSS media queries file into separate files for each screen size?
As @dalore mentioned in a comment, you might want to split the css by media query to reduce the amount of render blocking resource
While it's not a download saver it is in a way. A browser will ...
- 121
2
votes
m.example.com vs. responsive website
If I am keeping both the website live, I feel google will find duplicate content which will impact directly on the search engine ranking.
Google knows the difference and will not see it as duplicate ...
- 2,400
2
votes
Auto Re-Size YouTube Embedded Video
You can try this:
Remove the height and width from the embed code and put it between a div class and add a class to the iframe just like this:
<div class="youtube">
<iframe src="//www....
- 121
2
votes
Accepted
Structured data. Img. Width
Schema.org’s height/width properties are not for stating in which dimension the image should be displayed, but which dimension the image file has.
Knowing the image’s height/width, consumers (like ...
- 21.7k
2
votes
What are the most frequent viewport sizes to use in responsive design?
According to Statcounter those are currently (10.2022) the most used monitor sizes:
1920x1080 - 8.87%
1366x768 - 6.63%
360x800 - 5.91%
1536x864 - 4.09%
414x896 - 3.65%
390x844 - 3.6%
Percents are an ...
- 10.1k
2
votes
Accepted
How to avoid request of all images used for different devices using media query?
You wouldn't want to use CSS based media queries in any case because browsers will download all those images regardless if they are being shown or hidden. You can achieve what you want using either ...
- 32.9k
2
votes
My site is very old and is intended for desktops but 60% visitors are mobile
Actually, responsive web design is really easy to implement in this day and age. Gone are the days when you needed to design two different sites, or compromise on your overall layout to make everyone ...
- 203
2
votes
Accepted
GTmetrix complains of un-optimized images in responsive design
The best way to optimize page performance yet serve high-res images to high-dpi clients is to use the img srcset HTML attribute, like this:
<img
srcset="
/img/image4x.jpg 4x,
/img/image3x.jpg ...
- 15.8k
2
votes
Accepted
Is there a CSS or JS solution to stop bad word wrapping arround images on mobile?
Definitely a css thing.
One solution is to use a css @media (min-width: XXXpx) query to disable wrapping if the screen width is small (e.g. set float: none on your figure element containing the image)...
- 15.8k
2
votes
How to manage page caching to serve different AdSense units for Mobile and Desktop
If you want to display ad units based on mobile vs desktop - you can try using CSS media query that sets display: none on the ad unit to hide it. So you always have 2 ad units, but for desktop (wide ...
2
votes
How to check template on safari desktop and mobile without mac?
You have three options:
Buy some Apple devices just for testing.
Install Safari on Linux using Wine and trust that mobile devices work enough like it.
Subscribe to a cloud-based browser testing ...
- 98.4k
1
vote
How long will Google Search take to recognize that a website is now mobile-friendly?
It generally takes Google 2 to 4 weeks to make changes in the search results when Googlebot first has to crawl your site to notice the changes.
Since it has been three weeks already, I would expect ...
- 98.4k
1
vote
Accepted
Do certain ads need to have fixed dimensions even for a responsive website
It's depend on what kind of ad network you're using. If you're using Google Adsense, then it is good choice to go with responsive ad unit.
Your marketing team said, 300*250 pays more than responsive ...
- 5,507
1
vote
Accepted
Should I build my non-mobile web site in Bootstrap?
Yes, you can still use boostrap framework to make webpages for desktop or laptop as well. They use media query to make webpages responsive, but it does not mean, only boostrap can make mobile ...
- 5,507
1
vote
What are "rows" in a responsive grid system?
Grid (or responsive grid) is what you are referring to with your images. Where a standard web page can collapse down into a format usable for mobile screen viewing.
Take a scratch sheet of paper and ...
- 890
1
vote
Can I remove AdSense using jQuery?
I'm not sure what device you're using, but I can offer a suggestion that works in usability.
I run a mobile site as well but I don't use responsive ad units. Instead, I use a large fixed Adsense ad ...
- 13.6k
1
vote
Google Cache: Blank Page (Responsive Design)
I think the cause are your media queries. Google crawls with different settings and after it realizes, there are media queries, it crawls with user agent, which display size is lower as full screen.
...
- 10.1k
1
vote
What units to use in responsive design?
If you carefully observe most of responsive design css, you will find % as prime unit for width,height,margin etc.
For font-size, em is widely accepted.
Additionally media queries is also important.
- 292
1
vote
What units to use in responsive design?
To optimize for mobile, you need to have a viewport configured in the meta tag.
This is what I use:
<meta name="viewport" content="width=device-width,initial-scale=1">
That way I'll have ...
- 13.6k
1
vote
What is the best size for massive header images on front page?
On the modern web you don't have to choose.
You can now use the srcset specification for responsive images. See this great series from cloudfour for more details, be sure to read the entire series. ...
- 278
Only top scored, non community-wiki answers of a minimum length are eligible