Photo by Bjørn Giesenbauer
In less than a month's time the focus of the global Drupal community will shift to the capital of the Czech Republic for the European edition of this year's DrupalCon.
We are proud to announce that for a third year in a row we decided to sponsor Europe’s premier Drupal event. And again, we opted to increase our contribution and will welcome you at our platinum booth in the exhibit hall!
From our favourite CMS Drupal to Photoshop pains - this week's edition takes a looks at a broad range of topics. Enjoy!
Mediacurrent: Drupal 8 Site Install, Module Installation, Directory Layout
With Drupal 8 pretty much taking center stage at the upcoming DrupalCon, doing some homework on the subject is certainly not the worst thing you could do. In this screen cast Mediacurrents Albert Volkman talks about the 101's of Drupal 8.
Facebook: Global Government Requests Report
This week the world's largest social network shared some insight regarding requests from government to share information of specific users. It's interesting to see the quantities of request the global governments produced in the first six months of this year.
Infoworld: Nginx takes the slippery road away from open source
Simon Phipps gives his opinion on the dangers of partly moving away from an open source model. A step which the web server project Nginx currently is taking.
Wallpaper* Magazine: Nike plots the London Fuel Map
To give its virtual activity currency the Fuel Points a reference in real-life, Nike created a Fuel Map for London. This should encourage commuters to walk parts instead of using the public transport.
Tweets that cut through the noise
— Jim Ramsden (@ramsden) August 27, 2013
Once you've used Photoshop you know how annoying this can be...
Omega 4 looks very different than Omega 3. When we first wrote about some of their differences back in January, we reported on four major themes:
- Zones & Regions
- Pluggable Layouts
After getting our hands dirty for the first time with the new theme, these were the most obvious changes. And while these topics are still important to note for those still looking to make the transition from 3 to 4, there are other improvements to the theme which also deserve attention.
In general, Omega 4 is a vastly more flexible version of its predecessor. As a follow-up post to our original findings, here are even more reasons why:
Essentially, Omega 4’s theme extensions have been improved in four areas: layout, development, asset management, and compatibility improvements. We’ve touched on the new layouts before, but there’s more to them you should know:
Total Layout Control
With Omega 4 Layouts, you can define how pages are laid out through code. There are no predefined breakpoints which makes for a completely fluid (truly responsive) site.
Layouts can be added via the “layouts” folder of an Omega 4 sub-theme.
Given the file structure in the example above, you could even switch your layout contextually with a hook_omega_layout_alter function:
This feature completely removes the need for the Delta module commonly used with Omega 3.
Development, made easier
Some cool new features have also been added to assist in the theme development process. In a nutshell (and taken from a great resource, Omega 3.x vs. Omega 4.x - Comparing Apples and Oranges), Omega 4 provides the following development additions:
- Rebuild theme registry on page load
- Rebuild CSS and JS aggregates on page load
- Browser width indicator
- Region demo mode
(Some pretty spiffy improvements if you ask us...)
These features make for better site performance and happier Frontend lives.
Browser & Viewport Compatibility
Conditional HTML classes are now added, for example “lte-ie9” in Internet Explorer versions 8 and below. This is a big win when optimizing sites for cross-browser consistency.
There’s also Cleartype support for Windows, customizable Viewport metatags, and ChromeFrame & IE Edge support.
Next — the powers of Drush! If you navigate (via the command line) to a Drupal site with Omega 4 & Drush installed, there’s a slew of new Omega-specific commands, with two notable ones being omega-wizard (owiz) and omega-guard (ogrd).
Omega-wizard is a guide through the process of setting up and enabling a subtheme, and omega-guard enables the use of Omega 4‘s LiveReload built-in support.
Have a look at the others as well. Omega-export and omega-revert can greatly assist during site-deployments.
Preprocess, Process, and Theme Files
And if you’re a developer fed up with the days of having cluttered, unorganized template.php files, this one’s for you. :)
Omega 4 allows the themer to provide separate preprocess, process and theme functions to their Drupal site via organized, structured theme files. These files are autoloaded and are no longer to blame for overloaded template.php files, especially in the case of themes requiring a heavy load of PHP.
Also, according to fubhy, the Omega 4 developer, “this feature has been improved tremendously since 3.x and performs much better now.”
Finally, and if you didn’t know already, SMACSS is where it’s at. Omega 4 has adopted the “Scalable and Modular Architecture for CSS” principals and applied them directly to both of its available subtheme starterkits.
If you’re not familiar with SMACSS however, it’s basically just a guiding set of methodolgies to write maintainable CSS. Due to CSS’s flexible nature, it’s easy to make a mess of it. SMACSS helps with that.
And if you’re going to use the omega-wizard Drush feature, go ahead and choose the “extended” starterkit. It has a fuller SASS structure included with more modular components, making it easier to understand and organize your project and different Drupal components.
So that's it for now! We're still loving Omega 4. Are you?
Photo by Gordon Wrigley
A joke about user centered design states that usability and user experience (UX) related positions on quotes justify the multiplication of efforts by five. Indeed, the popularity of good usability and user experience are growing, while for most of our clients the topic remains to be a Yeti - everybody knows about it, but nobody has really seen one.
The Generations X and Y no longer accept terrible error messages, incomprehensible websites or forced reboots. Since Apple, expectations have drastically changed and e-commerce has become a serious and unforgiving business. Businesses lose when their prospects give up on finding a product. Businesses lose when potential clients refuse to fill in a sophisticated newsletter subscription form. Hence the emergence of disciplines like user-centered-, UX- and usability design.
From a user's point of view a website's UX finds immediate expression: ‘I don’t like using this website’ or e.g. ‘I don’t understand how it works’.
Setting goals like ‘intuitiveness’, ‘beauty’, ‘understandable, appealing design’ and ‘ease of use’ might sound neat but the question is where to start. What exactly matters if you want to achieve a great user experience? Where is the place of usability? How do they differ? Are esthetics and simple beauty of visual design, enough?
While usability is the ease of use and learning ability of an interface, UX involves a person's emotions during accomplishing tasks using a particular product. Simply usable is not enough for a good UX. Simply “looking good” is too little to convert.
This leads us to the user, the very person who will pay for your goods or services. Understanding who he or she is, what he wants, she loves and hates is the way to go.
If you are in a shop, you try things before you buy. Good things often are the result of research, calculations and following conventions like “people must be able to regulate the height of an office chair, which is an object with a seat, a seat-back and an arm support”. So, you must test your interface again and again (with your target group!) before getting it released. This approach will save a lot of time and money, resulting in good products.
To cut a long intro short, mind these rules, which have been established by usability professionals over the years:
- The users deserve to know. The system should always inform about what is going on, through appropriate feedback within reasonable time.
- Follow real-world conventions, making information appear in a natural and logical order.
- Users should be able to control the system. Add support for undo and redo.
- Consistency. Users should not have to wonder whether different words, situations, or actions mean the same thing.
- Error prevention and error tolerance are important. Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
- Recognition rather than recall. The user should not have to remember information from one part of the dialog to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
- Less is much: esthetics and minimalist design are the keys to good UX.
- Help information should be easy to search, focused on the user's task, list concrete steps to be carried out, and should not be too large.
This week's featured topics are social media, Drupal and element based design. Hopefully there's something for you in the mix. Enjoy!
The Wall Street Journal: For Twitter, Free Speech Is a High-Wire Act
Shira Ovide investigates the conundrum Twitter faces by promoting free speech and compiling with local laws.
AllThingsD: Facebook Takes on Twitter by Courting Celebrities, Building Twittery Tools
After introducting the hashtag to its ecosystem, Facebook added a few other familiar Twitter features.
Palantir: Developing Drupal sites: Plan or Perish
Larry Garfield invites the community to take a look at Palantir's build spec document. And explains how it is a crucial part of their projects.
Bloomberg: Twitter Buzz Helps Boost TV-Show Ratings, Nielsen Finds
A recent study by Nielsen seems to have confirmed the theory that social networking platforms can increase television ratings by sharing their thoughts while a show is on air. However the Guardian's Brian Moylan raises a few questions about this conclusion.
.net magazine: Designing with elements and modules
While our interaction designer Andrew McClintock wrote about the concept of 'Element Collages' on our blog this week, Chris Allwood talkes about his approach which also is element based.
The essence of a web week will take another short summer break and return on Saturday 31 August.
Earlier this year I attended the inaugural Artifact Design Conference in Austin, Texas. While there were several great presentations on a range of topics, I was particularly interested in one by Dan Mall, in which he introduced the idea of the element collage.
In his presentation he talked about his design process. He spoke of his initial excitement when he first meets with a client, when great ideas are running through his mind and he can't wait to get started on the design. But by the time the project actually makes it to his desk, by way of site planning, information architecture, wireframing, and client approval, those initial design ideas aren't as sharp as they were two weeks prior and perhaps his enthusiasm has fizzled some too.
In order to take advantage of the enthusiasm that comes with a new project, now Dan runs straight to Photoshop where he purges all his initial ideas onto the canvas. Over time, he adds more and more elements to this collage to finish with what he calls, you guessed it, the element collage.
An element collage is not a finished design. When presented with a finished site design, clients often get too hung up on little things. Not realizing that little things can be changed easily, they reject the whole concept.
An element collage is not a wireframe, or moodboard. These concepts are often too abstract for the client to visualize the finished product. In his article on the subject, Dan Mall likens this to "showing someone a blueprint of their dream house and asking them what curtains would fit well in the space."
An element collage is a collection of pieces to a larger design puzzle. There is no specific logic or order to page, it's meant only to convey a feeling for the visual branding of the website. It's not about wording, functionality, or technical details, but about the overall visual essence of the page.
We recently pitched for new project and decided to present our design concept as an element collage. In this regard, their self-explanatory nature can also be great for spec work, when you're not present to converse on the topic of design. Here's a little bit of what that looked like —
We received favorable feedback from the prospective client and plan to work more with element collages in the future. I foresee other agencies doing the same as this concept grows in popularity and usefulness.
While we had our national day mid-week it didn't put us off of compiling our weekly selection of stories that got our attention. Enjoy!
MailChimp: How Gmail’s New Inbox Is Affecting Open Rates
A few weeks ago Google introduced a new segregation of it's Gmail inboxes. Here is some insight on how the opening rates of newsletters have developed.
Amazee Metrics: An introduction to Universal Analytics
Google introduced with Universal Analytics a new tool for analytics. Amazee Metrics' George Papadongonas gives you an insight what you currently can expect of it.
Drupal Groups: 1M Drupal installs and counting! (11110100001001000000)
The millionth registered Drupal installation is approaching. Within the Drupal community questions are raised on how to celebrate this milestone.
The Hipster Logo Design Guide
Need a hipster logo? Here is a simple tutorial on how to create one. Now you'll definitely will stand out of the crowd.
Tweets that cut through the noise
Taking a MacBook to a conference, or generally out in the world? This would be a wise move: http://t.co/HPiMobQ9ik
— Matt Gemmell (@mattgemmell) July 31, 2013
Once you work in a part of town for a time you will most certainly have tried all available lunch options. How can you break the circle of always eating the same meals? Of course you can bring in food from home, get a ready meal or just don't care and rotate your favorite outlets. However if you have a tea kitchen at your workplace available an entire new world can open up to you.
Here are some inspirations you might not think of but they are easy to make, absolutely delicious and, best of all, don't require any fancy cooking facilities. All you need is a cutting board and a knife and any you are ready to go.
Pumpernickel, Goat Cheese, Walnuts and Honey
Pro tip: Sprinkle some salt, pepper and lavender bracts on top of it.
Tomato-Watermelon Salad with Feta
For the dressing just use olive oil, balsamic vinegar, salt and pepper.
Tomato Focaccia, Pesto and Mozzarella
If you want you can add a few rocket leaves to add some greens to the mix.
All ingredients, utilized in the meals above, should be available in every average supermarket.
What are you having for lunch?
After a short break the Essence of a web week is back. This week's five featured stories stem from the world of Responsive Design, Drupal and extreme challenges. Enjoy!
comScore: Facebook and Google Capture Majority of Time Spent Online in Switzerland
A little insight on how popular website's are accessed by Swiss internet users.
DrupalCon Prague 2013: DrupalCon New and Improved - Meet the Drupal Labs Initiative
Learn all about a new format that will debut at Drupalcon Prague.
PRISM - All your data, in one place
There's a new cloud service available...
Responsive Web Design
Get Elastic Ecommerce Blog: How Time Adopted Responsive Design And Saved Time
Three conclusions of Time Magazine's new responsive site.