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
-
Alternative text vs Image title attribute
Hi there. Anyone know how important Image title attribute is ? Moz is bringing it up saying make sure my images are all title attributed as well as alternative texted but no wedding photographers mention it in SEO posts or blogs. Click on wedding photographers blogs and most don't seem to have it (Image title attribute) either but I don't want to miss anything out that I need to be doing as I am building a new site and if it needs to be done now I have the time to do it. Any advice is appreciated thank you people x
Intermediate & Advanced SEO | | Howelljones0 -
One click links, followed ? anchor text ?
Hello, Just wondering google follows on clicks links (links create in a nice button) and anchor text. Thank you,
Intermediate & Advanced SEO | | seoanalytics0 -
Is the flow of page rank through anchor text links diminished if hidden using tabs
Hi there, Whilst there is plenty of information online regarding the devaluation of hidden content using tabs, it seems to be more difficult to get a clear answer as to how page rank is impacted when anchor text links are hidden. If an anchor text link is hidden using tabs, will the flow of page rank to the page the anchor text leads to be negatively impacted? If so, why? To add further context, whilst the anchor text link would be visible in the HTML, the tab would be dependant on JavaScript to function. Thanks,
Intermediate & Advanced SEO | | SEONOW1230 -
Text to Code Ratio & SEO
Hi Has anyone had experience of updating their text to code ratio if its too high & whether this has much impact on SEO performance? I am trying to prioritise tasks & wondered if this is something which should be higher on my list. Thank you 🙂
Intermediate & Advanced SEO | | BeckyKey0 -
Combining images with text as anchor text
Hello everyone, I am working to create sub-category pages on our website virtualsheetmusic.com, and I'd like to have your thoughts on using a combination of images and text as anchor text in order to maximize keyword relevancy. Here is an example (I'll keep it simple): Let's take our violin sheet music main category page located at /violin/, which includes the following sub-categories: Christmas Classical Traditional So, the idea is to list the above sub-categories as links on the main violin sheet music page, and if we had to use simple text links, that would be something like: Christmas
Intermediate & Advanced SEO | | fablau
Classical
Traditional Now, since what we really would like to target are keywords like: "christmas violin sheet music" "classical violin sheet music" "traditional violin sheet music" I would be tempted to make the above links as follows: Christmas violin sheet music
Classical violin sheet music
Traditional violin sheet music But I am sure that would be too much overwhelming for the users, even if the best CSS design were applied to it. So, my idea would be to combine images with text, in a way to put those long-tail keywords inside the image ALT tag, so to have links like these: Christmas
Classical
Traditional That would allow a much easier way to work the UI , and at the same time keep relevancy for each link. I have seen some of our competitors doing that and they have top-notch results on the SEs. My questions are: 1. Do you see any negative effect of doing this kind of links from the SEO standpoint? 2. Would you suggest any better way to accomplish what I am trying to do? I am eager to know your thoughts about this. Thank you in advance to anyone!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 -
ALT Tag Labels that Use Near Duplicate Text-SEO No, No???
Greetings Moz Community: About 280 pages of my 650 page commercial real estate website are listing pages. Each listing page contains between two and five photos, each with a corresponding ALT tag. My developer has set up the labeling of the ALT tags in the following manner. I can create a label for the first photo, but each subsequent photo automatically gets the same label plus a number tagged to the ALT. Like this: alt="Flatiron Loft for Rent"
Intermediate & Advanced SEO | | Kingalan1
alt="Flatiron Loft for Rent - Photo 0"
alt="Flatiron Loft for Rent - Photo 1"
alt="Flatiron Loft for Rent - Photo 2"
alt="Flatiron Loft for Rent - Photo 3" Is this method neutral, positive or negative for SEO? I am concerned that this manner of labeling ALT tags might risk triggering a duplicate content penalty. In early July I migrated the site from Drupal to Wordpress. We changed the URL structure (adding a sub-directory) for the listings at that time. Google is refusing to index about 100 listing pages. Any chance the ALT tags are contributing to Google's reluctance to index the URLs? I might also add that images are hosted on Amazon's CDN. A sample listing URL is http://www.nyc-officespace-leader.com/listings/278-21st-street-flatiron-loft-for-rent
Note: (/listings/278) were added to the URL in July, representing the listing sub directory plus the listing number. I Look forward to hearing the opinion of the MOZ community!!! THANKS!!!
Alan1 -
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