Month: octubre 2019

Cómo alinear las cosas en CSS

Imprescindible el artículo How To Align Things In CSS:

There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why.

Los consejos que da son:

To wrap up, I have a quick summary of the basics of alignment. If you remember these few rules, you should be able to align most things with CSS:

  1. Are you aligning text or an inline element? If so, you need to use text-align, vertical-align, and line-height.
  2. Do you have an item or items you want to align in the center of the page or container? If so, make the container a flex container then set align-items: center and justify-content: center.
  3. For Grid Layouts, the properties that start with align- work in the Block direction; those which start with justify- work in the inline direction.
  4. For Flex Layouts, the properties that start with align- work on the Cross Axis; those which start with justify- work on the main axis.
  5. The justify-content and align-content properties distribute extra space. If you have no extra space in your flex or grid container, they will do nothing.
  6. If you think you need justify-self in Flexbox, then using an auto margin will probably give you the pattern you are after.
  7. You can use Grid and Flexbox along with the alignment properties for tiny layout jobs as well as main components — experiment!

Sobre la divitis

La divitis es una enfermedad que sufren muchos desarrolladores web: es el uso innecesario de elementos div, algunas veces con varios niveles de anidamiento, para etiquetar una página web.

Si crees que sufres de divitis te recomiendo las siguientes lecturas:

Y también varias entradas que he escrito sobre la divitis:

La importancia del posicionamiento en el éxito de un sitio web (y una empresa)

En Here’s What We Learned About Organic Click Through Rate:

We analyzed 5 million Google search results to better understand organic click through rate.

First, we analyzed CTR data across 874,929 pages and 5,079,491 search queries.

Then, we looked at how factors like title tag length, sentiment and meta descriptions affect organic CTR.

Here is a Summary of Our Key Findings:

1. The #1 result in Google’s organic search results has an average CTR of 31.7%.

2. The #1 organic result is 10x more likely to receive a click compared to a page in #10 spot.

3. Organic CTR for positions 7-10 is virtually the same. Therefore moving up a few spots on the bottom of the first page may not result in more organic traffic.

4. On average, moving up 1 spot in the search results will increase CTR by 30.8%. However, this depends on where you’re moving from and to. Moving from position #3 to position #2 will usually result in a significant CTR boost. However, moving from #10 #9 doesn’t make a statistically significant difference.

5. Title tags that contain a question have a 14.1% higher CTR vs. pages that don’t have a question in their title.

6. Title tags between 15 to 40 characters have the highest CTR. According to our data, pages with a title tag length between 15 and 40 characters have an 8.6% higher CTR compared to those that are outside of that range.

7. URLs that contain a keyword have a 45% higher click through rate compared to URLs that don’t contain a keyword.

8. Adding “Power Words” to your title tag may decrease your CTR. We found that titles with Power Words had a 13.9% lower CTR compared to titles that didn’t contain Power Words.

9. Emotional titles may improve your CTR. We found that titles with positive or negative sentiment improved CTR by approximately 7%.

10. Writing meta descriptions for your pages may result in a higher CTR. Pages with a meta description get 5.8% more clicks than those without a description.