posts about or somewhat related to ‘css’

Learn to Build a Web Site with the UMass Journalism Program
UMass Amherst is launching a free, 6-week Massive Open Online Class to teach the basics of creating a Web site. 
Starting May 20, two lessons per week will get participants up and running with “design principles, HTML5, CSS, working with images, modifying templates, incorporating external plugins, and putting your site online with FTP.”
Registration is open to the first thousand students.
You can learn more about it here. 
Image: Learn to Build a Basic Web Site, via UMass Amherst.

Learn to Build a Web Site with the UMass Journalism Program

UMass Amherst is launching a free, 6-week Massive Open Online Class to teach the basics of creating a Web site. 

Starting May 20, two lessons per week will get participants up and running with “design principles, HTML5, CSS, working with images, modifying templates, incorporating external plugins, and putting your site online with FTP.”

Registration is open to the first thousand students.

You can learn more about it here

Image: Learn to Build a Basic Web Site, via UMass Amherst.

CSS3, JS and David Bowie
We like timelines. We like CSS3 and JavaScript animations. We like David Bowie.
Mix them all together as a history of David Bowie homage and we like this.
Image: Screenshot, The Rise and Rise of David Bowie, by Castle Cover Ltd.

CSS3, JS and David Bowie

We like timelines. We like CSS3 and JavaScript animations. We like David Bowie.

Mix them all together as a history of David Bowie homage and we like this.

Image: Screenshot, The Rise and Rise of David Bowie, by Castle Cover Ltd.

No Sleep ‘Til Fairbanks
A few weeks ago EJ Fox wrote a piece for us exploring longform storytelling and adopting magazine experiences for the Web.
In it, he discusses how JavaScript and CSS techniques can introduce full screen images and video, parallax effects and responsive design to amplify and support storytelling. 
Importantly, he also writes about how producers of these longform pieces must break out from the templates and general style guides that control the rest of their sites.
SBNation’s coverage of the Yukon Quest Race is a great, new example of harnessing these techniques. Created with Vox Media, it’s an elegant display of wrapping a 5,500-word longread in a delightful presentation package.
Check it: SBNation, No Sleep ‘Til Fairbanks.

No Sleep ‘Til Fairbanks

A few weeks ago EJ Fox wrote a piece for us exploring longform storytelling and adopting magazine experiences for the Web.

In it, he discusses how JavaScript and CSS techniques can introduce full screen images and video, parallax effects and responsive design to amplify and support storytelling. 

Importantly, he also writes about how producers of these longform pieces must break out from the templates and general style guides that control the rest of their sites.

SBNation’s coverage of the Yukon Quest Race is a great, new example of harnessing these techniques. Created with Vox Media, it’s an elegant display of wrapping a 5,500-word longread in a delightful presentation package.

Check it: SBNation, No Sleep ‘Til Fairbanks.

Your Single Page CSS and JavaScript Scrolling Animation for a Cause Site of the Day
Every Last Drop is a single page Web site by Waterwise, a UK NGO focused on water issues, to demonstrate how and where you can conserve water on a daily basis.
Earlier today we posted on repetition in Web design so count this among the ways to do it better.
Our sophisticated internal critique of the site ran something like this:

Michael: You want to see something neat. [Sends URL]
Jihii: Oh my God, I can’t even take this, it’s so cute.
Michael: It’s…
Jihii: Oh my God, I love this little man.

Sophistication, FJP style.
Image: Partial screenshot, Every Last Drop. Select to Embiggen.

Your Single Page CSS and JavaScript Scrolling Animation for a Cause Site of the Day

Every Last Drop is a single page Web site by Waterwise, a UK NGO focused on water issues, to demonstrate how and where you can conserve water on a daily basis.

Earlier today we posted on repetition in Web design so count this among the ways to do it better.

Our sophisticated internal critique of the site ran something like this:

Michael: You want to see something neat. [Sends URL]

Jihii: Oh my God, I can’t even take this, it’s so cute.

Michael: It’s…

Jihii: Oh my God, I love this little man.

Sophistication, FJP style.

Image: Partial screenshot, Every Last Drop. Select to Embiggen.

The Magazine Experience on the Web
Over on theFJP.org, EJ Fox explores how news organizations are taking advantage of responsive design, CSS and JavaScript techniques not just to make things pretty, but to better tell their stories.
For example, he takes a look at the New York Times’ recent and well regarded Snow Fall: The Avalanche at Tunnel Creek. As he explores its presentation, he writes:
Its graphics and videos stretch to fill the entire browser window, an emerging design trend that is the true successor of the magazine’s full-bleed photos. The Times shows that when you elevate beautiful art that’s telling the story in a seamless way, it becomes greater than the sum of it’s parts. Compare to a similar NYT story where pictures are included with the story, but certainly not featured with any love.
It’s not confined to the style of the rest of the NYT site, which is for the most part a static 975px width. Some of the impact of full-bleed pieces like Snow Fall comes from the contrast between those special features and the whitespace of the primary site. It’s a clue to the user to dig in, and that something special is going to happen.
Read through for the rest, including how Web presentation and storytelling design affected EJ’s reporting on Occupy Oakland.
You can follow EJ on Tumblr at Pseudo Placebo. On Twitter he’s @mrejfox.
Image: Screenshot, Snow Fall: The Avalanche at Tunnel Creek, via the New York Times. Select to embiggen.

The Magazine Experience on the Web

Over on theFJP.org, EJ Fox explores how news organizations are taking advantage of responsive design, CSS and JavaScript techniques not just to make things pretty, but to better tell their stories.

For example, he takes a look at the New York Times’ recent and well regarded Snow Fall: The Avalanche at Tunnel Creek. As he explores its presentation, he writes:

  • Its graphics and videos stretch to fill the entire browser window, an emerging design trend that is the true successor of the magazine’s full-bleed photos. The Times shows that when you elevate beautiful art that’s telling the story in a seamless way, it becomes greater than the sum of it’s parts. Compare to a similar NYT story where pictures are included with the story, but certainly not featured with any love.
  • It’s not confined to the style of the rest of the NYT site, which is for the most part a static 975px width. Some of the impact of full-bleed pieces like Snow Fall comes from the contrast between those special features and the whitespace of the primary site. It’s a clue to the user to dig in, and that something special is going to happen.

Read through for the rest, including how Web presentation and storytelling design affected EJ’s reporting on Occupy Oakland.

You can follow EJ on Tumblr at Pseudo Placebo. On Twitter he’s @mrejfox.

Image: Screenshot, Snow Fall: The Avalanche at Tunnel Creek, via the New York Times. Select to embiggen.

And There We Go
Via

And There We Go

Via

Personalizing News for 700 Million People a Day 
Yahoo’s created a visualization about reading habits of the more than 700 million people that visit its sites each day.
Via ReadWriteWeb:

Every day, Yahoo displays about 13 million different news story combination on its homepage. Those stories are personalized based on demographic data and reading behavior, and the company keeps track of what kind of stories do well with which groups of people…
…To illustrate how this works, Yahoo has created an interactive data visualization that shows visitor traffic data in nearly real time. Using it, one can drill down into specific age groups, genders and story types to see what people’s aggregate reading habits look like.

To create the personalization Yahoo uses internally developed technologies called the Content Optimization and Relevance Engine (CORE).
Via Yahoo:

Looking at past user behavior, algorithms are combined with human editorial expertise to allow us to carry out deep personalization to our more than 700 million users, giving them “must read” stories that are interesting and relevant. This C.O.R.E. data visualization reveals some of the factors that influence the display of articles in the Yahoo! Today module.

The interactive visualization was created with JavaScript, HTML5, and CSS3.
Image: Screenshot of Yahoo home page views by demographic and content category, via Visualize Yahoo.

Personalizing News for 700 Million People a Day

Yahoo’s created a visualization about reading habits of the more than 700 million people that visit its sites each day.

Via ReadWriteWeb:

Every day, Yahoo displays about 13 million different news story combination on its homepage. Those stories are personalized based on demographic data and reading behavior, and the company keeps track of what kind of stories do well with which groups of people…

…To illustrate how this works, Yahoo has created an interactive data visualization that shows visitor traffic data in nearly real time. Using it, one can drill down into specific age groups, genders and story types to see what people’s aggregate reading habits look like.

To create the personalization Yahoo uses internally developed technologies called the Content Optimization and Relevance Engine (CORE).

Via Yahoo:

Looking at past user behavior, algorithms are combined with human editorial expertise to allow us to carry out deep personalization to our more than 700 million users, giving them “must read” stories that are interesting and relevant. This C.O.R.E. data visualization reveals some of the factors that influence the display of articles in the Yahoo! Today module.

The interactive visualization was created with JavaScript, HTML5, and CSS3.

Image: Screenshot of Yahoo home page views by demographic and content category, via Visualize Yahoo.

The Continued Search for Pixel-Perfect Fluid Layouts

Ever since content first appeared in a Web browser designers have sought pixel-perfect control over its layout. Basically, many strive for the detailed layouts they can achieve in print. 

Adobe, with its print and Web legacies, is trying to accelerate that process by working with WebKit, an open source browser engine used by Safari, Chrome and countless others, and its community, and the W3C, the international Web standards body.

In particular, it’s promoting CSS Regions and CSS Exclusions.

Via ReadWriteWeb:

CSS Regions is a module that builds on the column-based layout options now available in CSS3 to enable front-end developers to flow text across different columns (or “regions”) on a page. This allows for more dynamic page designs, which can shapeshift to fit different devices and device orientations on-the-fly…

…Another improvement to CSS proposed by Adobe is called Exclusions, which lets developers flow text into a non-rectangluar shape, or to wrap it around graphics on the screen, much like what’s been possible in desktop publishing for decades.

Web Pages are Bigger and More Complex Than Ever.
1995: The average page size was a lean, mean 14.1k, due to the fact that it contains just 2.3 objects [on average, of course].
2010: The average page size is 498k and contains about 75 objects.
2012: If we follow the current trend, by 2012 we can expect the average page to grow to 684k and contain 83 objects.
Strange Loop Networks analyzes page load, user experience and site traffic and notes the very real economic costs associated with delays in pages appearing. They suggest 57% of people will leave a site if the page doesn’t appear within three seconds and of those, 80% will not return.
By “objects” they refer to everything from images, embedded media, and Javascript and CSS files among other includes.

Web Pages are Bigger and More Complex Than Ever.

1995: The average page size was a lean, mean 14.1k, due to the fact that it contains just 2.3 objects [on average, of course].

2010: The average page size is 498k and contains about 75 objects.

2012: If we follow the current trend, by 2012 we can expect the average page to grow to 684k and contain 83 objects.

Strange Loop Networks analyzes page load, user experience and site traffic and notes the very real economic costs associated with delays in pages appearing. They suggest 57% of people will leave a site if the page doesn’t appear within three seconds and of those, 80% will not return.

By “objects” they refer to everything from images, embedded media, and Javascript and CSS files among other includes.

Adobe Proposes Standards for a More Designy Web
Adobe proposed new CSS standards to the World Wide Web Consortium, the international standards body for the Web, that would allow for more magazine-like layouts.
Called CSS Regions (PDF), the proposal is an attempt to break out of the typical grid layout that designers work within by creating a property called regions that aren’t constrained by geometry or position.
From the proposal:

CSS Multi-column Layout specification has pushed the limit of what is possible to achieve with CSS. However it still falls far short of the goal of representing typical magazine, newspaper, or textbook layouts in the digital space. This specification aims to close the remaining gap by giving content creators basic building blocks to express complex layouts. It does not aim to cover higher-level layout issues (e.g. allocating areas to fit all the content completely or placing areas on the page). These issues can be addressed by using either scripting or another CSS module.
The most obvious shortcoming of the CSS Multi-column layout is that columns are all of the same dimensions and placed next to each other. In more complex layouts, content can flow from one area of the page to next one without limitation of the area sizes and positions. For complex layouts, these areas need to be explicitly defined; in this specification they are called regions.

We noted the other day that Adobe released an FLV extraction tool called Wallaby that creates HTML, CSS and JavaScript versions of Flash animations, which is necessary for display on iOS devices such as the iPad and iPhone.
This proposal moves in the same direction by allowing designers to create complex layouts using Web standards instead of proprietary plugins and tools such as, say, Adobe’s Flash player.
Is the company cannibalizing itself then? Not really.
It’s still pushing forward with Flash Player 10.3 beta and last week previewed its 11.0 player. However, back in the print world it has InDesign and is pushing its adoption to create tablet ready apps. This was used, for example, to create digital magazines such as Wired and the New Yorker for the iPad.
If Adobe can get the proposed standards accepted, browsers will follow. And with that, they’ll have another tool at their disposal in their digital magazine publishing workflow. 

Adobe Proposes Standards for a More Designy Web

Adobe proposed new CSS standards to the World Wide Web Consortium, the international standards body for the Web, that would allow for more magazine-like layouts.

Called CSS Regions (PDF), the proposal is an attempt to break out of the typical grid layout that designers work within by creating a property called regions that aren’t constrained by geometry or position.

From the proposal:

CSS Multi-column Layout specification has pushed the limit of what is possible to achieve with CSS. However it still falls far short of the goal of representing typical magazine, newspaper, or textbook layouts in the digital space. This specification aims to close the remaining gap by giving content creators basic building blocks to express complex layouts. It does not aim to cover higher-level layout issues (e.g. allocating areas to fit all the content completely or placing areas on the page). These issues can be addressed by using either scripting or another CSS module.

The most obvious shortcoming of the CSS Multi-column layout is that columns are all of the same dimensions and placed next to each other. In more complex layouts, content can flow from one area of the page to next one without limitation of the area sizes and positions. For complex layouts, these areas need to be explicitly defined; in this specification they are called regions.

We noted the other day that Adobe released an FLV extraction tool called Wallaby that creates HTML, CSS and JavaScript versions of Flash animations, which is necessary for display on iOS devices such as the iPad and iPhone.

This proposal moves in the same direction by allowing designers to create complex layouts using Web standards instead of proprietary plugins and tools such as, say, Adobe’s Flash player.

Is the company cannibalizing itself then? Not really.

It’s still pushing forward with Flash Player 10.3 beta and last week previewed its 11.0 player. However, back in the print world it has InDesign and is pushing its adoption to create tablet ready apps. This was used, for example, to create digital magazines such as Wired and the New Yorker for the iPad.

If Adobe can get the proposed standards accepted, browsers will follow. And with that, they’ll have another tool at their disposal in their digital magazine publishing workflow. 

School of Webcraft: CSS, JavaScript & HTML5 →

Mark your calendars: registration for this year’s School of Webcraft opens January 8. Created by Mozilla and open education project Peer 2 Peer University, courses will focus on tools and technologies that keep the Web open such as CSS, JavaScript and the burgeoning HTML 5.

Courses are free and run online for 6-10 weeks. More information is here, and registration over here.

A little more background:

The School of Webcraft is a joint partnership between Mozilla and Peer 2 Peer University dedicated to providing web developer training that’s free, open and globally accessible. Our peer-led courses are powered by learners, mentors and contributors like you. Our goal: make it easy for people around the world to gain skills and build careers using open web technology. (Learn more about the School of Webcraft’s vision and plan here.)

Participate, learn and bring new and updated programming Fu back to the newsroom.