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
-
Shall I hide short product review texts from customers (to avoid google panda/quality issues)?
About 30% of product reviews that the clients of our ecommerce store submitted in the last 10 years are 3 words or less (we did not require any minimum length). Would you recommend to hide those very short review texts? Where to draw the limit?
Intermediate & Advanced SEO | | lcourse
Numeric star rating would still go into our accumulated product rating. My only concern here is what impact it may have on google ranking.
To give some context, the site has for a long time some panda/phantom related issues where there are no obvious reasons that we could point to.0 -
Redirecting M Dot Mobile Website to Responsive Design Website Questions
Hi amazing Moz community 🙂 Couldn't find this question anywhere, and knew this was the place to ask! We are helping a client redirect an M Dot website to a Responsive Design website. We want to retain our mobile rankings for keywords. Three questions - We should use 301 redirects from the M Dot website to the new website correct? (not 302s?) How long does it take for Google to understand that we have launched a responsive website? Can we remove the 301 redirects after a few days (if the M Dot website interferes/breaks the new Responsive website)? We have verified an account on Google Search Console for the M Dot website, along with a mobile sitemap that has been submitted and verified. What should we do with this M Dot GSC account? Just delete it? Or keep it and upload the NEW XML Sitemap with the new WWW links (because the website is responsive). THANK YOU!
Intermediate & Advanced SEO | | accpar0 -
Anyways to pull anchor text?
Hi guys, So basically i have a list of URLs/Domains and there backlinks (example: http://s29.postimg.org/ujxm0c4lj/screenshot_677.jpg) but i'm missing anchor text. Can anyone recommend any tools which can scan a backlink, locate the URL/Domain on the page and then pull the anchor text? Cheers, Chris <colgroup><col width="548"><col width="884"></colgroup>
Intermediate & Advanced SEO | | jayoliverwright
| | |1 -
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 -
How fast to change keyword rich anchor text
Hello, A client of mine has a site with almost all keyword rich anchor text, The problem is on on a bunch of little blogs and some (mostly sitewide) paid links. We are working to move into 100% white hat SEO, but we're doing it slowly. My question is, how fast can we change the anchor text on all of these links? I'm worried that if I do it too fast that it will be a red flag. Thanks.
Intermediate & Advanced SEO | | BobGW0 -
Can use of the id attribute to anchor t text down a page cause page duplication issues?
I am producing a long glossary of terms and want to make it easier to jump down to various terms. I am using the<a id="anchor-text" ="" attribute="" so="" am="" appending="" #anchor-text="" to="" a="" url="" reach="" the="" correct="" spot<="" p=""></a> <a id="anchor-text" ="" attribute="" so="" am="" appending="" #anchor-text="" to="" a="" url="" reach="" the="" correct="" spot<="" p="">Does anyone know whether Google will pick this up as separate duplicate pages?</a> <a id="anchor-text" ="" attribute="" so="" am="" appending="" #anchor-text="" to="" a="" url="" reach="" the="" correct="" spot<="" p="">If so any ideas on what I can do? Apart from not do it to start with? I am thinking 301s won't work as I want the URL to work. And rel=canonical won't work as there is no actual page code to add it to. Many thanks for your help Wendy</a>
Intermediate & Advanced SEO | | Chammy0 -
Internal Anchor Text Penalty Clarification
I believe we may be seeing the initial stages of a penalty for over-using internal anchor text on our ecommerce site. Per Rand and other training, we added related product links and popular category links to our product and category pages. At the time, we did not have an html sitemap in the footer. We're a small to medium sized site with 1,700+ products. We have since added an html sitemap of our categories to our footer. Now we have category links in the sitemap and category pages and product pages with targeted anchor text. I'm beginning to see downward movement on some of those targeted categories. If I have an html sitemap in the footer (category index) should I get rid of the popular category links throughout the rest of the site? Also, with more frequency, I'm seeing a "product index" and "category index" in footers. Is this a best practice? Thanks.
Intermediate & Advanced SEO | | AWCthreads0 -
Convert keyword rich PDFs to web pages (text & images)
SteriPEN is a portable water purifier that kills viruses, protozoa, e-coli, etc. Because of the technical and safety requirements nature of the product, our website has much documentation of testing, organisms affected, and more. These are in pdf form and can often be found through google search (and through links on specific pages). Because of the keyword-richness of these documents pertaining to microbes SteriPEN kills, etc. does it make sense to convert these pdf's into html text and images? Then I was thinking perhaps writing a blog post AND generating key links on important landing pages to these documents (as html). Removing pdfs may be harmful? Not a clue as to the cost/benefit.
Intermediate & Advanced SEO | | Timmmmy0