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
-
More than 20 % of exact match anchor text... can it be the reason ?
How do I know if i got it by penguin because my external anchor text is over optimised ? I have 80 external links and 22 of those are exact match, could it be the reason why I went from ranking 1 st for years on a keyword to ranking on 2 nd page for about a year now... Do you recommend trying to get new links or asking to change the existing one... I read that google doesn't treat links the same way if you change the anchor text, is it really the case ? For internal links should I also worry about exact match percentage or not ? is it better to have exact match internally or not ? PS : I redid my website in the meantime so it is hard to say where the issue is coming from. Thank you,
Intermediate & Advanced SEO | | seoanalytics0 -
Adding some unique text to search
I do not know how to easily explain that but I will try 🙂 We are running the yellow pages in our country, where most (all) of the companies are listed. Each company has their keywords that are used in our search. All of those search keywords are indexed by Google and it goes something like that domain.com/search/keyword So far this page only lists the companies that match the search query. So that's not much content. I'm thinking about adding a sentence that would go something like this:
Intermediate & Advanced SEO | | FCRMediaLietuva
The search query lists the companies of our country that do KEYWORD. So far COUNT was found. That seems pretty short and I am not sure if that does a lot of help for Google. But I cannot think of more text. Any ideas? Or should I give up on the idea of adding anything at all?0 -
Optimum Word Count for Home Page Text
We operate a commercial real estate web site (www.nyc-officespace-leader.com) in New York City. Our home page text is about 500 words. Currently the home page text is of a promotional nature and not very engaging. We are attempting to write a check list for companies that are seeking to lease commercial space and make the text very useful, practical and engaging. However we are having difficulty covering all the bases with less than 1,000 words. If the home page text has 1,000-1,300 words is that detrimental from an SEO point of view? On the plus side I would think this would allow us to include several secondary keyword terms and to add plurals and variations of the two or three top phrases. Any thoughts or suggestions? Thanks, Alan Rosinsky
Intermediate & Advanced SEO | | Kingalan10 -
Directory Listings with anchor text = Should we just Delete them all?
Hi Dr Moz'ers So our ex-contracted SEO "experts" have a enlisted our website to 40 odd directories with the same key word and copy. Is it best to just delete them all to avoid a possible negative SEO/Google outcome? Cheers
Intermediate & Advanced SEO | | supps0 -
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 -
What is the meaning of anchor text penalty?
If i have 70% back links with same anchor text, will i get penalized? some of my blog's pages which were previously in top 100 in google are no where now. but for other long tail keywords, m still in same position. How to get rid of this penalty? Should i create more links with different anchor text to reduce the effect or should i remove that 70% back links?
Intermediate & Advanced SEO | | web2smspk0 -
Hiding Text in an SEO friendly way - is it possible?
Hello, I have a client who has very little (practically no) text content on his ecommerce website, on the home page and category / sub cat pages. We have drafted some text for him - but the designer has fought back against this as he feels it will break the design. Our proposed solution is to have some text visible - and the rest will be text that is hidden but can be revealed by clicking Read More. We are planning to follow these recommendations : http://www.shimonsandler.com/collapsible-div-seo-friendly/ We are not hiding text for the sake of it - but more to improve the UX. We of course want the text to be accessible - i.e. readable by screen readers. Does anyone have any experience or opinions in respect to taking this course of action, and is there anything we should make sure we either do or not do to stay on the side of the BIG G? Kind Regs, Rich
Intermediate & Advanced SEO | | RichBestSEO1 -
Image Links Vs. Text Links, Questions About PR & Anchor Text Value
I am searching for testing results to find out the value of text links versus image links with alt text. Do any of you have testing results that can answer or discuss these questions? If 2 separate pages on the same domain were to have the same Page Authority, same amount of internal and external links and virtually carry the same strength and the location of the image or text link is in the same spot on both pages, in the middle of the body within paragraphs. Would an image link with alt text pass the same amount of Page Authority and PR as a text link? Would an image link with alt text pass the same amount of textual value as a text link? For example, if the alt text on the image on one page said "nike shoes" and the text link on the other page said "nike shoes" would both pass the same value to drive up the rankings of the page for "nike shoes"? Would a link wrapped around an image and text phrase be better than creating 2 links, one around the image and one around the text pointing to the same page? The following questions have to do with when you have an image and text link on a page right next to each other, like when you link a compelling graphic image to a category page and then list a text link underneath it to pass text link value to the linked-to page. If the image link displays before the text link pointing to a page, would first link priority use the alt text and not even apply the anchor text phrase to the linked page? Would it be best to link the image and text phrase together pointing to the product page to decrease the link count on the page, thus allowing for more page rank and page authority to pass to other pages that are being linked to on the page? And would this also pass anchor text value to the link-to page since the link would include an image and text? I know that the questions sound a bit repetitive, so please let me know if you need any further clarification. I'd like to solve these to further look into ways to improve some user experience aspects while optimizing the link strength on each page at the same time. Thanks!
Intermediate & Advanced SEO | | abernhardt
Andrew0