Kiss Blog Feed We build beautiful digital products to make your life easier and develop efficient social campaigns to help your business grow. 2018-04-19 http://wearekiss.com/blog/rss <![CDATA[Inspect Facebook Platform Apps with AppInspector]]> appinspector 2012-07-18 2012-07-18 Hidden Information

Did you know you can easily lookup where a facebook application is hosted, how many people are using it and even more?

All this information is accessable by anyone who knows how to look for it - it takes a quick look at the source of the Facebook page the app is displayed within and you have the information. If you know where you have to look for it.

For non-techies and lazy people

We often lookup where a facebook application is hosted, because this way you are often able to find out which agency developed an application. But if you do this repeatedly, its very tiresome.

So we created AppInspector - a tool which crawls for information about the app you are currently watching at with only one mouse click.

AppInspector Screenshot

Installation and Usage

The "installation" of AppInspector is simple.

Drag this to your bookmarks bar and you're done: AppInspector

You can click the AppInspector Button in your bookmarks bar on any Fanpage Tab App or Full Canvas Application.

Feedback welcome

As usual - the feedback from our users is very important for us.
So if you notice any bugs, or have ideas to improve this, drop us a line.

Have fun with it!

]]>
<![CDATA[SimpLESS Update 1.4]]> simpless-update-14 2012-07-03 2012-07-03 Six month - many things happened in the LESS community, including the release of Twitter Bootstrap v2, which sadly was not supported by the LESS version bundled in SimpLESS 1.3. We got many feature requests and a few bug reports which we wanted to address with the current SimpLESS update 1.4.

List of changes and updates

UI redesign

We took some time to improve the SimpLESS' UI. You will notice that the window size increased a bit to give you even more information about your file compilation.
SimpLESS will now display the full paths to LESS and CSS files you are working on to avoid any kind of confusion. Options like CSS minification, prefixing or “showing love” can now be toggled directly from the UI.

Options are no longer part of the LESS code

In the older versions of SimpLESS, things like minification had to be activated or deactivated via a comment inside the LESS file. That belongs to the past now with SimpLESS v1.4 you simply switch options via UI directly in your list of files.
SimpLESS remembers all settings for every file and as long as the LESS file remains the same path you can even remove it from the list.

Connection to prefixr.com

Some of our users thought it would be nice to have automatic CSS vendor prefixing for CSS3 properties in SimpLESS. Creating a prefixing engine inside SimpLESS would at least result in a twice as big codebase. That’s why we decided to connect SimpLESS to the great NetTuts+ Prefixr app by Jeffery Way.
Simply activate the prefixr option in SimpLESS and you’re done! Your LESS code will be sent to prefixr.com, the app applies the vendor prefixes where needed and the returned CSS-code will be saved in your CSS file. Notice that depending on the size of your CSS code and the speed of your internet connection this might add a few seconds to your overall compilation time!
Note: This is currently not available on osX, due to bugs in the Titanium framework. Luckily the guys from TideSDK have taken over and we hopefully can bring an update, soon.

Use the most recent LESS version. Forever.

Let’s be honest: It was really disappointing for a lot of users to wait for the next SimpLESS update everytime a new LESS version was released.
In SimpLESS 1.4, a whole new automatic LESS updater is included that will look for the recent LESS version on lesscss.org. If available you can download all new versions directly into SimpLESS. And the best, you only have to click one time to make sure SimpLESS will download and use the most recent LESS version forever.

Wordpress

The CSS minification in SimpLESS 1.3 removed all CSS-comments from the compiled result. It turned out that this was a bad solution for all Wordpress developers out there, since Wordpress requires the style.css file inside a template folder to start with a certain CSS comment otherwise the template wouldn't be recognized.
With SimpLESS 1.4 we’ll preserve the first CSS comment if it’s placed at the very beginning of the file.

Bugfixes

We fixed them all. For now. If you find new bugs or have new feature requests, please contact us via Twitter @WeAreKiss or via Mail hello@wearekiss.com!

Last but not least we want to thank the great community out there again for all your support and lovely messages. You’re absolutely great :)

Enough talking. Go and get SimpLESS now!

Did we even say SimpLESS is available for free? No? Yes, it’s true, SimpLESS is and always will be free.

]]>
<![CDATA[SpritePad simply creates your CSS sprites in seconds]]> spritepad-for-css-sprites 2012-03-12 2012-03-12 Enough is enough, it’s time for something new.

Developers shouldn’t be forced to create their CSS sprites per hand in Photoshop. No developer should do this kind of assembly-line work, adding CSS snippets one after another to use sprites in their websites. There has to be a better way. Online. In the web. Accessible for everyone.

There are already a couple of apps creating CSS sprites. However, most of them need to be installed on your computer (most are mac apps only) and aren't really comfortable to work with. We have been carrying around with the idea of a web application to build CSS sprites for quite a while now and during the last Christmas holidays we decided to give it a try.

Short retrospect:
What exactly are CSS sprites once again?

As a professional web developer you’ll already have come across CSS sprites and are hopefully using them. For the rest of the world we have reduced all important and unimportand infos to this short list:

CSS sprites assemble a technique from the first days of computer games. These games combined many images into one big image to save data overhead, because memory was very limited.
Today, we don’t really have these memory problems anymore, but CSS sprites are still very effective in speeding up your website’s loading times because of another point: HTTP overhead.

So what does HTTP overhead mean?

Every piece of a website needs to be requested from the server and there is more than just content and documents. There is a relatively large chunk of so called HTTP protocol data telling the server what exactly is needed, who you are, which browser you’re using and many more.
On the other side, the server doesn’t only send the requested content, but also a lot of HTTP protocol information again, e.g. it’s server type, cookies, how long a file should be cached, when it has been changed the last time and so on.

The point is: It’s possible that when you request a tiny image from the server, the HTTP protocol data might be larger than the image itself!

That’s where CSS sprites come into the picture. CSS sprites combine all small images into one big image. This means that only one request will be sent to the server and all that HTTP protocol data will also be transferred once. Plus: The browser only needs to establish one server connection to get all the information.

There’s a new player in town: SpritePad

Easily drag and drop your images from your computer onto the SpritePad canvas. Move your images around, rearrange them and be sure SpritePad automatically creates the appropriate CSS structure for you. If you are happy with your spritemap, you can always download all necessary data including one PNG file and all CSS code with just one click.

If you decide to create yourself a free SpritePad account you’re able to save your CSS sprites in the cloud and keep them as editable sprites online. Access them from wherever and whenever you want.

There is even more behind the doors: SpritePad’s premium version allows you to save an unlimited amount of CSS sprites in the cloud and share them within your team. Collaboration made easy! Besides, premium also activates SpritePad’s auto-alignment feature, a one-click-to-satisfaction button for all your needs. Just drop all your images you need onto the canvas and hit the auto-alignment button. SpritePad automatically aligns all your images in the best possible way to save as much space as possible, creating the smallest CSS sprite possible.

Well, enough talk!

Go ahead, test SpritePad yourself and tell us what you think. We can’t wait to see how you’ll work with SpritePad and how it’s gonna change your development process.

Visit SpritePad’s Website now!

]]>
<![CDATA[SimpLESS Update 1.3]]> simpless-update-13 2011-12-22 2011-12-22 At the beginning we thought we wouldn’t release this update in 2011, since we’re currently working on a couple of projects (including our own web-app) and just have no time (I think everybody knows how this feels like).
But working on these projects requires working with SimpLESS. Integrate the missing features and fix the bugs were just necessary so we took a few (more) extra hours to get it all done. Here we go:

Bugfixes

We fixed a couple of bugs which were reported by our users:

  • a bug where an empty LESS file makes SimpLESS crash
  • a bug in the restore system, loosing files from the index randomly on application exit
  • an annoying bug where SimpLESS places "app://com.wearekiss.simpless.open/" in front of URLs.
  • ...a couple of other things I currently don’t remember. Take a look at github if you want to know more :P

New features

Now the more interesting part: New Features!

  • we implemented LESS parser 1.1.6 with all its new capabilities
  • we added “recompile” and “remove” buttons to the file list
  • we removed the “restore” button and are restoring sessions by default now
  • we implemented backwards @import observation. You just have to index the “parent” LESS file now and SimpLESS detects changes on the imported files - regardless how much the files are nested.
  • compiled CSS files are now minified by default, using some cool regex voodo the YUI compressor way.

A few notes

Some have mentioned (and it was planned by us as well) to include an auto prefixer for CSS3 vendor prefixes in SimpLESS 1.3. Sadly we couldn’t implement Lea Verou’s great “Prefix Free” since it is exclusively made for browsers. If you have a javascript library at hand that can add prefixes for any browser vendor, please tell us!
Join the discussion if we should rely on an online service for this task on github.

No minification in compiled CSS files

If you don’t want your CSS files to be minified by SimpLESS, add the following LESS comment somewhere in the file:

//simpless:!minify

To the linux guys

We had several complaints about SimpLESS not working that well on Ubuntu linux. We heard from Appcelerator having a SDK beta which should improve linux support for Titanium applications, but addressed issues which made it impossible to switch to the SDK beta (we suddenly don’t get a path for a file dropped on SimpLESS anymore, wtf!).

After all - it's just not working. If you have any ideas, then checkout our code from github and try your luck. We would be very happy to pull your code and make it finally working properly for Ubuntu 11.10.

Keep on communicating

Working with the community has been great so far - keep up the good communication and we’re sure we can collect and integrate some more cool features in upcoming versions of SimpLESS in 2012.

That’s it for now. We wish you a Merry Christmas and a happy new year!

]]>
<![CDATA[Christmas Time]]> christmas-time 2011-12-18 2011-12-18 Especially the last 2 weeks in November were a crazy tough time for the whole team. Here in Germany and throughout nearly the whole of Europe it is a common practice to celebrate the Advent time by counting the last days till Christmas eve. As a remnant of Christian practices we hang up arduously self-made advent calendars and open a door every single day starting on December 1st.

Why do I tell you this? - Because as you may expect it was part of our job to transfer this Advent calendar functionality into the social web and make it useful for brands and companies.

Powerful collaboration

Together with our long-term partner and friends at 247GRAD we created, designed and developed the beautiful TabMaker Advent Calendar application.

The application allows companies to setup their own Advent calendar directly on Facebook.

I can tell you in advance that it was a great story of success. On December 1st, just 2 weeks after publication, the number of installations was 4-place. The only way we marketed the app was via the 247GRAD fanpage and word-of-mouth advertising. Just incredible … have a look at all the different ways people used it:

How it works

The whole app consists of different pages depending on the plan you selected:

The free plan has a fangate, a calendar page and an image-lightview included. Companies can use this plan to promote their website by showing coupon codes or special daily deals. People need to become fans first before they can open up any doors.

The premium tab additionally allowed linking and the creation of sweepstakes and contests for every single day.

What's special

The hardest part of the development was to make sure the Advent calendar fits perfectly for every company. Everyone should be able to simply setup the calendar and customize it the way he/she wants.

What you can see here is our transparent calendar template. It doesn’t show you it's true beauty, until you add your individual calendar image. The whole calendar is designed to fit every style you want. Together with the user proofed TabMaker CMS it is child's play to setup a calendar yourself.

A very special one

Sad to say our favorite calendar couldn't be built with that app but is related to it: the Deutsche Bank Advent Calendar.

The basic structure and design is nearly the same as we use in our TabMaker app, but it's much more polished.

The design is 100% unique. Everything, what was worth customizing, is customized. It really makes you feel Christmas and also brings off a connection to the Deutsche Bank corporate design.

Welcome to a winter wonderland! Not only that it's already snowing, also the last button is covered with snow! We even designed new radio buttons! A cool and smart app without the use of flash! BAM!

Participate

After becoming a fan you've got the chance to win great prizes every week. Before I forget: In the final week you can win a Kindle and a € 200 Amazon coupon! Simply answer the daily questions and collect up to 5 stars per day.

Collect bonus stars

On "Leaderboard" you can see what your current position is and how good your chances are. If you answered all questions right but aren't under the first three, there is only one way to improve your rank: Collect some bonus stars.

With your personal link you can invite friends and if they participate too, you'll get a bonus star for each of them. You can collect up to 10 bonus stars every week and improve your chances to win.

This smart function also supports the mouth-to-mouth advertising in Facebook and helps to promote the app. Win win!

Take part and take part

One thing that was really important for us was how we deal with people's Facebook rights and permissions. We know from our personal experience that normally if you click on a sweepstake or contest tab, you will be directly asked for permission without even knowing what the contest or sweepstake is about. For us this is a big and yet unheeded barrier, so there should be a big difference between take part and take part.

We allow people to open a door every day and answer those questions without needing their permission. Only if you really want to participate and win those presents we need your permission to save your profile and your collected stars. Simple isn't it? - Why there are so many apps that didn't focus on this difference?

]]>
<![CDATA[Make better fanpages]]> makebetterfanpages 2011-11-23 2011-11-23 makebetterfanpages.com to honor the best fanpages on Facebook.]]>

Technical possibilities

This year, Facebook changed their mechanism for creating custom fanpage tabs from the very limited FBML
to iFrames.
This means you can display every kind of content you want. No need for nasty click-to-activate YouTube videos or flash animations. Finally we can use powerful javascript frameworks like jQuery or AJAX to achieve complex and dynamic interfaces.

Today you don't even need the full technical experience of a digital agency for building such tabs. There are plenty of free and easy-to-use tools to create all kinds of fanpage tabs you can imagine. One good example is the powerful Tabmaker from our partners over at 247GRAD. Despite that, a surprisingly small amount of company fanpages generate really good experiences for their visitors and fans.
Even most big players, with marketing etats up to millions of euros, have missed to switch over.

There is light in the dark

Well, we might be a bit pessimistic here...
but there ARE great experiences on Facebook. In fact there are a couple of pages with great ideas that just blew us away. The number of better made fanpages is growing every day.

To honor these really good Facebook fanpages out there, we decided to put together a little web gallery where we could curate these examples for eternity.
In case you need some inspiration, want to check out your branch or just want to see what’s already possible on Facebook - have a look at MakeBetterFanpages. We’ll try to publish at least one new entry every day.

Visit makebetterfanpages.com and have a look around - maybe you know some good Facebook pages we haven't listed today - don't hesitate, hit the submit button and see your fanpage listed!

...and if you are looking for experts realizing your next great Facebook experience - talk to us, we’ll see what we can do for you ;)

]]>
<![CDATA[A Retrospective: Ten Days SimpLESS]]> ten-days-simpless 2011-11-04 2011-11-04 We really worked hard to make SimpLESS (and our company website) a great experience for you, but we never could have imagined the number of positive reactions that came our way. It’s great to see there are so many web developers interested in SimpLESS.

Twitter simply rocks!

“Yes, of course there will be some mentions on Twitter ...” - This was our first thought about Twitter, but in reality it was quite different!

Actually, around 30% of the traffic came from twitter.

Everything started with Smashing Magazine who was one of the first who tweeted about SimpLESS. Several people picked it up and the insanity trip began.

Visits per day

The visitor counter peaked up nearly instantly.

During the first three days, there were over a hundred Twitter posts and more and more blog and gallery features. Our website got more than 5.000 visits and more importantly, we broke through our magic barrier of 1.000 downloads! There were tweets all over the globe, here are a few of our favorite ones:

The folks loved the idea of a simple tool to convert LESS files.

Today

The enthusiasm is still growing. We have already improved SimpLESS and launched version 1.2.
Visits per day range from 500 on the weekend days to over 2000 on monday. Downloads broke the 2.000 mark and more and more people out there send us their feedback and collaborate with us.

Thank you

We can only say thank you so much your for your support, commitment and all of your kind words. Right now, we are trying our hardest to make SimpLESS even better. We will integrate more useful features and eliminate the last bugs so everybody out there can enjoy SimpLESS at it’s best!

You can follow us on Twitter @We_Are_Kiss or become a fan on Facebook to be up-to-date and stay in contact with us!

Special thanks to: designmadeingermany, WebResourcesDepot, Smashing Magazine, WebAppers, DesignFridge, CSS Awards, CSS Design Awards, Stuff and Nonsense, Design Delight, Inspiredology, WWWhat’s New, CSS Showcase and everyone we forgot :)

]]>
<![CDATA[SimpLESS Update 1.2 available]]> simpless-1.2 2011-10-31 2011-10-31 Changelog

- implemented a new drag&drop system.
- fixed a bug where a space in the filepath prevented SimpLESS from recognizing file updates.

Should work much more reliably now. You will notice it especially on linux and mac systems, where sometimes the app didn’t even recognize drops at all. Now it works very well and stable on these platforms.

- fixed a bug where the "show love" message was displayed when it shouldn’t
The CSS-comment now really only shows up if the button is activated. However, maybe you haven’t noticed it since you are leaving it active everytime anyway, aren’t you?! ;)

- improved compilation error checking
The app isn’t crashing silently anymore if something exceptional happens during compiling the CSS document.

- improved contrast of colors of error messages in the UI
Errors thrown by the compiler where very hard to read. Not anymore.

- included LESS parser 1.1.4
On the LESS website only 1.1.3 is offered for download, but on Github 1.1.4 was already marked stable, we implemented it.

- added @import functionality
This was our major bug. SimpLESS now handles the @import statement correctly - including and compiling LESS or simply including CSS files; both in compiling time.

- if minimizing the app, it goes to the tray
This was a user requested feature, which we found very useful for everybody. The app minimizes to the system tray now instead of to the taskbar. It also adds an icon to the tray which indicates if compiling was successful (green) or not (red). In case of an error you can hover over the icon to get information about exactly what went wrong. A click on the icon shows the application window again. This feature works out of the box on windows and linux - sadly it needs some tweaking by the user on mac - read more about minimizing to the tray on osX below.

- added a "restore last session" button\br| This feature came to our mind after having worked with SimpLESS for quite a while now. It _really_ annoys us to re-drop all of the less files of the current project again after starting SimpLESS. Now, SimpLESS remembers all the less files from the last session and allows you to re-add them with a single click during application startup.

- implemented an automatic update checker
Now there is a little routine built in, which pulls a textfile from our server and compares your current app-version with the one in the file. If there is an update available, the app informs you automatically.

Hiding the app from the dock on osX

We really tried to automate this for our mac users, but due to restrictions in either appcelerator or mac os we weren’t capable of doing this. Here is what mac users can do:

There is a file named “Info.plist” inside of every mac app which configures some mandatory things. You need to add an extra value to hide the app from the mac dock. We would love to do this automatically, but when we tried to write directly to the file inside our app every content inside the file gets lost and the app doesn’t work anymore :/ Simply follow these steps to edit the file on your own:

Right click (or CMD+click) on the app and choose “show package contents”

The finder will open up - showing a folder named “contents”. In there is the file “Info.plist” - open it with a text editor.

The editor will show an XML file with many <key> <string> pairs. Anywhere between these pairs (watch out: only insert this after a <string> and before a <key> tag because they belong to each other!) insert this pair:

<key>NSUIElement</key> <string>1</string>

Save the file - restart the app if its running and you will see: no dock icon :)

]]>
<![CDATA[SimpLESS helps you to easily write beautiful CSS]]> simpless 2011-10-24 2011-10-24 Good old CSS

The Cascading Style Sheet, or as most people know it CSS, was developed by the World Wide Web Consortium (W3C) and is part of the Internet Protocol Suite. CSS is mostly used to style web pages written in so called markup languages like HTML and XHTML.

CSS was designed to enable the separation of document content from document presentation to improve accessibility, provide more flexibility and enhance control.

So far so good. After it’s first official version published back in December 1996 we are currently working with the third version of CSS. CSS 3 brings along a whole new bunch of styling possibilities and for most of us a long cherished hope finally came true.

Simply achieve more with LESS

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo

So why did Alexis Sellier, more commonly known as cloudhead, develop LESS?
CSS really got better over time, but actually working with it just feels like back in 1996. It’s as simple as obvious - if you are using CSS and compare it to other modern languages you will miss things like dynamic behavior, use of variables and functions. CSS is the same lame language as 15 years ago only filled up with new styling possibilities.

We wanted a CSS that can keep up with our brains! We don’t want to type in the same statements again and again...

Alexis’ LESS is a dynamic stylesheet language which extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Why we need SimpLESS

Writing LESS could become the new way to style web pages. In comparison to CSS it’s lightning fast and as easy to learn as CSS. However, there is still one big issue: The web needs a CSS file to show your website as you want it to be.

Alexis also thought about that and because he is a smart guy, he gave us two possibilities how we can make LESS work:
  1. Embed a javascript file to our HTML-Code to transform our LESS-Code live into CSS in the browser.
  2. Run LESS via node.js on your server.

Both not really charming solutions because either you need to be a server professional or you will have extra effort and stress your websites loading speed.

That’s the point where SimpLESS enters the ring! SimpLESS is a small software running on your computer. It generates a 100% valid CSS document out of your *.less file. You’ll never ever have to think about tricky ways on how to use and integrate it to your website again!

Three simple steps

Using SimpLESS is that easy, even rookies can handle it! You can download SimpLESS for free for mac, linux and pc and simply install it as every other software you know.

  1. Start SimpLESS and drag & drop your project folder or LESS file onto the SimpLESS window.
  2. Write your LESS-Code with variables, mixins, operations and functions.
  3. Save your *.less file and you’re done! SimpLESS will take notice of that and compiles a 100% valid CSS document.
    No further steps, it’s that simple.

Give it a try! Visit wearekiss.com/simpless and download SimpLESS now!

Making it better, every single day!

We made SimpLESS open source to invite you to join the worldwide group of developers and take SimpLESS to the next level. There are many useful features we would like to add. Talk to us, share your ideas, we definitely need the creative exchange to make SimpLESS better!

Become a fan on Facebook, follow us on Twitter or simply write your message to hello@wearekiss.com.

]]>
<![CDATA[Kiss World, World Kiss]]> world-kiss-world 2011-10-24 2011-10-24 I would like to tell you about my little company.]]> We are Kiss

Kiss is an independent company creating beautiful high-quality products to make your life easier. The world calls us digital natives. I would say we are social and digital by nature. We strongly focus on communication and the troubles that came with it, which is reflected in our products. Our products are a result of difficulties experienced in the past and problems we are experiencing in current projects.

Collaboration

Current projects? — Yes, parallel to our work we develop efficient social campaigns to help brands, companies and agencies make their business grow. Our projects range from small promotional websites over Facebook fanpages and eCommerce systems to complete Social Media campaigns.

Our culture

For myself and the team, Kiss is more than just a job. It is our fulfillment of a long-cherished dream. We have great team coherence; our key to success. We do what we love, and our strong will to do it better the next day is the driving force behind all of our work. We never cease to get tired of learning and improving. We combine passion and knowledge with fun to simply achieve more, every single day!

Perhaps this won’t attract every single person in the world, but we have built some strong and long-lasting relationships with those who appreciate our dedication and our beliefs. We treat others as we would like to be treated. So talk to us, we’ll tell you what we think, maybe you’ll be surprised how open we are.

Jobs at Kiss

If you like what you see and have read so far you’ll maybe wanna join us and become part of our team? — All you need is a strong portfolio and an undaunted will to make things better! You will work totally autonomously. There will be no big boss watching and micro-managing you. Don’t be shy, we are constantly searching for talented people to strengthen our team!

Talk to us

We think good things come from good conversations. Let us hear your thoughts. We thrive on feedback. We need creative exchange to get new input and to take our work to the next level.

Do you like our new website and our new digital appearance? More importantly what don’t you like? Simply comment to this blog post or send us a message to hello@wearekiss.com

]]>