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.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
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
-
Is the flow of page rank through anchor text links diminished if hidden using tabs
Hi there, Whilst there is plenty of information online regarding the devaluation of hidden content using tabs, it seems to be more difficult to get a clear answer as to how page rank is impacted when anchor text links are hidden. If an anchor text link is hidden using tabs, will the flow of page rank to the page the anchor text leads to be negatively impacted? If so, why? To add further context, whilst the anchor text link would be visible in the HTML, the tab would be dependant on JavaScript to function. Thanks,
Intermediate & Advanced SEO | | SEONOW1230 -
Does Disavowing Links Negate Anchor Text, or Just Negates Link Juice
I'm not so sure that disavowing links also discounts the anchor texts from those links. Because nofollow links absolutely still pass anchor text values. And disavowing links is supposed to be akin to nofollowing the links. I wonder because there's a potential client I'm working on an RFP for and they have tons of spammy directory links all using keyword rich anchor texts and they lost 98% of their traffic in Pengiun 1.0 and haven't recovered. I want to know what I'm getting into. And if I just disavow those links, I'm thinking that it won't help the anchor text ratio issues. Can anyone confirm?
Intermediate & Advanced SEO | | MiguelSalcido0 -
Link Building And Anchor Text Placement
Hi everyone, I can't seem to find a concrete answer on how anchor text is going, so I'm hoping you all can shed some light on it. We were asked to do a few guest blog posts, and I wanted to figure out what's the most effective way to use the backlinks. Granted, I know user experience is most important, but since we have control over the topic, I can tailor it so that won't be a problem. Other than user experience, how should I approach it? Things I'm considering: 1. Should I use branded text or keyword text? Kemp & Ruge Law Group vs car accident attorney? I've seen some reports of exact match anchor text causing some penalties, but I'm thinking that's for like thousands of links. We barely have any. 2. Should we point the links to our homepage to help our domain authority or to the page with the keyword phrase we want to rank higher? Thanks, Ruben
Intermediate & Advanced SEO | | KempRugeLawGroup0 -
On site links triggering anchor text algorithmic penatly?
I'm trying to figure out why a drop in ranking occurred and think it may be related to an increase in on site links. I've attached images of the SEO moz report showing a jump in links from a few hundred to around 15,000 within the space of a week. I think this may be due to some on site work I did when I created categories (I use wordpress) for a large number of cities and towns in the UK. I soon realised I'd run into duplicate content issues and removed all these categories within a few days. As I added categories I also ran into 'too many on page links' warnings as each category I added created a new link and I ended up with hundreds on each page. If you look at the analytics reports I suffered a huge drop in rankings on the 10th March and think this could be due to an on site anchor text problem that was caused by adding the categories and in turn creating many on site links. SEO moz found these links on the 11th and 25th Feb but my guess is that Google found them around at the same time but if these links are the problem then why didn't my rankings drop until the 10th March? Surely they would have dropped sooner? Would this cause a drop in rankings? I've recieved an email from google saying that no manual penalty was applied to the site after I submitted a reconsideration request. Therefore it must be some kind of algorithmic penalty. Could this be the problem and if not what else should I look at. My baclink profile appears to be okay and I've been careful to vary my anchor text with inbound link building. I'm at a loss as to what to do next. Any help will be much appreciated! UXsMLYS.png Ov9AOs8.png
Intermediate & Advanced SEO | | SamCUK0 -
Two Pics, one bit of Text single anchor link?
Hi thereGurus, sorry Aspirants ;-), I have a really nice looking menu used in my standard page template that has some SEO issues now due to possibly causing 'too many onsite links' penalty/downgrade on some of my bigger pages going >120 links. Wanting to keep the nice menu, I want to work around the issues if possible. The menu is comprised of 7 buttons with various keywords pertinent to the site. On the menu, hovering over the keyword in a button eg 'Technology' causes this button with word inside to do an animated slide down and a picture representative of 'Technology' to appear where the button was with the original button directly below it, which then a side menu slides out of to the right to reveal 5 anchor links that represent the 'Technology' menu category. The first option in this sub-menu is supposed to have the same anchor link as the description image and the button/button text that being it is like a category description. Trouble I am having is that the slide out menu requires a separate div for javascript reasons. I have one anchor covering the button and the pop-up image, but then I need a second anchor for the first line of the slide out menu (otherwise fails W3C). This is adding 7 duplicate anchors to the page on a e-Commerce page that already has too many anchors IMHO. I read in HTML5 you can have an anchor holding a div inside, but how about an un'd div? The next four items on the slide out menu go to other anchor links so it first anchor needs to end prior to these, hence halfway through a div. Is there another way of making multiple items (across div boundaries etc) only go to/count as one single anchor link? Thanks for your help, Brad
Intermediate & Advanced SEO | | BM70 -
Is "Car Discount" a problematic anchor text for CarDiscount.com (google penguin)?
I have a couple of partial match domains in the format KEYOWRDdiscount.com and also the website name resembles domain name. "Car Discount" is not my website but just an example to illustrate:
Intermediate & Advanced SEO | | lcourse
Is "Car Discount" a problematic anchor text for CarDiscount.com?
Should I try to modify existing external anchor texts to "CarDiscount" or "CarDiscount.com" instead of "Car Discount" Do you know of any cases where such anchor texts coinciding with partial match domain were likely reason for penguin penalization? Thanks.0 -
Best way to set up anchor text on parked pages?
Our company is no longer offering a series of products, much to the disappointment of our SEO team since we've spent a long time building up the pages and getting them ranked organically. The pages all have decent page rank and in some cases rank #1 for the primary keyword. We have a sister company that we acquired a year ago and they still offer these products on their website. They are a completely separate company with their own website which existed long before we acquired them and we have nothing to do with their website. Our team has proposed that rather than take down the URLs on our site for the products we no longer offer, to put a message saying something like "sorry we don't offer this anymore but you may be interested in this.." and then link to our sister company with anchor text so that they can get some benefit from our SEO efforts if we can't. The question/issue is how should we do that since there will be a lot of pages from the same domain, about 20 pages, all linking to a few pages on a different domain. Should the anchor text be varied unbranded or branded? On the one hand I think if we change up the anchor text used to link to another page many times from a single domain that looks strange and transparent to google. On the other hand unbranded text would be the better descriptor for users since we are deep linking to the product not the homepage of the other site.
Intermediate & Advanced SEO | | edu-SEO0 -
Site views messy in a text browser, but can see all text, is that a problem?
In Google's webmaster guidelines, they mention to view your site in a text browser to ensure all text is visible. All of our text is visible, but is very messy and is all jumbled on the page. I've noticed most sites text browser layout is clean. H How important is it to SEO that the site views cleanly in a text browser? Does anyone know of any feedback from Google engineers about this point?
Intermediate & Advanced SEO | | nicole.healthline0