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
-
Should you bother disallowing low quality links with brand/non-commercial anchor text?
Hi Guys, Doing a link audit and have come across lots of low quality web directories pointing to the website. Most of the anchor text of these directories are the websites URL and not comercial/keyword focused anchor text. So if thats the case should we even bother doing a link removal request via google webmaster tools for these links, as the anchor text is non-commercial? Cheers.
Intermediate & Advanced SEO | | spyaccounts140 -
OK to change the anchor text of a link?
I have built a link on behalf of a ciient in a long, well-written article on a reputable website that accepts contributor accounts. I therefore control the link. I have since realised that the anchor text of the link could be optimized much better than it currently is (while still only being a partial match). Would I be punished by the algorithm for going in and changing the link? I know it's not 100% "natural," but then we're SEOs, and i don't think it's too implausible that a website owner may go in and do the same... Maybe if I add some text as well, it would make things look more natural?
Intermediate & Advanced SEO | | zakkyg1 -
What would be best way to transition from mobile website to responsive
We have a mobile website (mobile.website.com) that mirror our desktop site (www.website.com) with +100 000 pages. We have an alternate tag on our desktop to our mobile site and a user agent detect that redirect mobile traffic to our mobile site Our mobile site is no index and has a canonical to our desktop. Everything works pretty well, the mobile website is not index and only show up in SERP when a user make a search from a mobile. Our main website is now responsive and we would like to kill our mobile site without compromising our traffic. We know that a slight speed change or content change can affect our traffic, what would be the best way to do that? Big bang: redirect all mobile URL to desktop, remove user agent detect and remove alternate tag on desktop Semi Big bang: remove user agent detect and remove alternate tag on desktop and see how the traffic react before redirecting Progressive: remove the user agent detect and the alternate tag on some section of the website to see how the traffic react Other ? Anyone has any experience with that? Thanks and let me know if anything is not clear.
Intermediate & Advanced SEO | | Digitics0 -
Does changing Anchor text of old built links raise a red flag in Google?
I have lot of links (10000+) built against Exact match anchor text so what is solution to that now? Other than disavowing them all, May I change the anchor text of those links (From Exact Match To Brand Name or naked URL)? Does Google have algorithms to detect anchor text changes and if so, do those algorithms detect these sorts of changes and raise a red flag on sites doing it. I respect your opinions but please only comment if you are sure about it because I am already facing a penalty so can't afford to get another.
Intermediate & Advanced SEO | | Ishrat-Khan1 -
Is it worth changing themes to be Responsive, and risk a SERP change?
I've got a site that ranks #1 for it's term. It's Worpress on Thesis 1.85. The site is not responsive and cannot be because Thesis 1x is not (and Thesis 1x is a dead end). I really would like my site responsive, but I fear changing things might affect my #1 rank. The least impactful change I could do is move to Thesis 2.x, but I have come to really dislike the company and hate to get locked in again. There are other frameworks I would prefer to move to, but their impact on my pages' source would be much more. So, my question is, is it worth moving to a new theme (keeping the layout looking exactly the same, although the "source" would look different) just to make the site responsive? Is it that important?
Intermediate & Advanced SEO | | bizzer0 -
Internal anchor text
Hi, I'm not sure what approach I should be using with my internal anchor text. Ideally I would like to rank well for about 3 keyword variations, so what I am wondering is is this achievable through judicious use of onsite anchor text? What I'm trying to establish is whether I should focus on just one term throughout and never vary? Or, should I go for a variety of all 3 keywords? Should I go for a wide variety of semantically similar phrases. Where are the most important places for this anchor text?
Intermediate & Advanced SEO | | Cornwall
E.g. home page, main nav, text links within articles? Should I try and use the full term in my navigation. E.g. instead of using
Pink | Blue | Green
should I go for
Pink widgets | Blue widgets | Green widgets Any suggestions, pointers to useful articles would be very much appreciated. TIA,
Chris0 -
Anchor Text Usage
Hi, What is the best way to use anchor text during link building after recent updates from Google. I thinking of doing the following: 60% Brand Keyword (my site name)
Intermediate & Advanced SEO | | Vegitss
20% Click here, visit this site etc
20% myurl.com
10% a Mix of both broad & phrase match of my targetted keyword. What do you suggest Does anyone have a working strategy? Will be waiting for your replies...0 -
What should my optimal anchor text look like, given cannibalization risk?
We have a content page with the explicit goal of ranking highly for "raised garden beds". We drive traffic from this page to our various types of raised garden beds in our store. The "FarmsteadRaised Garden Bed" is one such product. http://eartheasy.com/grow_raised_beds.htm Should we avoid using "raised garden beds" in the anchor text of the internal links pointing to the products in our store because of cannibalization? We recently changed the anchor text of the internal links to have keywords instead of just "click here" or "more info" - was this a good idea? What should our optimal anchor text look like?
Intermediate & Advanced SEO | | aran0880