Playing with Pull Quotes using CSS alone

A Pull Quote is a special case of quotation in the typographic industry where a small fragment of a paragraph text is highlighted in a distintive box or selection and still present in the main body of the text.

I wanted to do this for HTML without repeating the text to avoid duplicate content and to have a simple CSS style that I could use anywhere I wanted to use a pull quote. This is how I accomplished pull quotes with CSS alone.

<

p>The first thing I did was to define a style for the pull quote that will affect all elements of the class .pull

	.pull:before{
		width:230px;
		float:right;
		margin:0px;
		padding:10px;
 
		color:#4169E1;
		line-height:1.2em;
		font-size:20px;
		font-style:italic;
 
		content: attr(start) attr(title) attr(end);
	}

The first thing to notice is that I’m using the .pull:before pseudo-class so I can latter use the CSS content property. The first section of the rule just defines the float box of the element that I’m injecting. In this case it has 230px width. The second section defines the typographic style of the text to be used. Finally the third section is where the magic happens. I’m using the content property to insert 3 blocks of text that are retrieved from the properties of the span.

For example, the above pull quote HTML on the second paragraph looks like this:

<p>I wanted to do this for HTML without repeating the text to avoid duplicate content and to have a simple CSS style that I could use anywhere I wanted to use a pull quote. This is <span class="pull" start="– " end=" –" title="how I accomplished pull quotes with CSS alone"></span>how I accomplished pull quotes with CSS alone.</p>

As you can see in the bold selection, I’ve created an empty span that has attributes start, end and title defined. These allows me to use those attributes in the CSS style sheet and personalize the pull quote with starting and ending elements according to what I want to do.

Complex Systems Society new Website.

The Complex Systems Society (CSS) is a great organisation. In the past month it revamped 2 of its websites. The more institutional website and is available at http://cssociety.org/. On the other hand, the traditional Wiki website where researchers can create their lab pages (or conference pages, personal, etc…). This also got a new facelift and is now more modern and easy to use. If you’re not a CSS member and you are a researcher interested in the areas of complex systems, interdisciplinary research or networks, please join the Society! It’s a great community.

update May 2, 2017 – Some dead links were removed. Text was adjusted accordingly.

AB testing webpage CSS

AB testing is one of the most talked optimisation strategies for webpages. Google made it very popular by optimising it thoroughly in their pages. It’s using crowd-source intelligence for website optimisation…

The basic idea of AB testing is that you have 2 alternative pages that you want to test and see which of the two performs the best. The notion of performance can be which of the two alternatives led to more sells, or more clicks, or what ever you want to convert to.

Then the analysis is just a matter of computing the statistical relevance of the difference of the two alternatives (a basic two-sample proportion test, or a two-sample Z-test, for those who want the maths).

Google provides a great tool to do Website Optimisation with AB testing (and Multi-variable testing), but the problem is that you can’t really do CSS testing with it (there are some ways around it but I don’t like them). For this I decided to roll out my own AB testing for CSS alone.

It uses Javascript to apply styles to the webpage as it loads and it stores cookies that will track information for the conversion part. My basic research question for my experiments with sixhat.net is “How do CSS styles affect people website usability?”. This is a simple question with lot’s of sub questions associated with it.

Here I’m using sixhat.net as my lab. It’s simply my blog and probably you have seen some natural changes over time, if you are a regular reader (that I appreciate). But some of the answers I get from my toy website are then translated to bigger projects (for example ASSYST received some inputs from the AB testing done here.)

If you come here sometimes and find that the website really looks strange, maybe its is because I’m testing something weird. Don’t worry, each test takes little time and everything will be back to “normal” in a couple of days (usually)!

Post ECCS Conference round up.

ECCS’10 finished last Friday. It’s a strange thing to put up such a big event for complex systems studies.

The first thing one notices after everybody else has left is that you already miss the conference. The frenetic rhythm of the conference impregnated your body in such a way that it feels a bit strange not having it around. The second thing I’d like to say is about how great the participants were (Even when we put them into buses and to the crazy Lisbon traffic.). The success of this conference wouldn’t even be half of what it was if the participants weren’t so great. Finally, It was very nice to see young students preparing the future of complex systems studies. They (We) met Friday and had a great brainstorm that, in my view, will percolate and will be very important in the context of Complex Systems Studies for the next years in the World. For now there’s a website hosted at the Complex Systems Society with some details. It will be updated regularly in the future by the CSS members. So if you aren’t a CSS member yet, please do join and participate in the discussion of the future of Complexity Sciences.

Acabar com os trolls nos comentários dos Jornais…

commenttroll Quem já leu os jornais online já percebeu que são local de convívio dos trolls da net portuguesa. Sem excepção.

Assim, ontem surgiu no Twitter de forma auto-organizada uma solução para acabar com esse lixo nas nossas visitas às páginas dos jornais. Rapidamente se fizeram esforços para identificar e eliminar as pestes e chegou-se a duas soluções:

O primeira passa pela utilização de uma folha de estilos personalizada no nosso browser chamada shutup e depois adicionar ao ficheiro CSS alguns CSS Selectors para os sites portugueses. O pessoal compilou uma lista que está disponível em http://piratepad.net/1l4UaVF8hO.

A segunda foi encabeçada pelo Joel Calado que colocou os CSS Selectors num script para Greasemonkey (Firefox) e GreaseKit (Safari) para quem preferir. Já agora, sugeria ao Joel que colocasse uma caixa de comentários na página do script para que se possam ir sugerindo novos CSS Selectors para ele actualizar de quando em vez o script.