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
-
Text over image
Hello, I am creating an overlay on a image. Is it ok to write on this overlay in html or it is better to have the text not on a image for google and other search engines ? Thank you,
Intermediate & Advanced SEO | | seoanalytics0 -
Responsive Content
At the moment we are thinking about switching to another CMS. We are discussing the use of responsive content.Our developer states that the technique uses hidden content. That is sort of cloaking. At the moment I'm searching for good information or tests with this technique but I can't find anything solid. Do you have some experience with responsive content and is it cloaking? Referring to good articles is also a plus. Looking forward to your answers!
Intermediate & Advanced SEO | | Maxaro.nl0 -
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 -
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 -
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 -
Is white text on a white background an issue when...?
Hi guys, This question was loosely answered here (http://www.seomoz.org/q/will-google-index-a-site-with-white-text-will-it-give-it-bad-ratings), but I wanted to elaborate on the concern. The issue I have is this, http://www.searchenginexperts.com.au/preview/white-text-white-background-issue Of the four div elements on the page, which; is best practice for SEO? and which of them would not be penalized by google on the grounds of hidden text? The reason I ask is that I have a site that is currently implementing the first div styling, but if you either remove the image OR uncheck the repeat-x (in inspect element) the text is left as white on white. I have added the transparent image on green to prove that having a background colour to back up the tiled image is not always going to work. What can be done in this scenario? Thanks in advance, Dan (From my managers account)
Intermediate & Advanced SEO | | RuchirP0 -
The Affects of Removing Anchor Texts from Super Menu on Homepage
Hi, Currently we have a div that drops down our super menu which has subcategories, ie. under Shop by Color (super menu) Black Ties, Blue Ties, Brown Ties, et, al. (see Ties.com Anchor Text image attached) If we were to remove these subcategories from the div (in other words, they do not get crawled from homepage, will we loose ranking for those keywords? We are trying to reduce link count on homepage. Thoughts? UBHu8.png
Intermediate & Advanced SEO | | Ties.com0 -
Does title text of homepage effect ranking of sub pages?
Question is pretty much summed up in the title. I realize that title text on a specific page can effect the ranking of that page. But what I'm getting a feeling of lately is that google uses the title text of your homepage to effect the ranking of the site on a whole. Thoughts?
Intermediate & Advanced SEO | | adriandg1
