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
-
Best anchor text strategy for embeddable content
Hi all We provide online services, and as part of this we provide our clients with a javascript embeddable 'widget' to place on their website. This is fairyly popular (100s-1000s of inserts on websites). The main workings of this are javascript (they spit html iframe onto the page) but we also include both a <noscript>portion (which is purely customer focused, it deep links into a relevant page on our website for the user to follow) and also a plain <p><a href=''></a></p> at the bottom, under the JS. This is all generated and inserted by the website owner. Therefore, after insertion we can dynamically update whatever the Javascript renders out, but the <noscript> and <a> at the bottom are there forever.</p> <p>Previously, this last plain link has been used for optimisation, with it randomly selecting 1 out of a bank of 3 different link anchor texts when the widget html is first generated.</p> <p>We've also recently split our website into B2B and B2C portions, so this will be linking to a newer domain with much established backlinks than the existing domain. I think we could get away with optimised keyword links on the old domain but the newer domain they will be more obvious.</p> <p>In light of recent G updates, we're afraid this may look spammy. We obviously want to utilise the link as best as possible, as it is used by hundreds of our clients, but don't want it to cause any issues. </p> <p>So my question, would you just focus on using brand name anchor text for this? Or could we mix it up with a few keyword optimised links also? If so, what sort of ratio would you suggest?</p> <p>Many thanks</p></noscript>
Intermediate & Advanced SEO | | benseb0 -
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 -
Novice Question - Can Browsers realistically distinguish words within concatenated strings e.g. text55fun or should one use text-55-fun? What about foreign languages especially more obscure ones like Finnish which Google Translate often miss-translates?
I am attempting to understand what is realistically possible within Google, Yahoo and Bing as they search websites for KeyWords. Technically my understanding is that they should be able to distinguish common words within concatenated strings, although there can be confusion between word boundaries when ambiguity is involved. So in the simple example of text55fun, do search engines actually distinguish text, 55 and fun separately? There are practical processing, databased and algorithm limitations that might turn a technically possible solution into a unrealistic one at a commercial scale. What about more ambiguous strings like stringsstrummingstrongly would that be parsed as string s strummings trongly or strings strummings trongly or strings strumming strongly? Does one need to use dashes or underscores to make it unambiguous to the search engine? My guess is that the engine would recognize the dash or space and better understand the word boundaries yet ignore the dash or underscore from an overall concatenated string perspective. Thanks in advance to whoever can provide any insight to an old coder who is new to this field.
Intermediate & Advanced SEO | | ny600 -
Will aggressive use of branded keywords in anchor text attract Penguin’s wrath?
I'm working on a site for a serviced apartment site http://www.alcove.co.in/ which offers apartments in 9 cities in India. Site was ranking in 1st page of Google for “serviced apartment + city” for 7 cities until sometime in Jan 2013. However organic traffic has been gradually falling since sometime in September 2012 (40% fall this month over same period last year). There’s been no sudden fall in traffic which we may link with any Penguin update. There have been no warning messages in Google WMT. Even today the site ranks in 1st page for 3 cities; however ‘Serviced apartments bangalore’ which was the biggest revenue earner, is not ranked in first 5 pages. My questions are whether will aggressive use of branded keywords in anchor text will attract Penguin’s wrath, does Google makes allowance for case when company's name includes keywords. In our case, company name is Alcove Service apartments, could there be some other reason for fall in ranking/traffic? The distribution of anchors (external links, multiple links from same domain are counted) is : percent
Intermediate & Advanced SEO | | anand53
Keywords 34%
brand+keywords 43%
Natural 4%
only brand 11%
URL 7% For the above, Brand = ‘Alcove Service apartments’ or ‘Alcove Serviced apartments’ brand+keywords = various combinations of ‘alcove’ + [‘guest houses’ or ‘hotels’ or ‘accommodation’] + city1 + city2… Intriguingly, Open Site Explorer analysis of domain metrics (Domain Authority, Followed Linking Root Domains, etc) ranks Alcove higher than all but one site appearing in 1st page of Google for ‘Serviced apartments bangalore’. Most of alcove’s links are from article directories (no spun articles were used), directories and link exchanges with relevant sites. Any suggestions and guidance on what we could do to remedy the situation would be greatly appreciated! Thanks0 -
Links in body text
From a purely SEO /link juice perspective, is there any benefit to linking from body text to a page that is in a pervasive primary navigation? The primary nav puts a link at the top of the HTML. With the tests done by members of this site, the "first link counts" rule negates the link juice value of a link in the body text if there is already a link in the nav. Now I've also seen the data on using hash tags to get a second or third link, but ignoring that, it would seem that links in the body text to pages in the nav have zero effect. This brings me to another question - block level navigation. If anchor text links pass more juice than links in the top navigation, why would you put your most coveted target pages in the top nav? You would be better off building links in the content, which would create a poor user experience. To me, the theory that anchor text links in the body pass more juice than links in the primary nav doesn't make any sense. Can someone please explain this to me?
Intermediate & Advanced SEO | | CsmBill0 -
Anchor Text Usage
Hi, I have used anchor text more heavily. I built over 80 links so far, all are quality links like press releases & social bookmarks. I used to be ranking on #7 page for my keywords, then all of sudden i am not even on 50th page. Is this is because of Anchor text usage? Now should i remove those links or dilute my anchor texts by getting more links with different anchor texts. This is because the keyword i am targetting is pretty tough. So i think 80 links is not good enough. Let me know your thoughts. Here is the screenshot of the links i got so far which i think valuable. And the rest are social bookmarks. http://screencast.com/t/TJiDOanxnfZ
Intermediate & Advanced SEO | | Vegitt0 -
Link Anchor Text
As I keep studing SEO I reach to the conclusion that the Anchor Text from other site is crucial to get more positive results for our website and for the link-building strategy. My question is - Is it better to have an Anchor Text to my main link our should I ask for a determine targeted keyword? Tks in advance! Pedro M Pereira
Intermediate & Advanced SEO | | PedroM0 -
Link anchor text: only useful for pages linked to directly or distributed across site?
As a SEO I understand that link anchor text for the focus keyword on the page linked to is very important, but I have a question which I can not find the answer to in any books or blogs, namely: does inbound anchor text 'carry over' to other pages in your site, like linkjuice? For instance, if I have a homepage focusing on keyword X and a subpage (with internal links to it) focusing on keyword Y. Does is then help to link to the homepage with keyword Y anchor texts? Will this keyword thematically 'flow through' the internal link structure and help the subpage's ranking? In a broader sense: will a diverse link anchor text profile to your homepage help all other pages in your domain rank thematically? Or is link anchor text just useful for the direct page that is linked to? All views and experiences are welcome! Kind regards, Joost van Vught
Intermediate & Advanced SEO | | JoostvanVught0