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
-
Least Text for Home Page
We are rebranding our web site and intend to create more visual pages with less text on the assumption that no one want to read anymore. What is the least amount of text that we can include in a home page without damaging out ability to rank on Google? Google recently increased the permitted amount of text on description tags. Can we shift text to the description tax and place more on ALT tags that are not immediately visible to visitors. Any thoughts, comments, advice?? I am adding image of the old home page and new home page (text to be written, 3 columns of dummy text) so the change in the amount of text is visible. Thanks,
Intermediate & Advanced SEO | | Kingalan1
Alan GkvnNR8 UH9ptbh0 -
Moving from M. to Responsive: Rel Alternate Considerations
Hey Guys, We’re in the process of transitioning our key traffic generating pages on our website from m. to responsive. Today, our site uses Google’s ‘Separate URLs’ method. Rel alternate on desktop pages to m. pages 302 redirects pushing mobile visitors to m. pages Canonical on m. pages back to desktop pages As we make the transition to responsive we’ll be taking the following steps: Removal of 302 redirects pushing mobile visitors to m. pages 301 redirects from m. pages to desktop pages With those changes in mind, I’d love to get the communities opinion on how to best handle the real alternate attribute on desktop pages. I'm considering leaving the rel alternate attribute in place on desktop pages for 30-90 days so that search engines continue to see the alternate version without the 302 redirects in place, crawl it, and as a result discover the 301 redirects more readily. If we remove the 302 redirects as well as the rel alternate, then my feeling is that search engines would just index the responsive page accordingly and be less likely to catch the 301 redirects pointing from the m. pages and make the transition of mobile pages in search indices take longer than necessary. Ultimately, I'm probably splitting hairs and getting a bit nuanced because I believe things will work themselves out whether we leave the rel alternate or remove it but I thought it would be great to get any opinions or thoughts from community members that have made a similar transition. Thanks in advance for stopping by and providing your thoughts. All the best,
Intermediate & Advanced SEO | | TakeLessons
Jon PS - for your reference, the only mention that I was able to dig up in Q&A for a move from m. to responsive are the following: Redirecting M Dot Mobile Website to Responsive Design Website Questions SEO Concerns From Moving Mobile M Dot site to Responsive Version?0 -
SEO impact of mouse over text on product page
Hi, we recently improved our product page to show more color options, like this http://www.prams.net/knorr-baby-voletto-sport-pram-stroller-reversible-seat-green-a?inref=home-left In order to improve the seo, we expanded our rich snippets the following way we added all color options, skus and prices as "items offered" we are showing the highest and lowest price range and eliminated the base price https://developers.google.com/structured-data/testing-tool/ Google now shows the price range in the rich snippet. The questions is: as the user see the original color, the price and the sku only when mousing over the small images. We are worried that this could be treated a "hidden text". Does anybody have experience in this matter or a way a to solve it better? Thanks in advance Dieter 8WthtQY
Intermediate & Advanced SEO | | Storesco0 -
Making unresponsive site responsive, should I expect any ranking penalties?
Hello, I have a website made with asp.net and ranking quite well for a number of competitive keywords like in google top 10 results for more than a dozen competitive keywords. Recently in order for better user experience, I am having it developed so it is fully responsive for all screen resolutions. Basically all the design element / site text will remain the same including color scheme / layout etc outwardly but internally this will change everything all the css / page html (tables converted to divs) etc. Now my question is: 1. Will this considered by bots a complete site overhaul and ranking will take a hit even if I stay with current platform i.e. asp.net? 2. While making design responsive I can also develop a wordpress theme, which will make it easier to work with the website as the site does not require any programming. So if I also change the platform like from MS IIS/asp to Apache / php how will search engine bots take this? 3. If above in fact will result in ranking drop, how much time will it take for the rankings to get back to normal? Note that I use extensionless urls so the urls will remain the same as well even if we convert from asp to php. Sorry for long details but question is bugging me from weeks.
Intermediate & Advanced SEO | | hpk0 -
Does Google read bullet point lists are text? WordPress SEO by Yoast says different...
I am using the WordPress SEO plugin by Yoast. They have a site analysis, once you enter a keyword for optimize it for. Now I found that this plugin doesn't count in the text from bullet point (or numbered lists) as text. Now that made me curios...Does Google see bullet points text as text or not?
Intermediate & Advanced SEO | | soralsokal0 -
Internal Anchor Text - Partial or Exact Match Does It Matter?
When linking internally on an ecommerce site between pages and from a sitemap, is partial or exact match on the anchor text a significant factor? If it matters to Google, which is a better practice to use? I found plenty of info on external links, but precious little on internal links (which suggests it doesn't matter enough to worry about).
Intermediate & Advanced SEO | | AWCthreads0 -
When doing email blogger outreach what response rate do you expect?
How many emails do you send in the average outreach campaign? How many links would you expect from that? Also - when doing email blogger outreach do you need to offer the blogger something other than (great) content, in order to get a link? (maybe cash, or a link back?) I'm doing email blogger outreach for a number of clients and types of content, but am finding it hard to get links from bloggers. Any help is appreaciated! Thanks
Intermediate & Advanced SEO | | kevinmorley0 -
Ideal number of Anchor text keyword variations
Let's suppose that I want to rank for the keyword "hotels". If I put this keyword in ALL of the link anchor texts then Google will very likely penalize the site. My question is: How many keyword variations should I use in anchors (provided I want to rank for just one KW i.e. "hotels")? Would one keyword variation be okay and is it fine to use main keyword in 80% anchors and the keyword variation(s) in just 20% anchor texts, such as : hotels 80% cheap hotels 20% Note: I do not want to rank for "cheap hotels", just want to use it as an anchor variation of my desired keyword "hotels". Thanks!
Intermediate & Advanced SEO | | RightDirection0