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).
118
questions
0
votes
0
answers
33
views
Trying to learn JSON after a little CSS and HTML
I'm learning to place media queries into a website for getting the correct layout changes I need on different mobile devices. I've done this in CSS and Bootstrap before, but my job is asking me to do ...
user138295
2
votes
1
answer
37
views
Is duplicative responsive text dilutive to SEO?
Let’s say I want to have responsive page text like the below:
<h1 class=“hide-sm”>My Awesome Widgets</h1>
<h1 class=“show-sm”>Widgets</h1>
Let’s say for argument’s sake my ...
- 123
2
votes
1
answer
150
views
Determine Font Sizes for Common Screens - Accounting for Pixel Density (PPI)
Just trying to determine modern best practices for previewing, anticipating, and determining best font sizes to use for web design these days while accounting for the different types of displays the ...
- 21
4
votes
1
answer
563
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 ...
- 457
1
vote
1
answer
26
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 ...
- 111
1
vote
1
answer
29
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 ...
- 98.3k
3
votes
1
answer
141
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, ...
- 235
2
votes
0
answers
25
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 ...
- 121
1
vote
0
answers
62
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:...
- 423
0
votes
1
answer
44
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 ...
- 423
1
vote
1
answer
80
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 ...
- 423
1
vote
0
answers
22
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 ...
- 111
1
vote
1
answer
103
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 ...
1
vote
0
answers
40
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 ...
- 11
2
votes
1
answer
97
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">
<...
- 161
1
vote
1
answer
73
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 ...
3
votes
2
answers
169
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 ...
- 145
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 ...
- 119
1
vote
0
answers
249
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 ...
- 2,323
0
votes
1
answer
84
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/...
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 ...
- 11
0
votes
2
answers
902
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 ...
-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 ...
- 1
1
vote
0
answers
24
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 ...
- 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 ...
- 287
3
votes
1
answer
434
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:
<!-- ....
- 153
3
votes
1
answer
622
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&...
- 31
2
votes
2
answers
115
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 ...
- 13.6k
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 ...
- 173
0
votes
1
answer
75
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 ...
- 263
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.
...
- 231
2
votes
1
answer
372
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 ...
- 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 ...
- 11
0
votes
1
answer
212
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 ...
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 ...
- 151
1
vote
1
answer
998
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 ...
- 819
0
votes
1
answer
124
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 ...
- 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 ...
- 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 ...
- 348
0
votes
1
answer
654
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 ...
- 457
1
vote
0
answers
57
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 ...
- 23
3
votes
1
answer
642
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 ...
- 554
4
votes
1
answer
837
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 ...
- 32.9k
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 "...
- 253
1
vote
2
answers
86
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 ...
- 259
1
vote
3
answers
78
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 ...
- 2,325
5
votes
2
answers
496
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 ...
- 345
1
vote
0
answers
38
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 ...
- 13.6k
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 ...
- 345
3
votes
1
answer
1k
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 ...
- 175