-
20-09-2011 13:07:01 1020concepts
For now, follow me on twitter to find out more: @1020concepts @mobilewebdesign @shortye
What I've been doing the last month.
04-11-2010 15:12:10 1020concepts, Persoonlijk
The last month was busy as hell. Found a new apartment, which means you need to move all the "meuk" (crap) you have. Fix some small problems in the new apartment (still working on that). Buy new stuff, be nice to my new house mate (Bart) and loads more.
There is a lot of working @ 1020concepts in the pipe-line. Really happy that things are picking up since I came back from my world trip.
Some projects I'm working on
- A Special Person, by Vincent van Onnembo
- Renee Wilson
- Advance Events, designing a new layout
- MetrixLab, updating the back-end and small changes
There is a lot more, post them real soon. This means I didn't found the time to design and update this blog or work on any of the other brilliant idea's I have. Still want to fix something for Browser fonts a overview of free css @font-face fonts, make a tribute to Jeffery Zeldman's famous quote; "To hell with bad browsers". Make a HTML5 boilerplate for Mobile like HTML5-Boilerplate by Paul Irish degrading or visa-versa.
Loads of stuff, but first things first, time to work some more
Google Analytics & Google Webmaster tools: Verification
24-09-2010 12:52:46 1020concepts
If you want to verify your website in Google webmaster tools via Google Analytics it's good to know that you should put the Analytics snippet in the <head> of your website. I normally put most of my code before the </body>, but that doesn't seem to work, as Google Webmaster doesn't find the snippet And be sure to use the updated async Analystics snippet.
Matthijs van Roon, navigation update (fancybox + jcarousel = inline)
05-08-2010 14:15:50 1020concepts
For a new client of my, Matthijs van Roon, an Amsterdam based commercial photographer, I did an update on his website navigation. Before he loaded the every image on a new page. He wanted them to load without a page refresh.
The new navigation is a combination of Fancybox and jCarousel. The photos are loaded inside the page without a refresh, no AJAX as fancybox use image preloader and doesn't use a http request. Normaly fancybox uses an overlay to present the the photo's. I changed the javascript so I could append the photo's to an element inside the website. Cleared all the extra markup for title's, overlay and shadows.
At the bottom of every portfolio page there was a carousel with all the images presented in a category. This should move when a new image is loaded. I used jCarousel and implented it inside the code of fancybox. Now I can connect a group of images to an list and mark the list to be a carousel. On selecting a image in the list, the image loads and the carsousel moves the image to the front of the carousel.
Download the full code: Fancy-carousel.0.1.zip
View a live demo: Demo
Implementation
<link rel="stylesheet" type="text/css" href="css/fancybox.css" media="screen" />
//Make sure you set the width of the ul list with images for the carousel.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/fancybox-carrousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.fn.fancybox.build('#elementID');
$('a.fancybox').fancybox({
padding: 0,
//see fancybox documentation
container: '#elementID',
// append fancybox to element
carousel: true,
// create a carrousel
carouselElement: '.carouselClass',
// class of the div with list (ul) with all images
carouselVisible: 6, // items to show in carousel
carouselScroll: 1, // scroll carrousel
});
$("li.first a").trigger("click");
// load fancybox on page load
});
</script>
<div id="elementID">(here loads the image) </div>
<div class="carousel">
<ul>
<li class="first">
<a rel="group" href="01.jpg" class="fancybox" title="group - 01.jpg">
<img src="thumbs/01.jpg" class="thumbimg" alt="01.jpg" width="115" height="51"/>
</a>
</li>
<li class="">
<a rel="group" href="02.jpg" class="fancybox" title="group - 02.jpg">
<img src="thumbs/02.jpg" class="thumbimg" alt="02.jpg" width="115" height="51"/>
</a>
</li>
<li class="">
<a rel="group" href="03.jpg" class="fancybox" title="group - 03.jpg">
<img src="thumbs/03.jpg" class="thumbimg" alt="03.jpg" width="115" height="51"/>
</a>
</li>
</ul>
</div>
URL specifications for mobile websites
12-01-2009 16:13:48 Minor, 1020concepts, Artikelen, Afstudeerstage
Mobile websites are getting more and more interesting. I'm trying to create a clear view for me and my clients on how to approach this upcoming market. So while surfing the web on my desktop and creating small mobile websites I was wondering what would be the best way to direct a user to your mobile website. A subdomain or a extra extension, like .mobi. Automatic redirection, a link to your mobile website. No redirections or anything at all, only different stylesheets depending on screen-size or user-agent.
There are a few options if you optimize your website for mobile devices when it comes to url specifications.
- a domain specific site. sitename.mobi This is a common solution if you are mainly focused on mobile users. But should you visit it on a desktop, should it be desktop optimized?
- a subdomain mobi.sitename.com, there a many variations on the subdomain, the most common is m. others i've seen are mmm. mobile. mob.
- a request url such as sitename.com/m/ and again with very different requests as m / mobile / mob etc.
- a plain domain sitename.com, most of the time you will find these load different stylesheets.
- all of the above, never missing anyone.
For all five, and there are probably more, there are pro's and con's. I was wondering if there is a w3c standard for domain specifications if you are creating a mobile version of your website. There is nothing i could find that is directed towards mobile specifications. Only the following 2 comments:
- [URIS] Keep the URIs of site entry points short.
"5.2.1.1 What it means: Typing URIs on mobile devices can be difficult, and it is expected that users will prefer to use alternative methods of obtaining URIs when available - such as following a hyperlink (from an e-mail, SMS or other Web page), WAP Push, 2D bar code, color bar code, RFID tag and Bluetooth. However, typing a URI may in some cases be the only option available. By keeping site entry point URIs short it is possible to reduce the chance of error and provide a more satisfactory user experience."
[URIS - http://www.w3.org/TR/mobile-bp/#URIS] - a quote saying that domain URI's shouldn't have aliases if they are presenting the same resources.
"A URI owner SHOULD NOT associate arbitrarily different URIs with the same resource." -from Architecture of the Word Wide Web, Volume One [ WEBARCH - http://www.w3.org/TR/2004/REC-webarch-20041215/#uri-aliases]
To be continued
Schut-av.nl
29-01-2008 00:58:37 1020concepts, Persoonlijk
Petervandijk.net
29-01-2008 00:55:58 1020concepts, Persoonlijk
Solid Corrosion Protection Europe, Nieuw design
17-12-2007 01:26:52 1020concepts
Schut-av
04-11-2007 18:15:35 1020concepts
Advance-events
21-09-2007 11:54:24 1020concepts