Blog

Responsive Bartik

Time to read: two minutes

Bartik is the default theme for Drupal version 7 and also for the upcoming Drupal version 8. When Bartik was designed mobile devices hadn’t yet exploded on the scene and techniques for designing web sites for them were just beginning to be devised.

Early on in the planning process, Dries Buytaert, Drupal creator and project lead, stated that Drupal 8 needed to be a “great platform for building… mobile web experiences.” This led to the creation of the Drupal 8 Mobile Initiative.

Part of that initiative required converting the Drupal 8 core themes, Bartik, Stark, and Seven, to ones that would function properly on mobile devices as well as on laptop and desktop systems. Various concepts were proposed and debated for converting Bartik. Finally, it was determined that this could best be accomplished by using the principles (mobile-first, responsive layout) of Responsive Design.

Many people were involved in this process but I will take at least some credit for the eventual layout and styling used. I intend to detail the specifics of this in a future post.

When the Drupal 8 changes for Bartik were well under way, the question arose as to whether or not this could be backported to Drupal 7. It was determined that because of the complexity of the CSS and markup changes, it would not be possible to add this to Drupal 7 core.

As a Drupal 7 version of Bartik was also needed for the Spark project, those involved in that (principally webchick) initially created their own version. Soon after I created a contributed theme, Responsive Bartik D7, which is now used in Spark.

The responsive version of Bartik has been committed to Drupal 8 core and is functioning quite well, although a few minor styling bugs remain. Responsive Bartik D7 has been available in dev and beta versions for some time. A beta2 version has just been released that contains Right-to-Left (RTL) functionality.

An additional feature of Responsive Bartik D7 is a Main Menu that collapses to a single, stacked column at small screen sizes and may be toggled open or closed.

According to Drupal’s usage statistics for Responsive Bartik D7, it’s being used on over 5,300 sites.

Yahoo! Acquires Tumblr for a Cool $1.1 Billion

Time to read: one minute

Yahoo! announced on May 19th that their board had approved the purchase of Tumblr for $1.1 billion in cash.

I won’t go into any detailed history of the companies or their founders or principals. You can find that other places on the web.

For those who don’t remember, or are too young to have heard of it, Yahoo! is a huge internet company with search, mail, advertising, mapping and many other services. It grew very rapidly in the 90’s and became a very popular web portal. In recent years its fortunes have faded. Yahoo! has gone through many management changes, layoffs, and restructurings, and many people feel it’s lost its identity and become directionless.

Tumblr is a micro-blogging and social networking website. It’s very popular with the younger crowd, mostly teens and college-aged users. It’s quite free-wheeling, you can post almost anything you want there… even porn. It’s also had a very rapid growth, now hosting over 108 million blogs and over 50 billion blog posts.

Tumblr has received and burned through around $125 million in private capital since its debut in 2007. It made only $13 million in revenue in 2012 and expected to make $100 million this year.

Response to the acquisition has been mixed, especially concerning any benefit it will have for Yahoo!. It certainly benefits Tumblr. They were running out of money and financing.

I have no insightful opinion about the deal. I’m not a Tumblr user and I haven’t used Yahoo! in any significant way in many years. Below are links to reports and some pro/con opinions from around the web.

Resources

GigaOM initial report.

Time Magazine report.

CNN Money report.

Wired dot com opinion.

Huffington Post report concerning the porn.

NBC News Tumblr’s teenage wasteland.

Slate report on Tumblr users' reactions.

Readwrite Yahoo!’s identity crisis.

Readwrite Who hates the deal? Tumblr’s users.

Hard Disc Woes

Time to read: less than one minute

Finally back up and running after a hard disc crash and another disc with file system errors that Chkdsk couldn’t repair even after trying for more than eight hours.

I had to re-install Windows and all my programs, then dig around for all my data files. Luckily, I had just enough backups and all my important data is fine.

One good thing about all this is that everything runs faster with clean installs. Hundreds of unused files and thousands of unused Registry entries are now all gone.

Responsive Design

Time to read: one minute

Responsive Web Design is based on the idea that a website design and layout should respond to the device it’s being viewed on. This is usually accomplished by using techniques, such as:

  • Adapting the layout to suit different screen sizes, from phones, to tablets, to laptops. to widescreen desktops
  • Resizing images to suit the screen resolution/size
  • Serving up smaller, lower-bandwidth images to mobile devices
  • Simplifying page elements for mobile
  • Providing only essential elements on smaller screens
  • Progressively enhancing elements for larger screens

Responsive Design is all the rage these days and for good reason: Designing a web site for every possible device (an Adaptive design) very quickly becomes an exercise in futility as more and more devices with varying display sizes are introduced seemingly every day. You could, of course, have a separate Mobile web site in addition to your normal one but keeping the content on both sites in synch is difficult and more likely impossible. Generally speaking, unless you need some specific functionality for your site that is only provided by a mobile device, a responsive design is usually more efficient and easier to maintain.

If you’d like to learn more about the concepts of Responsive Design you should take a few minutes to read Ethan Marcotte’s landmark article that coined the term and started the Responsive revolution. See also, the Resources section below.

When laying out your site need to consider and determine the media breakpoints based on your site’s content and the layout and look you’re attempting to achieve. These breakpoints and the media queries that enable them will make your site responsive to the devices it’s being viewed on.

This site has a responsive, mobile-first layout.

Resources

Article by Ethan Marcotte. The article that started it all.

Article by Brad Frost.

Article from Smashing Magazine.

Article from Mashable.com

Description of The Responsinator web site.

20 Years of a Free and Open Web

Time to read: one minute

Twenty years ago today the technology for the World Wide Web (the web) was made available, royalty-free, by CERN, the European Organization for Nuclear Research, headquartered in Geneva.

British computer scientist Sir Tim Berners-Lee, a CERN researcher at the time, along with Belgian computer scientist Robert Calilliau, proposed a system to use hypertext “to link and access information of various kinds as a web of nodes in which the user can browse at will,” for information sharing between scientists at institutions all over the world.

The wide-spread adoption and rapid growth of the web is credited to its royalty-free availability and the ease of use of its technology.

The web project was developed on Sir Tim’s NeXT computer which also served as the world’s first web server hosting the world’s first web site. In honor of this special occasion the original URL to that first site has been restored after being dormant for many years.

Resources

Article by Robert Calilliau.

CERN Project to restore the first web site.

BBC News coverage.

Article by Mark Boulton. Mark Boulton Design designed the new CERN web site.