Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I can hide content by using display:none; in css. But I read on many websites that Google doesn't like display:none;. I really need this because of jQuery animations.
Now I found new method for hiding content through Javascript/jQuery.
$(this).css({display:'none'});
Is this better than display:none;. Is this Google Friendly?
Here is fiddle
Google has guidelines that you can follow to make your site safe to be crawled:
https://support.google.com/webmasters/answer/35769
Be aware that the Google bot does understand and execute basic JavaScript on web pages now to see what results a user would actually get to see:
https://support.google.com/webmasters/answer/81766?hl=en
Here's a snippet about hidden text or links: https://support.google.com/webmasters/answer/66353
Hiding text or links in your content to manipulate Google’s search
rankings can be seen as deceptive and is a violation of Google’s
Webmaster Guidelines. Text (such as excessive keywords) can be
hidden in several ways, including:
Using white text on a white background Locating text behind an image
Using CSS to position text off-screen Setting the font size to 0
Hiding a link by only linking one small character—for example, a hyphen in the middle of a paragraph
The main issue to me is that if you hide it in the css and then use javascript to show it, visitors without javascript enabled will not be able to view the content. Using $(this).css({display:'none'}); to hide the content will ensure that it will display by default for those without javascript enabled.
This issue comes up often in trying to avoid a flash of unstyled content. Good discussion and solutions provide at http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content
Using CSS display:none is perfectly fine for google. The JS way won't offer you any benefits, SEO-wise.
Here's one example: http://seotesttool.com/blog/does-the-google-bot-index-css-hidden-divs/
However, the problem arises if you hide content (by either of these methods) that is solely for the purpose of tricking google... keyword stuffing, spammy links, etc. Then you are likely to get penalized and removed from Google's index all together, and you will have to go through a manual process to fix your site and wait for it to be verified and re-added. So as long as you are not planning this sort of scheme, and you're just doing a normal hide/show of user-friendly content, you will be fine.
From what I've heard, content within a display: none; block does not get read by search spiders and screen readers. If you use javascript to hide it (even via .css() or .hide() methods) you'll be hiding it after the spiders have crawled the page.
The downside is that there also may be a flash before the js loads where you can see the hidden content. Try using the .visuallyhidden convention if you want computers to read through your content.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I've been working on an Admin interface for a desktop-first web application. There will be an iOS application for mobile users and if we need browser support on mobile, a mobile-first UI will likely be designed. I've only been working with CSS/JS/HTML for about 30-days, so please forgive any mistakes I make.
to get rolling, I started using Bootstrap, however, I ran into a number of issues and decided to abandon it. I do not require responsiveness in the traditional sense of a grid system and fine tuning my design using a grid model was truly painful.
I discovered on my journey that using #Media, I could adjust the CSS for various elements based on screen resolution and even go so far as to remove an element using width="0" and introduce a new element by turning it's width on. I'm using flexbox for my layout, which I find to be incredibly effective to work with and provides me with solid control over the presentation of my UI.
I plan to eventually convert my admin into a EmberJS app, which give me even more control over when and how elements are displayed.
Although I'm still learning, I've found resources like w2schools.com to be very helpful in adding elements like a sidebar using plain JS and CSS. This keeps my application simple and easy to follow, rather than having to work with a monolith framework.
My question is, is it acceptable to adjust your design based screen size and add and remove elements using a width="0" as the toggle or is there a better way? Also, is it acceptable to adjust your layout overall using #Media versus a grid?
I'd like to eventually turn my app into a native Windows app using Electron so I'd like to not make any bad choices that will cause me problems later.
Thank you for your help.
is it acceptable to adjust your design based screen size and add and
remove elements using a width="0" as the toggle or is there a better
way
there is a better way:
use css display: none property to hide and show elements but this also removes the space occupied by elements.
If you just need to set visibility off then use visibility: hidden
is it acceptable to adjust your layout overall using #Media versus a grid
yes its fine to use #media queries. But using bootstrap grid system is pretty easy and it can also handle cross browser issues which otherwise you would have to handle manually.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
So I have created a layout for polymer that could be used as a general site layout. Which in the processes I created 2 custom elements, which are available via git hub.
The problem I am having is the CSS cannot be set for sub components.
I am thinking that is a browser issue but I am trying to verify. It works perfectly in Chrome (of course).
But in Firefox and IE the main header does not change.
Then there are other various differences. For example in IE if you open the search none of the drop down options appear until you click on it. In FireFox when you open the search the layout is off.
To view it you can goto
This is the default/original layout just something for a starting point.
http://trutekinnovations.com/
This is a dark theme I am working on and how you can see the issue
http://trutekinnovations.com/jbtheme.html
This is actually for a couple of personal projects I am hoping to launch within 6 months to a year. I know polymer is not production ready but I am betting the farm per say that it will be by that time.
Does anyone have any suggestions. I tried turning the CSS into variables in the component but that did not work.
I was about to try pulling out the CSS and then seeing if I Could make it external and have the CSS url be a variable that defaulted to a local version.
That is what I will probably try tomorrow. The problem is I understand this is new and instead of doing what I have done in the past on new emerging technology (which is beat my head against the wall till I get it to work) I want to actually try using the community.
Plus I hope people check out my components and help me improve them. Thanks for any tips/suggestions.
Well, I was able to solve my own issue using the method I suggested about dynamically loading CSS.
I found the following site:
http://japhr.blogspot.com/2014/06/dynamically-adding-external-styles-to.html
Which I was then able to use that code to modify it so I can load a base CSS class and then load a custom theme, or multiple custom CSS. Technically I can pull out colors and have it dynamically load the base css, and then load a default theme. Which is probably what I will add next.
To see the code you can view the github
https://github.com/tikicoder/trutek-header-panel-drawer
To view the demos:
http://trutekinnovations.com/
http://trutekinnovations.com/jbtheme.html
It would have been nice if I could have done it using something like
I did try that but it did not pull the variable. I could do that in the style tag and pass custom CSS, but it only worked in Chrome.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Im trying to get a sense for proper web development techniques , and im wondering if there are any habits i should be developing outside of css usage in terms of structure and layout.
What I've gotten so far is a sense that strategic and logical use of divs can help to give needed control when working with javascript and css.
But are there any other basic things i should consider that may not be aware of?
For example, I know people used to control layout with tables, but is that still a thing? Or is it now bad practice?
Looking forward to your suggestions.
Regarding your table question- People generally choose divs over tables, BUT some things cannot be done well without tables. They still have their place. Divs and Tables inset within each other are often used for datagrid styled layouts for example. Often replacing tables with divs creates a nasty (oversized) amount of css code. If you can use divs cleanly, that is perfect. If it overbloats your code, then use the simpler cleaner old faithful table code - or combine them where it makes for better results.
More info on that here: Tables instead of DIVs (Joel Coehoorn's detailed answer: "The whole "Tables vs Divs" thing just barely misses the mark. It's not "table" or "div". It's about using semantic html.")
Regarding the topic of non-CSS since your question also refers to layout design formatting:
There are some things you cannot do well also without pure CSS, that in and of itself allows modern formats to work on multiple devices. This will reach more customers.
For newer layout types for sections of pages needing icons or photos, look into the use of inline-block styled lists. CSS does wonders with them. It is a nice third alternative.
For cross-device development, you should check out responsive and fluid formatting options. A good place to start is to look at http://html5boilerplate.com/ and also http://www.initializr.com/ (boilerplate and bootstrap).
If you haven't worked with them before, look into media queries for browser sizing and device orientation displays (landscape or portrait) - part of the fundamentals in responsive web development. You can then use your regular html within the constraints you set with these.
Try to think of your pages/documents in terms of structure rather than appearance. For example, a book is made up of a title page, table of contents and chapters. Similarly, the contents of a web page can usually be broken down into logical blocks, which are then styled as required. Don't forget that web pages may be read by screen readers - your want to structure your page so the spoken output makes sense.
There has been a discussion of tables vs CSS at Why not use tables for layout in HTML?. You may also want to check out CSS Zen Garden, mentioned in that thread. Beyond this, I strongly recommend validating any HTML and CSS you write. Check out http://validator.w3.org/ for that purpose.
Divs are span are a better options for laying out a page. Tables should be used if tabular data is to be displayed.
Other than that you should mostly consider re-factoring redundant code regularly and resolve paths to directories in config files. This will help you to manage your project better. Redundant code can become a huge problem, since making changes requires changing code at several places. Make sure that you re-factor code that is being used more than once or twice into functions and call them instead.
Try diving into CSS frameworks such as bootstrap or foundation since a big community contributes there and are usually built with best practices in mind. You will be surprised to see the problems you run into have already been encountered by many others and they have found an efficient way around it too. There are frameworks and libraries for JS too. Feel free to explore.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I would like to create the layout as shown in the following picture. I am currently using Twitter Bootstrap's layout and controls to create a web application.
There are outer containers below one another and each outer one has containers within them. I would like all containers to be collapsible i.e. I would like to minimize each one, including the outer containers. All containers should be shown on screen on load.
When all inner containers are minimized / collapsed, the parent outer container should then collapse as well. I am also open to suggestions on the location of the minimized parent containers (to the left, top or bottom).
I am not sure how to create this layout (either with the accordion control or with panels or any other suggestion anyone may have) and would like to know if anyone has a suitable suggestion?
Some suggestions and thoughts. I hope it's guidance of somewhat!
Functionality
You might be able to use the built-in js to manage this, but not too sure about it. However, I believe the collapsability is executed with js but that it regulates css-code such as display and visibility. I also believe that these collapsable scripts are triggered by the js's in the end of the document, and it only does so depending on the screen resolution. So I don't know for sure how much of the scripts you could actually use for this type of active choice of collapsabilty. I'd look into coding it myself if I were you.
Type of conent?
What kind of content do you want in your div's? (Title A.1 - Title C.3). For better user experience I'd suggest a layout something like the picture I included. Especially if the user wants to view it from a mobile device, but not exclusively. Text in a vertical angle is basically just pain for the neck. But if you insist on that approach I'd suggest Icons.
A suggestion for the layout regarding usability and user experience.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
I am developing a website and as a part of this website to design a webpage just for showing 11 elements which about the principals of the company. Each one of these elements has a long description. The website design is as following: menu bar with logo at the top, side bar at the left and body at the right.
At the beginning, I was thinking to list the elements on the side bar and the description of each elements will be appeared on the right when the user clicks on a specific element (using javascript), but later on the customers don't like this design and they said it will confuse the user since he will need to scroll down for reading a long description for just one element and then scroll up to select another element. Besides that, how will the user know the flow of navigation of this webpage? which means that the elements on the left and when he clicks on one of them, he will see the description on the right?
So how should I design this page? please tell me if I should use specific css layout or javascript or jquery plugin (mention the name of the plugin if it is possible)
first, you can play with the basic principle on this fiddle. Playing with "position: fixed", float and negative margins does the trick.
Then you can look at this page for plenty examples.
But your best bet is to use any decent jquery menu plugin, they all all provide this functionality. just google "jquery menu" or "css fixed menu", or a mix to have tons of choices.
For javascript libray, use jquery itself.
The 11 elements that you are referring can be displayed in the following way:
. **Principal 1**
Description of Prinicipal 1
**Principal 2**
Description of Prinicipal 2
Initially only the div's containing Prinicipal1, Principal 2 etc. will be shown to the user. The description of each prinicipals will be hidden.
When the user clicks on the title of Prinicpal1, display corresponding description.
Use $("<>").show('slow); And if the description is already in expanded state, the user can click on the principal again to hide it.
This will be a very good experience
Let me know if you have any further doubts