Following up our latest blog post on web design trends, this Essence of a web week post will look deeper into 2013's web design trends; some events in Zurich (and overall Switzerland) not to be missed; an easy to follow guide on Google Analytics and the latest on Drupal and technology.
First thing about the Drupal community we would like to share with you in 2013 is to remind you about the next DrupalCon. This will be taking place in Portland from May 20 until 24. Registrations has just opened, so don't forget to book your ticket!
The annual Consumer Electronics Show (CES) often brings up new gadgets which excites many members of our team. This year though one "hot" technology of years gone by is missing and declared dead by The Verge's writer Vlad Savov.
Here are five web design trends which could shape 2013:
Prediction #1: Responsive Web Design
This probably isn't the most adventurous of predictions - since you certainly are aware of this trend already. Most of the sites we crafted in 2012 were responsive from the very beginning and 2013 will probably see responsive design establish itself as a must-have rather than a nice-to-have feature. Here is a selection of responsive sites we made:
Prediction #2: Full Screen Backgrounds
One upcoming design trend, without a doubt, are full screen background images on websites. Like responsive web design it started to surface more frequently last year and will not disappear anytime soon.
Prediction #3: Centered Logos
A few years ago I always had the feeling that a logo should be in the top left or top right corner of a website. But since then many things have changed. Nowadays I am a huge fan of centered logos and predict more centered logos in 2013. LikeMag, one of our latest projects, features a centered logo.
Prediction #4: The Sidebar
After a few year in the wilderness the sidebar will have its comeback. Way back in the times when people used frames for their sites, sidebars were really popular and 2013 will see their renaissance - but this time with cool CSS3 transitions and mind-blowing effects.
Prediction #5: Retina Display Support
With Apple's line-up of high-resolution (hi-res) displays, we will hopefully see more support for Retina displays this year. We already released some projects with hi-res support:
In the last edition of the year we will take a look at: two design and user experience stories, some impressive numbers, multilingual Drupal site and Instagram.
The Essence of a web week series will take a Christmas break and return in the New Year.
Design and User Experience
In this documentary industry experts give their say on how they believe interaction design and user experience will become a central part in the Internet of Things.
Communities Dominate Brands: Latest Mobile Numbers for End of Year 2012 - This is getting humongous..
If you need some facts and figures to argue why Responsive Web Design isn't just a nice to have feature - this might be something for you!
LevelTen: Lessons Learned from 3 Drupal Multilingual Projects
The majority of websites we release are multilingual. If you are not familiar with the subject this blog post gives you a first hand experience of getting to grips with it.
Tweets that cut through the noise.
File sharing: you don't mind when it's some musician's song or a designer's game. When it's your shitty Instagram photos it all changes, eh?
— kentonallen (@kentonallen) December 19, 2012
The change of Instagram's terms of service created a stir this week. Kenton Allen tried to give the subject a different perspective.
Our 2012 Amazee Labs Christmas Cards are in the mail, perhaps even a few delivered by now. Inspired, in part, by a card designed to let the sender compose a greeting for any occasion (left), our version allows us to say, "Happy Holidays," in a number of ways (right). The beauty in the concept is that with just one design we are able to personalize every card in two ways. First, each recipient is greeted with a message tailor-made to suit our relationship and second, each card is hand-crafted by an Amazee Labs team member.
We came up with four greetings:
- Wir wünschen Ihnen und Ihren Kollegen ein frohes Fest und erfolgreiches Geschäftsjahr 2013.
- Wir bedanken uns für die erfolgreiche Zusammenarbeit in diesem Jahr und hoffen, dass wir im kommenden Jahr gemeinsam an diesen Erfolg anknüpfen können.
- Wir bedanken uns für die gute Zusammenarbeit und wünschen dir, deinen Mitarbeitern und deiner Familie frohe Weihnachten und ein erfolgreiches neues Jahr.
- Wir wünschen dir ein frohes Weihnachtsfest und einen erfolgreichen Start ins neue Jahr.
Perhaps the toughest part of the execution was arranging the words such that each greeting read correctly when highlighted, especially considering many words were shared.
Printing, tracing, and scanning the penmanship added to the personalized feel.
Two photos from a Gstaad-bound train ride proved perfect for the desired look and feel.
The words and imagery came together with some creative license to complete the printed card.
Fresh off the press, the Amazee Labs team passed the pen to finish off over 100 cards.
That's about 25 cards per greeting.
And we couldn't be happier with the finished product.
Happy Holidays from Amazee Labs!
The Drupal Commerce module is a great solution for anyone who wants to have a shop implemented with Drupal. It doesn't matter if you configure the shop from scratch or if you use an installation profile, you can have a shop in a very short time. Most of the time is just configuration, almost no coding required.
By default, you can create your products, set the prices for them, categorize them, create rules for tax handling, use different payment gateways (also with the help of some contributed modules) and many many other things. Unfortunately there is one thing you cannot do just with configuration: a donation system. The main problem in the donation system is that the amount of each donation can be different. If your donation system has only fixed amounts, then there is no problem, all you have to do is to create one product for each donation amount. But when the amount is variable, then implementing this using only configuration may not be so trivial (if not possible at all).
I will explain next how we deal with this case, when we have to build such platforms.
If we go a bit deeper and check how the Drupal commerce system is built and how the price of the order is calculated, we can see that each line item from the order has a unit price field, that usually is populated with the price of the product to which it is associated. So the user clicks on the button to add the product to the cart, and this triggers the creation of a line item in the order that will have the unit price of that product. But in our case, the price of the product is variable, because it is about a custom amount that the user wants to donate, so we cannot really use that price to populate the line item. We will have to handle this by ourselves, to implement some logic that will populate the unit price of the line item with the amount of the donation. The solution involves site configuration, as well as some coding.
The main idea is to have a new field on the line items (a price field) that will be populated with the value the user wants to donate, and then using a rule that will be triggered on the event “Calculating the sell price of a product” to put the value from our custom field into the price field of the line item. The reason why we do not just put the value directly in the line item price field, when we create the line item, is that the price of the line item can actually be updated later. For example commerce_cart_order_refresh() would update the price of the line items. In this case, our code that populates the unit price will not be executed, and we will not be able to maintain the correct price of the line item. That's why we use that rule that fires on the “Calculating the sell price of a product” and we store the amount that is being donated in a separate field that will not be altered by any other code.
And this is how it works:
add a price field on the line item type (admin/commerce/config/line-items/product/fields), with the name: field_variable_price
create a product with the SKU “donation” that has the price set to 0
add a rule that updates the price of the line item
For the coding part, an example can be found in a sandbox project. An important remark for the coding part is that we actually have to create the order and add the donation product to the order by ourselves, because we have to populate the field_variable_price with the amount that the user want to donate.
The code also has a page: /donate and a configuration form /admin/commerce/config/donation_amounts where some predefined amounts can be configured. For more details about the coding part, you can just check out the sandbox project.
While finalizing this blog post I discovered that, since starting to implement this feature on a recent project, a new module called Commerce Donate surfaced on Drupal.org which might be interesting for you too.
This week's pick will look at Drupal latest user testing results on multilingual, accessibility issues, social media in relation to online marketing, Google's version of the end of 2012 and a further opinion on analytics.
Drupal Groups: First Drupal 8 multilingual user testing results
Dear Drupal users, are you curious about how the multilingual user testing is going? This is something we at Amazee Labs are very involved in. Have a look at this post and spread your knowledge.
The Next Web: An eye-opening video: how blind people can use Instagram on an iPhone
Sometimes we tend to forget how people with impaired vision use technologies. Please meet Edison and start following him on Instagram…he won't let you down!
OPEN Forum: Hey, small-business owner: maybe social media isn't for you
Are we sure that social media is the correct strategy to promote your small business? This is an interesting post which can help you rethink about some online marketing strategy.
With the end of the year approaching, many websites are trying to sum up the 2012 on its own way. Google Zeitgeist gives you a general overview on the most searched trending topics of this year, which is coming to an end.
Forbes: Does analytics make us smart or stupid?
This blog post tries to take analytics out of the box and look at it from a different perspective.
Once a year our team gets together for a special night, the Christmas dinner. At this point let me say, we missed you deeply Kathryn, Andrew, Danny and Alex. It took place in Zermatt, at least it felt that way. In reality we dined right in front of Zurich airport, at the cosy Baracca Zermatt. After a nice platter of dried Swiss meat we enjoyed our Fondue and with it a great evening.
Let the pictures speak. Find more pictures on our dedicated image set on flickr.
In the last few years the market share of smartphones has significantly increased. It is probably safe to say that you own a smartphone that has become essential to your life. Besides using it for traditional tasks such as calls and text messages, you'll be browsing the web too. In fact smartphones have become our favorite tool to look for information online, just check Luke Wrobleski's blog post.
Since most mobile devices have a different screen size, it's apparent that the traditional desktop approach to web design cannot provide a satisfactory mobile experience. And this is where Responsive Web Design comes in. Responsive Web Design automatically adapts the content of a website to the screen size of your iPad, iPhone, dektop screen or even a huge flatscreen TV.
When did responsive design go mainstream? With Ethan Marcotte's groundbreaking article ‘Responsive Web Design’. He demanded a rethink. We have to stop making the web behave like print design. Despite the fact that there are many similarities between print and the web as media, we have to bear in mind that “the web is inherently an unstable medium”, with one specific characteristic: it does not own a fixed size.
Brad Frost has genuinely visualized the problem
Image by Brad Frost
Having said all that, it might be help to show a few examples. Take the following websites and check if they are responsive is by resizing the browser window. Grab the bottom-right corner and move it around with your mouse.
- Ethanmarcotte.com: of course the first website I would like to mention is Ethan Marcotte’s website, coiner of the phrase “Responsive Web Design” in 2010. A simple and straight to the point responsive website.
- The Boston Globe: the Boston Globe is the largest responsive website to date. It manages loads of content easily, keeping it intuitive and accessible from any kind of device.
- Steve Fisher: Steve is a user experience designer. His website shows how you can play around with a responsive website. For example, have a look at Steve’s face from the different devices!
- Amazee Labs: last but not least, our wonderful website is also responsive! Therefore you can easily access it from your computer at work, from your mobile device or ipad/tablet.
Responsive Web Design teaches us that rows can become columns and viceversa; a menu bar can become a drop down bar, and videos and pictures can be resized depending on the size of the screen we access the website. Of course there is some technical magic behind all these features, but it’s all worth it!
Going back to our mobile devices, Gartner has predicted that in 2013 they will soon overcome desktop devices as the most common place to access the web. According to Sam, we need to keep Responsive Web Design principles in our mind and start treating the web as its own medium, designing for mobile first and building our sites progressively. Only in this way we will be able to build websites that are best viewed in any web enabled device.
Hooray, we are happy to announce the launch of our latest project. Get Active is a fundraising project of the Biovision Foundation, a charitable organization which aims to improve the life for people in Africa while conserving the environment as the basis for all life.
Getactive.ch is a fundraising platform with the objective to raise money through a series of activities suggested by the community. The goal of the first campaign is to reach CHF 10,000 by April 2013 in order to help and support farmers triple their harvest using the push-pull method. But how can YOU get active and why?
There are three options to get started:
- Finding an activity to support
- Starting your own
Developing this platform, we could draw from our expertise in community and fundraising solutions. Implementation was done using Drupal 7, including organic groups, commerce and i18n.
So, have you found your activity yet? The platform is waiting!