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
-
Worth Modifying Code to Have Text Appear Near Top
Our site uses Wordpress. The code is somewhat heavy. The text to code ratio for the home page is only 16%. Our developer suggests that we modify the code so that the important text appears at the top of the page (without changing the design) so that Google can index it more easily. My developer feels this would be more beneficial for SEO. He believes that reducing the code would create HTML errors. The home page is www.nyc-officespace-leader.com Is this approach sound? My developer describes it in the following manner: | Let me say that I don’t believe the text to code ratio has a significant impact on SEO per se but of course that reducing code, it will reduce page weight therefore it may help to improve ranking. See Homepage for example, this is the top landing page of your site, therefore it is very relevant to optimize. You can see the first block, from attached it has very little content and too many code. There is almost nothing to do about it, visually that is a very good block, in terms of SEO it isn't. I do not recommend to take it off just for SEO, that will make all pages with lot of text, lack of images and people may go away. On the other hand, most of the cases we want to improve text code ratio, there is an impact on unexpected BUGs because the code is being changed and this may affect functionality. I would suggest to spend time on improve the sort-order of the important content inside the code, so we may have similar text code ratio at the end but the important code we need Google to index will be at the very top in the source code, in terms of a very technical approach Google will find the key content faster and that should help to improve the crawling process as search engines read HTML code linearly. This change do not necessarily will affect the HTML, we can achieve it by using style sheet (CSS code) instead, reducing the chance of major BUGs. Either is our choice, we need to evaluate potential problems, code issues and content impact and also we need to apply changes and wait at least 3-4 weeks to start seeing results. It is a long task. Let me know your thought about this, we will estimate a task to improve code without affect web design |
Intermediate & Advanced SEO | | Kingalan10 -
Link Anchor Text - Best Practice?
Moz - Open Site Explorer using the following setup: Tab: Inbound Links
Intermediate & Advanced SEO | | Mark_Ch
Show: "all"
from: "Only Internal" I have run a number of random tests and have noticed the following results in the link anchor text. [No Anchor Text]
company name
website url
Home
etc. What is the best practice and naming convention to be used? Regards Mark0 -
Does hiding responsive design elements on smaller media types impact Google's mobile crawler?
I have a responsive site and we hide elements on smaller media types. For example, we have an extensive sitemap in the footer on desktop, but when you shrink the viewport to mobile we don't show the footer. Does this practice make Google's mobile bot crawler much less efficient and therefore impact our mobile search rankings?
Intermediate & Advanced SEO | | jcgoodrich1 -
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 -
Improve Response Rate
Hi fellow Mozzers, I have recently been trying to earn new links for my company websites by appealing to local public libraries that line up with our geographic footprint. We have store locations in 569 city, state combinations, so I am finding the local library for each city, state and asking them to add us to their website as a community reference for child care. Here is my pitch email that I am sending out.... Hi There, _ I hope this email finds you in good health and good spirits. _ My name is XXXXX and I represent <insert company="" name="">. I am reaching out to local libraries in the cities and counties where our schools are located in an effort to request local support for our schools. Many libraries across the country have reached out to us asking for parent resources and child care options in their local city. I would like to extend the same value to you.</insert> _ I would love to have our school in <insert city="" name="">be considered for placement on your public library site found at <insert target="" website="" url="">. With ample parent resources and child related materials, our school would be a great fit for your local community. We have many great parenting articles, blogs and local child care options in <insert city="" name="">.</insert></insert></insert>_ Our local school website can be found at : Our parent resource section can be found at: Who do you suggest I speak with regarding earning a placement on your site? Any information would be greatly appreciated. So far I have a response rate of about 1% and of those that do respond, none are willing to add a link on their site in any capacity since our company is privately held and not a public school option. Can anyone suggest either a better way to approach link earning on a city by city basis or help me improve my current initial email to get a better response? I really appreciate it! p.s.... some of my other link targets are city run websites, local chamber of commerce chapters (suspect this will be hard since most require a paid membership), local public school sites, and keyword targeted lists such as "child care in phoenix, az" to see what sites come for each term. Advice on these and anything I may be missing would be of great value.
Intermediate & Advanced SEO | | dsinger0 -
Hidden text that's not show in default view, does it hurt my on page optimization?
Hello, I am developing our new site that will create tabs such as "design", "tech specs", "customer ratings" etc. just like http://www.dell.com/us/p/inspiron-15z-5523/pd. My question is, if most of my content is on the 2nd and 3rd tabs, would my content effect my overall SEO if it's not on it's default view? Because, if users don't physically click on the 2nd and 3rd tab, does it mean that since there is no impression of that content, that content will be allocated to half of its SEO juice? Let me know, I would love to know! Shawn
Intermediate & Advanced SEO | | Shawn1241 -
How to get around Google Removal tool not removing redirected and 404 pages? Or if you don't know the anchor text?
Hello! I can’t get squat for an answer in GWT forums. Should have brought this problem here first… The Google Removal Tool doesn't work when the original page you're trying to get recached redirects to another site. Google still reads the site as being okay, so there is no way for me to get the cache reset since I don't what text was previously on the page. For example: This: | http://0creditbalancetransfer.com/article375451_influencial_search_results_for_.htm | Redirects to this: http://abacusmortgageloans.com/GuaranteedPersonaLoanCKBK.htm?hop=duc01996 I don't even know what was on the first page. And when it redirects, I have no way of telling Google to recache the page. It's almost as if the site got deindexed, and they put in a redirect. Then there is crap like this: http://aniga.x90x.net/index.php?q=Recuperacion+Discos+Fujitsu+www.articulo.org/articulo/182/recuperacion_de_disco_duro_recuperar_datos_discos_duros_ii.html No links to my site are on there, yet Google's indexed links say that the page is linking to me. It isn't, but because I don't know HOW the page changed text-wise, I can't get the page recached. The tool also doesn't work when a page 404s. Google still reads the page as being active, but it isn't. What are my options? I literally have hundreds of such URLs. Thanks!
Intermediate & Advanced SEO | | SeanGodier0 -
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