Responsive text?
-
Hello guys, thats in advance for any advice that you can give me, i have a issue about the responsive content.
The content (product title) that fits on 1024px screen, but doesn't fit at 768 / 600 so I want to know if is possible to show a small (modify) version of that title with doing a cloaking o similar
Ex:
Title at 1024:
Brand New Xbox One 500 GB Black ConsoleTitle at 768 / 600px
Xbox One 500 GB Black ConsoleAny advice?
Thanks!
-
Thanks!
-
It can be done in a many ways. With Bootstrap it could be done these ways:
Long detailed Title with many words
Short Title with few words
or
Long detailed Title with many words
Short Title with few wordsOr if you are coding it yourself, then create similar class names and in your CSS file define at what screen widths they are declared visibilty:visible; or visibility:hidden; - This is not cloaking, there is always a version of the text visible to the user.
-
I know, but i´m talking about changing the the phrase, not the size,
-
Hi Rafael,
In a responsive design you can definitely change any font size you want for different device widths, even h1 text.
You just give the h1 a class, or put it in a div with a unique class. Then in the CSS file you can use media queries to change anything like this... font-size:12px; line-height:16px; color:red;
I do it often to put my h1, h2, h3 tags anywhere I want on the page and make them any size or style I want without messing up the look of the page.
-
complete site to responsive, I saw your site but H1 don´t change only resize the divs.
Thanks for the answer
-
Nice job covering both approaches, Gregory! I found this helpful as well.
-
Are you converting a site to responsive, or just trying to hack a few things on a fixed with site?
If you are really making the page responsive, then I suggest using one of the pre-designed responsive site systems. I use Twitter Bootstrap. It's free and very easy to learn, even for a non-programmer. With Bootstrap your problem would be solved either by using a single title and changing the font-size for different device widths, or by presenting different versions of the title on different device widths. Like this...
Brand New Xbox One 500 GB Black Console
Xbox One 500 GB Black Console
In Bootstrap the class "hidden-desktop" actually means it is only visible on devices that are NOT desktops - which are tablets and phones. They tell you which screen width ranges are considered to be which device type. You can go to my site on a PC and pull the screen width across from wide to narrow to see how a Bootstrap site reacts to varying screen widths.
If you are just trying to hack a few repairs, you will need to do it in the CSS file with "media queries". Not too hard, but takes a little learning and experimentation to figure out. Your page HTML will need to have a "class" or "id" added to any element you want to adjust with the CSS.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Can we compete for both videos and text results?
Hi, We have a ecommerce website that performs very well for our brand pages on the text results including the reviews snippet. Our brand pages also include embedded videos. Until now we have always ranked poorly on video results. Our videos are hosted over youtube. In order to boost our video result we have recently submitted a video sitemap to help crawlers find out our videos. The result is the following : our brand pages are now only competing in the video results space. Instead of showing as a text result with our reviews snippet, it shows as a video in a carrousel widget. Within the video tab we are ranking top. We have experienced a drop in CTR since then. Moz have reported a drop on all our brand keywords for text search although the video widget shows our brand there. Is there a way to compete for both videos results and text results, making the choice to keey the review snippet widget? Is the video sitemap useful only to compete within the video space? Cheers
Intermediate & Advanced SEO | | mattam1 -
SEO impact of mouse over text on product page
Hi, we recently improved our product page to show more color options, like this http://www.prams.net/knorr-baby-voletto-sport-pram-stroller-reversible-seat-green-a?inref=home-left In order to improve the seo, we expanded our rich snippets the following way we added all color options, skus and prices as "items offered" we are showing the highest and lowest price range and eliminated the base price https://developers.google.com/structured-data/testing-tool/ Google now shows the price range in the rich snippet. The questions is: as the user see the original color, the price and the sku only when mousing over the small images. We are worried that this could be treated a "hidden text". Does anybody have experience in this matter or a way a to solve it better? Thanks in advance Dieter 8WthtQY
Intermediate & Advanced SEO | | Storesco0 -
What is Google supposed to return when you submit an image URL into Fetch as Google? Is a few lines of readable text followed by lots of unreadable text normal?
I am seeing something like this (Is this normal?): HTTP/1.1 200 OK
Intermediate & Advanced SEO | | Autoboof
Server: nginx
Content-Type: image/jpeg
X-Content-Type-Options: nosniff
Last-Modified: Fri, 13 Nov 2015 15:23:04 GMT
Cache-Control: max-age=1209600
Expires: Fri, 27 Nov 2015 15:23:55 GMT
X-Request-ID: v-8dd8519e-8a1a-11e5-a595-12313d18b975
X-AH-Environment: prod
Content-Length: 25505
Accept-Ranges: bytes
Date: Fri, 13 Nov 2015 15:24:11 GMT
X-Varnish: 863978362 863966195
Age: 16
Via: 1.1 varnish
Connection: keep-alive
X-Cache: HIT
X-Cache-Hits: 1 ����•JFIF••••��;CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 75
��C•••••••••• •
••
••••••••• $.' ",#(7),01444'9=82<.342��C• ••••
•2!!22222222222222222222222222222222222222222222222222��•••••v••"••••••��••••••••••••••••
•���•••••••••••••}•••••••!1A••Qa•"q•2���•#B��•R��$3br�
••••%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������•••••••••••••••••••
•���••••••••••••••w••••••!1••AQ•aq•"2�••B���� #3R�•br�0 -
Does text, initially hidden within a tabbed structure, carry the same weight in Google?
Hi everyone, my site has suffered from a number of organic drops this year, following a redesign, panda, and penguin. An example of one of my key pages is shown below: http://www.concerthotels.com/venue-hotels/bridgestone-arena-hotels/326895 Earlier this year, I redesigned my site, so that, for example, 4 pages associated with each Bridgestone Arena (a page with nearby hotels, one for user reviews, one for upcoming events, one for general information) were combined into one "Bridgestone Arena Hotels" page. The reason I did this is because I felt that many of the pages were very thin. My new page has tabs for reviews, tickets etc., with the default tab listing nearby hotel information - the primary aim of my website. I'm worried that all the great unique user review information that I'm collecting is not being given the weighting it deserves, because it is content that is not immediately visible when the user lands on the page - only click the Reviews tab makes the content visible. The hidden content is definitely being picked up by Google e.g. searching for a portion of the review content in Google such as "We were here for the Aerosmith concert. The workers were so friendly and helpful - great experience!" serves up the Bridgestone Arena page in the results. But do you think Google still sees the page as being pretty thin in content, because much of the unique content is initially hidden? I am considering introducing a little featured reviews section to the visible content, that just includes a couple of the latest venue reviews, with a link to open the reviews tab. But if I have some review content here, and the same reviews in a hidden section of the same page, is Google likely to treat this as spammy? Thanks for your help and advice, Mike
Intermediate & Advanced SEO | | mjk260 -
Links from music/celebrity based fansites - sitewide images with no alt text
We're currently in the middle of a link audit on our website OneDirection.net and a large part of our incoming links come from fansites such as the following: ladygaganow.net nickjonline.com justinbieberhood.com joejonashq.com harrystylesfan.org brunodaily.org onedirectiondaily.com onedirectionfans.net Now, our previous way of thinking was that these are very relevant websites in the same niche as us, and therefore should be passing some value? However all of the links on these sites come from sitewide images with no alt-text. Some of the sites are passing 1000+ links to us. We've been wary to disavow or request removal of these links as we've usually gone with the thinking that Google applies "common-sense" based logic in its algorithms, and therefore these backlinks should be ok - in our opinion. However we think we are suffering from some kind of algorithmic penalty with our current rankings, and are now thinking these could be the cause. What are people's opinions on these links? Should we stay clear of sitewide links altogether? Should we contact the site owners and try to get them to mix up the alt-text? Or should we get rid of them altogether? Thanks, Chris.
Intermediate & Advanced SEO | | PixelKicks0 -
Anchor Text to Content Ratio
My Home Page has about 500 words of content, but when I crawl the text it brings up about 1400 total words when counting all the anchor text links (I believe all are in the navigation or images). All of the link are internal and relevant (it's a huge site), but I am worried that they are diluting the copy. Is that likely the case? What's a good ratio? Thoughts?
Intermediate & Advanced SEO | | NathanArizona0 -
Multiple sites linking back with pornographic anchor text
I discovered a while ago that we had quite a number of links pointing back to one of our customer's websites. The anchor text of these links contain porn that is extremely bad. These links are originating from forums that seems to link between themselves and then throw my customers web address in there at the same time. Any thoughts on this? I'm seriously worried that this may negatively affect the site.
Intermediate & Advanced SEO | | GeorgeMaven0 -
Multiple anchor text links
Hi. I wanted to ask about having multiple text links to an internal page from the same page. So I have a section title on my home page which will vary with each article. It may say "Healthiest Cat Foods" as the title then offer a snippet and finally offer a "continue reading..." anchor text. The title is a great link to the article while the "continue reading..." is another link to the same article. I like the to keep the title link because it is perfect anchor text. I like to keep the "continue reading..." because it seems helpful for users. I have read that search engines will only count the first link to an article which is fine as I only want the first one to count anyway. What I am wondering is do I lose any page rank because I added the second link? Does that second link hurt me in any way?
Intermediate & Advanced SEO | | NikkiGaul0