Blogs

By Sascha Eggenberger 25th February 2013

Allow me to take your fear. Designing for Retina displays isn't hard but there are a few things you should know and keep in mind.

Use vectors

Don't create bitmap graphics when you are designing for Retina. Why? It can be that you have to up- & downscale your document during the design process. You don't want to end up with blurred graphics, right?
 
Instead create simple vectors directly in Photoshop with the shape or the free-form pen tool. For more complex graphics I recommend you use an external graphic tool like Illustrator. For less complex vector graphics I use Sketch.
 

Don't mix resolutions

The biggest problem with different pixels per inch (PPI) settings for PSD documents appears when you copy layer styles between documents. Imagine you add a 2px border to a layer on a 72 PPI document and you want to transform the style to a document with 163 PPI settings, it will automatically scale up. So the only way to prevent this from happening is to use the default 72 PPI for all documents.
Note: There's a big difference between print and web design - for print design PPI is really important - but in web design is not.
 

Designing @1× or @2×? It is up to you!

There is no explicit advantage to starting your design at @1× over starting at @2×. I prefer building the initial design @1× and scale it up later to @2× for some fine tuning.
 

Use Slicy for the export

I'm a huge fan of the tiny but yet powerful tool called Slicy. You can easily export @1× and @2× graphics at once - and save a lot of time. It doesn't matter if you start designing @1× or @2×, with ease Slicy can magically enlarge your vectors and layer styles or it can fill in missing @1× versions.
 
 

In this week's issue we take a look at a few topics which are close to our heart. Enjoy!

Drupal

OSTraining: The State of Drupal 8 - After Feature Freeze
Steve Burge, once again, dedicated a blog post to Drupal 8 and its current state.

Drupal motion: Drupal Code Base
While remaining on the subject - here is are some stats which compare Drupal 8's code base to its predecessors.

Technology

The Verge: I used Google Glass: the future, with monthly updates

Besides Sony's PlayStation 4 announcement, Google's Glass preview was probably the gadget story of the week.

Food for thought

37signals: When culture turns into policy
A short and precise reminder where the line between corporate culture and policy lies.

Responsive Web Design

.net magazine: RWD: just getting started
Dennis Odell makes the point that responsive design is still in its early days but nevertheless its future is bright.

By Daniel Truninger 20th February 2013 Business

Finally: By May 1st we will be moving within Zurich West into a beautiful and spacious office. Besides being very excited, we are currently on the look out for a friendly subleaser.

Here are some cornerstones of your possible new office:

Location

  • In the heart of the Zurich West
  • Public transport services are in walking distance

Office space

  • 93m² which are divided into two rooms (49m² & 44m²)
  • Freshly renovated with a hardwood floor
  • Own entrance
  • Tea kitchen
  • Access to the shared 100m² roof terrace with a stunning view over Zurich

Preferably you and your team have a similar mindset to us and complement our service offerings.

Interested? Contact Dania Gerhardt (+41 79 770 17 91 or dania [at] amazeelabs [dot] com) for more information!

In this week's issue we take a look at the increased significance of open-source, two responsive design related items and the battle between flat design and skeuomorphism. Enjoy!

Drupal

Four Kitchens: Responsive Images - a Drupal Implementation
Four Kitchens' front end wizard Chris Ruppel illustrates possibilities how to make your Drupal site's images responsive too.

Opinion

Metal Toad Media: Open Source is the New Microsoft
Joaquin Lippincott argues that the phrase "no one gets fired for choosing Microsoft" needs to be updated.

Design

Sacha Greif: Flat Pixels - The Battle Between Flat Design And Skeuomorphism
Currently the world appears to be divided into to two camps - skeuomorphism and flat design. Osaka based designer Sacha Greif explores the limitations of both design styles and gives his view on the subject.

White Paper

IT-unterstützte Einhaltung der Ad hoc-Publizitätsrichtlinien der SIX Swiss Exchange
Christoph Jaggi, project manager of our Alpine Select release, has published an extensive documentation on the topic of SIX Swiss Exchange compliant reporting of news and business figures based on our implementation. Unfortunately it is only available in German.

Food for thought

Responsive Typography Demo
This astonishing concept could take the responsiveness of a website to a new level.

By Gregory Gerhardt 13th February 2013 Business, Drupal

Alpine Select, one of our latest releases, was built for the eponymous and publicly listed investment company in co-operation with Christoph "Laser" Jaggi. He chose Amazee Labs as development partner and signed himself responsible for the requirement engineering and project management. 

The Drupal 7 combo might look "modest / conservative / business / discreet" at first but do not make the mistake to judge the book by its cover. The system is fully stock exchange compliant and takes the reporting duties to the edge with Twitter as an integral reporting channel. Read more about IT and SIX Swiss Exchange compliance in today's article on Inside IT. The new web presence consists of the following major requirements:

  • Display of the company profile
  • Automatic provision of the reporting infos, required by law, to the Swiss Stock Exchange Authorities. (e.g. Ad hoc release in compliance with SIX)
  • Generation of printable Monthly- and Quarterly Reports.
  • Provision of financial data to current and potential professional investors. (e.g. Performance charts)
Besides these features a full content migration, from a custom developed solution, had to be done in order to maintain the gap-less documentation for investors.
 
 
Despite serving a new industry with different requirements, as any other site we previously built, the toolset required from a Drupal point of view remained rather similar to our other releases. Rules, Views, Workbench, Simplenews and some use case specific custom code stand at the heart of this Drupal solution. As it is our practice we will contribute some of the custom code, in a more general use case, to the Drupal community.
 
For an in-depth view on SIX Swiss Exchange compliance using a Drupal application, refer to Christoph Jaggis excellent paper (German).
 
We wish Alpine Select and its shareholders a successful future.
 
By Daniel Truninger 12th February 2013 Events

Yesterday saw the first Web Monday of the year, hosted by Elance. It took place at The HUB with about 120 attendees joining for another familiar get-together with lots of networking and learning opportunities.

This edition featured talks by Steffen Hedebrandt (Elance), Reto Lämmler (Remember The Name) and Adrian Bührer (Skim).
 
Here are some impressions of the event:
 
 
 
 
 
 
Additional images, by Boris Baldinger, of this edition can be found in the dedicated Flickr set.
 
By Boris Baldinger 11th February 2013 Drupal

While working on LikeMag, one of our most recent releases, we were confronted with a challenge: loading ads during a Drupal AJAX (Asynchronous JavaScript and XML) call. This is how we solved it.

The issue

By definition synchronously loaded JavaScript can only add objects like files, content or ads to a page's structure until it is entirely rendered. An additional complexity that can occur while working with third-party advertising providers is that you can not control the performance of their infrastructure. Which means either you accept this risk or try finding a way to mitigate it. We went for the latter.

At this point it is important to stress that it is common practice for third party ads to use the document.write method which only works for the synchronous loading approach. To learn more about the synchronous and asynchronous loading of remote tags I suggest you read the article "synchronous vs. asynchronous tags - what’s the big deal?" on the krux blog. In our case however it became apparent that our solution had to include the asynchronous approach.

While researching possible solutions I found the following tools:

The issue with the the majority of them were, that active development or support wasn't visible, except for PostScribe. This solution offers the following features:

"Krux PostScribe enables the type of tag execution required by most ad formats in an easy-to-use-and-deploy format. It leverages innerHTML to ensure reliable, fast ad delivery."

"Unlike other innerHTML-based solutions (e.g., writeCapture, ControlJS, and OpenTag), Krux PostScribe seamlessly enables the “immediate writes” upon which most ad formats depend."

Which in plain English enables the quick rendering of the page to the user and allowing the ads to respond in their own time without reducing the user's experience.

How to use PostScribe

Download PostScribe directly from its github repository.

Include these files in your project:

/htmlParser/htmlParser.js
/postscribe.js

Here is a small example:

<div id="myAd"></div>
<script type="text/javascript">
  $(function() {
    postscribe('#myAd', '<script src="remote.js"><\script>');
  });
</script>

Our use case

As mentioned in the introduction this solution stems from LikeMag which, besides utilizing PostScribe, is a responsive website and uses the Isotope library to arrange items over the screen automatically depending on the viewport.

Since there are no free lunches on the web, LikeMag has to monetize too and one of their models is built around ads. So in order to deliver the perfect balance between content and ads for every viewport, we had to find a way to render the perfect amount after the identification. And that is moment the where PostScribe comes into play.

Instead of injecting the ads right into the Drupal view and slowing down the loading of the rest of the page, we just print the standard items. In a next step the system iterates over the items and adds the appropriate amount of ad containers to the content with jQuery. (These containers can be addressed with PostScribe, because PostScribe works best when the DOM is ready.)

LikeMag.com Ad

"But where is the AJAX you mentioned in the title?", I hear you cry. So let's talk about it right now. When we scroll down on LikeMag, which besides being responsive is a smart infinite scroll site too, new items will be loaded through an AJAX call. So here we can use PostScribe as we did before. The only thing that we have to check, is that we do not add ads to already "adified" content. In our case we can check if the view-item was already processed by Isotope.

Code from View, partially modified by isotope and postscribe

See the code as an example:

Drupal.behaviors.ViewsLoadMore = { attach: function(context, settings){
      if ($(context).hasClass('view')) {
        $isotope = $('.view-id-articles .view-content');
        $isotope.isotope('insert', $('.view-id-articles .view-content .views-row:not(.isotope-item)'), function(){
          isotop_load_more_init(settings);
          Drupal.behaviors.advertisment.loadads()
        });
      } else if ($(context).find("html").length == 1){
        // If it contains html, it is the first behavior call.
        isotop_load_more_init(settings)
      }
   }
  }
loadads: function(){      $('.view-articles .views-row.views-row-ad').once('postscribe',function(){
        if(typeof(cachebuster) == "undefined"){var cachebuster = Math.floor(Math.random()*10000000000)}
        if(typeof(dcopt) == "undefined"){var dcopt = "dcopt=ist;"} else {var dcopt = ""}
        if(typeof(tile) == "undefined"){var tile = 1} else {tile++}
        var string = '<scr'+'ipt src="http://ad-emea.doubleclick.net/adj/likemag.ch/;' + dcopt + ';tile=' + tile + ';sz=300x250;ord=' + cachebuster + '?"></scr'+'ipt>';
        postscribe($(this), string);
      });
    }

As you can see we process only the newly loaded items from the Drupal view and exclude the already processed items.

With this solution we are very flexible to deliver the page content as fast as we can while not depending on the speed of an ad-provider.

 

It is Saturday and hence time for our weekly reflection. Unsurprisingly two major events contributed to the majority of this week's issue. Enjoy!

Drupal

DrupalCon Sydney 2013: Keynote: Dries Buytaert

This week saw the first DrupalCon take place in Down Under. Here is the traditional keynote by Drupal Founder Dries Buytaert which takes a look at Drupal 8.

Social Media

Deadspin: The Ravens Won The “Fuck” Bowl, Too: An Analysis Of Twitter Profanity During The Super Bowl
One of the great things about social media is that many contributions are made in the heat of the moment. Ever wondered how often the F Word was mentioned at key moment of this year's Super Bowl?

Marketing Land: Game Over: Twitter Mentioned In 50% Of Super Bowl Commercials, Facebook Only 8%, Google+ Shut Out
The Super Bowl ads are a good indication to see how important a social network is to those companies' strategy. There is no question about the flavor of the moment.

Responsive Design

Template Monster: Responsive Web Design Interactive Infographic
This topic is close to our heart. If you need some further facts and figures on Responsive Web Design this interactive infographic is something for you. 

Jobs

Working with Amazee Labs
Want to be a part of our team? Check out our latest opening.

By Daniel Truninger 4th February 2013 Team

If you were to draw a Venn diagram of a web veteran, a cosmopolitan and an adventurer the intersection of these three circles would represent our new team member, Dagmar Muth.

Dagmar holds a master in management and has earned her stripes by working as product manager for web companies Xing and local.ch. Naturally she joins us as a project manager.
 
When not organizing time, budgets and scopes, she can be found grinding the Swiss hilltops with her outdoor equipment and trotting the globe.
 
Welcome to the A-team, Dagmar!
 

Dear reader, yet another week has passed and it is time to reflect on the five stories which stood out for us this week. Enjoy!

Drupal

Dries Buytaert: Radio France sponsors Spark Drupal 7 work
Contributions to Drupal or any other open-source project are vital for their survival and progression. Besides individuals devoting time and work, organisations can support the cause by dedicating workforce or simply by sponsoring to create a lasting impact on the community. Here is an example of Radio France doing the latter.

Social Networks

Tweet ping
Paris based front-end developer Franck Ernewein has created a neat real time visualisation of Twitter's global activity.

Opinion

Brad Frost: Performance As Design
The second front-end developer to contribute to this week's issue is the respected Brad Frost, who makes a point that performance optimisation should not neglect the effect of a design can have on it.

Development

.net magazine: 5 things you didn't know Sublime Text 2 could do
Remember our three part series on Sublime Text 2? If you enjoyed it this article might be something for you.

Zurich

Open Device Lab
In a previous issue we applauded the initiative by a Helsinki based agency to help developers test their responsive websites on physical devices. Now Zurich has got an Open Device Labs too by courtesy of Flipnation.

Pages

Subscribe to Amazee Labs Blog

Latest comments

  • Penting, Panas, Perlu dan Seruu's picture

    I know this web page presents quality based articles or reviews and additional data, is there any other web page which provides these data in quality?

    Penting, Panas,...
  • Margahayuland's picture

    Incredible quest there. What happened after? Take care!

    Margahayuland
  • Margahayuland's picture

    What concerning the safety? How do you make sure no person hits your provider with out the iphone?

    Margahayuland