NavLax

Thu, 23 May 2013 12:26:58 +0000

«NavLax» is my take on the beautiful navigation concept of the Teehan+Lax agency website. It has been built to be fluid responsive and to work with ease on any mobile device with or without retina screen. The grid and the Flat-UI components are taken from my «Rapid Bootstrap». Please feel free to send me a link if you implemented it into one of your projects. Live Preview Download GitHub Credits Please support humans.txt (http://humanstxt.org/). It's an initiative for knowing the people behind a website. It's a TXT file that contains information about the different people who have contributed to building the website. NavLax: https://github.com/niklausgerber/NavLax Niklaus Gerber Twitter: @niklausgerber URL: http://niklausgerber.com Location: Bern, Switzerland Licences «NavLax» by Niklaus Gerber is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Based on a work at github.com. Download, Fork, Commit. If you think you can make this better, please Download, Fork, & Commit. I'd love to see your ideas.

Rapid Bootstrap

Thu, 23 May 2013 12:26:57 +0000

In the last couple of month I tested countless bootstraps, frameworks and boilerplates. In my humble opinion most of them were just too bloated to really kickstart a project. I prefer to start with something bare bone and then add whatever is needed for the project. «Rapid Bootstrap» solves that problem for me. It contains a .htaccess file that is custom tailored to my needs. One Stylesheet containing the most important elements you would run across in a web project, including a super simple fluid grid system. Also I added classes for fluid iFrame embeds and optimized all hyperlinks for touch devices. Besides the latest jQuery-Framework I also added the ingenious retina.js, a high-resolution image swapper. This will make sure your images also stay crisp on any retina display. «Rapid Bootstrap» is especially built for Hammer. This nifty little tool by Riot can help you to build a static HTML site even faster. If you don't own a copy of hammer you will find everything processed in the «Build» folder. «Rapid Bootstrap» also will make sure, that you have beautiful typography with high readability for desktop-, notebook-, tablet- and mobile-devices. Why am I giving it away? I think sharing concepts and ideas with the community is important and so far there was no bootstrap that was covering all my needs. For me it is a perfect way to kick off a new project and I really hope it is as helpful to you. It is not much but still a good starting point. Live Preview Download GitHub Credits Please support humans.txt (http://humanstxt.org/). It's an initiative for knowing the people behind a website. It's a TXT file that contains information about the different people who have contributed to building the website. Bootstrap: https://github.com/niklausgerber/Rapid-Bootstrap Niklaus Gerber Twitter: @niklausgerber URL: http://niklausgerber.com Location: Bern, Switzerland Licences «Rapid Bootstrap» by Niklaus Gerber is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Based on a work at github.com. Download, Fork, Commit. If you think you can make this better, please Download, Fork, & Commit. I'd love to see your ideas.

Responsive Google or Bing maps

Thu, 23 May 2013 12:26:57 +0000

Apparently a lot of developers struggle to embed Google or Bing maps in responsive designs. As far I am concerned you can solve this with a very easy CSS technique. CSS Make sure you include the following CSS code on your website. /* Flexible iFrame */ .Flexible-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .Flexible-container iframe, .Flexible-container object, .Flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } HTML Place following HTML Code directly in your HTML .

Season's Greetings

Thu, 23 May 2013 12:26:56 +0000

Enjoy this free X-Mas background for your desktop. My little gift to you all. Holiday greetings and best wishes for a happy and healthy New Year.

Tilt-shift is the new black

Thu, 23 May 2013 12:26:56 +0000

My suggested reading list for all web designers for this holiday season

Thu, 23 May 2013 12:26:55 +0000

A Practical Guide to Designing the Invisible by Robert Mills. It will change the way you tackle your next web design project. You will have a hard time putting it down. Go get it! A Practical Guide to Information Architecture by Donna Spencer. Good information architecture is hard to master. This book is like a super fast crash course. You will learn a lot in no time and Donna Spencer is a hell of a writer. Go buy it! A Practical Guide to Designing for the Web by Mark Boulton. I think if Mark Boulton takes time to write anything, it will be worth your time. It covers pretty much anything you need to know to design something beautiful for the web. Highly recommended. Go read it! Guidelines for Online Success by Rob Ford and Julius Wiedemann. Sometimes I would love to rub the content of this book into some clients faces. The featured projects are very inspiring and the Dos and Don'ts will help you to build better websites. The web designers picture book. Go look at it! Guidelines for Online Success by Rob Ford and Julius Wiedemann. If you don't own them yet, they just might be the perfect Christmas gift for you. The books feature best practices and innovative design techniques for designers and Web developers. They cover both basics and sophisticated tips and advice from experts of the industry. Go find someone to buy them for you! The elements for content strategy by Erin Kissane. If I only had this book some years ago. A good content strategy will define anything you do for the web. Read it, reread it and read it once more. A must if you are designing for the web professionally. Go shop it! Responsive web design by Ethan Marcotte. Responsive web design is still the latest thing. Doing it well is not easy but with this book you will have a head start. It will cover to most important things you need to know about grids, flexible content and media queries. A fantastic read. Own it! Mobile first by Luke Wroblewski. Rock solid knowledge from the former Yahoo! design architect Luke Wroblewski. It is the complete strategic guide to mobile web design. Purchase it! Having any suggestions for some good reads for me? Please comment and let me know! Very much appreciated.

Fifty Shades of Grey

Thu, 23 May 2013 12:26:53 +0000

Apple Cards checkout (disaster)

Thu, 23 May 2013 12:26:52 +0000

Today I downloaded the Apple Cards App to my iPad and decided to send my girlfriend a little card as a surprise. It was very easy to pick a design I liked, to add a nice photo and to edit the text. In no time my card was ready and I was excited to send it of to the printing shop. With the connection to my address book it took only a moment to fill in her and my details. I checked my work one last time and hit the order button. I had to login to my AppStore account so the order could be processed. The app started to upload the card and everything looked promising. After the uploading was done following error message popped up: There was an error in the App Store. Please try again later. I know things can go bump. I closed the app, reconnected to the wireless and gave it another try. There was an error in the App Store. Please try again later. At this point I was slightly frustrated. I headed over to Google to see what I could find about this issue. Most threads stated, that you should reverify your credit card information and billing details. After doing that I gave it another try. There was an error in the App Store. Please try again later. Still nothing had changed. My last resort was to restart my iPad and give it one last try. There was an error in the App Store. Please try again later. So I gave up. For this week there won't be any card for my girlfriend. As I carried on with work I saw that I now received 4 order confirmations for this very card. Clever me immediately headed over to my Apple account to cancel the orders. Unfortunately this is not valid for this Apple product. Once ordered there is no turning back. As a last resort I called the Apple help desk. The response time was very quick and the consultant very friendly. I explained him what happened and he told me that he won't be able to help me because it took me longer than 90 minutes to contact Apple. After some back and forth I could proof to him, that I actually called within 30 minutes after completing the ordering process. He told me that he will look into it and write me an email the moment he knows more. Three hours later I received a mail stating that the cards have been printed and will be dispatched today and that Apple can't do anything about this issue. For the moment they are also not willing to reimburse me for the three cards that I didn't want to send out. In my opinion it is a disaster to implement such an error message into an App and to tell the customer to try again. Besides feeling a bit silly that my card will arrive four times in a row I also have no chance to get my money back. I am very disappointed that Apple has no interest to resolve this issue for me in any way. So if you are giving Apple Cards a try and you will get the same error message, be careful. Your card might be already on the way. Update: 12th of November at 16:11 Apple just got back to me again. They actually will refund me the other three cards. Thank you Apple - that is how it is done. Now I just have to explain my girlfriend why she will get the same card four times. But that will be another story.

Redesigning niklausgerber.com

Thu, 23 May 2013 12:26:52 +0000

In March 2012 I migrated niklausgerber.com to Kirby CMS and built my second fully responsive website. I will never regret switching to Kirby. However, after six months there were several things I did not like about the redesign. The art directed blog posts were very beautiful but it was a lot of work to prepare those publications. Also the loading speed suffered on mobile devices. The typography was good but I wanted to enhance it even further. Also, the grid system I used was very bulky. Furthermore since I used loads of social plugins which slowed down my site considerably. Some weeks ago I decided to redo the whole site from scratch. Before I started I wrote down all the goals I wanted to achieve. The Manifest The website must work on any screen size from mobile to big desktop screens. Everything which is not absolutely necessary for a good user experience must be removed. High readability is key. No CSS imports. Only one CSS file. Everything must be handled with media queries. (ie. no JavaScript can be used for the responsive layout) Cookies and request headers should be as small as possible and an HTTP request should fit into a single packet. Resources must be fetched asynchronously to prevent those resources from blocking the page load. Minimized HTML, CSS and JavaScript. SEO and a proper RSS-Feed is a must. So what did I do to stick with the manifest? First of all I stripped my header file. I kicked out all the META-Tags which are not absolutely necessary, removed the Open Graph tags and got rid of the Dublin Core® Metadata. Actually I liked them all and it had some positive impact on my site but they were not absolutely necessary. Getting it responsive Since the new site is a single column template it was very easy to get it to be fully responsive. The whole site is in a container DIV and the CSS media queries handle the rest. #container { margin: 0 auto; width: 660px; } The container is 660px wide. This gives me a perfect line length on bigger screens and the content fits on an iPad screen in portrait mode. This reduces the amount of media queries I have to execute. Basically I am using three media queries. Maximal width of 767 pixels for desktop computers. @media screen and (max-width: 767px){ body { font-size: 1.12500em; } } A width between 312 pixels and 767 pixels for iPhone landscape and up. @media screen and (min-width: 321px) and (max-width: 767px){ #container { max-width:90%; } h1 { font-size: 2.61111em; line-height: 1.14894em; margin-top: 1.1489em; margin-bottom: 0.5745em; } h2 { font-size: 1.61111em; line-height: 1.86207em; margin-top: 0.931emm; margin-bottom: 0em; } small, aside { font-size: 0.61111em; } #previous, #next { display: none !important; visibility: hidden; } } The typography gets adapted to the matching screen size. Also I removed the «Previous Article» and «Next Article» navigation from the mobile version. Maximal width of 320 pixels for iPhone portrait or smaller. @media screen and (max-width: 320px){ #container { max-width:90%; } nav li { padding: 0; margin: 0 0.5em; } #previous, #next { display: none !important; visibility: hidden; } } Here also the article navigation has been removed and the padding of the main navigation is a tad smaller so it fits on mobile screens. Another nice touch was to make the click area of links bigger. Links don’t only exist in navigations, and inline links can be tricky to click accurately. Mobile users benefit the most from an increased click area. p a { margin: -.5em; padding: .5em; position: relative; } The position is relative due to a strange browser bug that doesn’t respect the right hand side of the click area if the position of the link is static. Responsive design test The article navigation I thought it would be a nice touch to having a sticky article navigation on each side of the screen. First I wanted to do it completely in CSS3 but decided to use jQuery to cover a wider range of browsers. To speed up the switch between articles I used a nifty little HTML5 feature. Prefetching allows the browser to download another page or asset in the background. This is a great thing for my paginated blog pages. Another thing to note is that Google Chrome does not use the pre-fetch attribute and uses pre-render instead. This means that you have to implement both the prefetch and the prerender commands simultaneously. CloudFlare I am huge fan of CloudFlare. If you don't know the service you must give it a spin. CloudFlare protects and accelerates any website online. Once your website is part of the CloudFlare community, its web traffic is routed through their intelligent global network. They automatically optimize the delivery of your web pages so your visitors get the fastest page load times and best performance. They also block threats and limit abusive bots and crawlers from wasting your bandwidth and server resources. The result: CloudFlare-powered websites see a significant improvement in performance while reducing the likelihood of spam and other attacks. It takes you about five minutes to get your site routed through CloudFlare and the service is free. The service offers some nice features I couldn't live without nowadays. What I really like about CloudFlare, that it is automatically minifies HTML, CSS and JavaScript. This means I can work with properly structured documents, but once I uploaded them onto the server CloudFlare will minify them immediately. Moreover I hate spammers and I think there is a special circle reserved for them in hell. Therefore I am very careful where I show my address details and especially my e-mail address. By enabling Email Address Obfuscation they will encrypt email addresses on your web page from bots, while keeping them visible to humans. Also you can use special server side exclude tags. Sensitive content on your website will be visible to real visitors but will be hidden from suspicious visitors and evil bots. I use this for all my contact details.

My sensitive paragraph

Last but not least I use the service to automatically insert my Google Analytics ID on all pages. CloudFlare makes sure I am always using the latest tags and includes them automatically on any page requests. There is plenty of other nice stuff. Just check it out: www.cloudflare.com/plans. My website got safer and I've got an extra 7 points on Google Pagespeed. Reducing content size Besides stripping any line of unnecessary code and having all the HTML, CSS and JavaScript minified I was very careful how I used other content. Even though I am using jQuery for the blog pagination I only call it when needed. Another important thing was to optimize all the images. There are plenty of ways to do it but I am a big fan of ImageOptim. ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. Also, I did stop using official share buttons. Calling JavaScript and Images from external servers slows down the page speed. All the social media sharing options you will find on my site are regular hyperlinks. Twitter sharing URL http://twitter.com/share?url=YOUR-URL&text=YOUR-TEXT@TWITTER-HANDLE Google+ sharing URL https://plus.google.com/share?url=YOUR-URL Facebook sharing URL http://www.facebook.com/sharer.php?u=YOUR-URL With all those changes I got my Google PageSpeed from 91 to 98 points and managed to cover all the requirements from the manifest. Some final touche On the Blog overview page I added the estimated reading time for each article. Time is precious and sometimes it would be just great to know if it is worth starting to read a blog article right now, or to save it for later. The Reading Time Plugin of Roy Lodder makes it easy to display the estimated time to read any text in Kirby. I have to say that I am very satisfied with the result of the redesign and hope you enjoy the new experience as well. If you have any ideas how to make things better, questions about the techniques used, or any other inputs then please leave a comment. I would love to know what you think.

Remembering Steve Jobs

Thu, 23 May 2013 12:26:52 +0000