How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery Vendors who are part of the IAB TCF940Reject allAccept all Purposes (Consent):Store and/or access information on a deviceCreate profiles for personalised advertisingUse profiles to select personalised advertisingPurposes (Legitimate Interest):Use limited data to select advertisingMeasure advertising performanceUnderstand audiences through statistics or combinations of data from different sourcesDevelop and improve servicesSpecial Purposes:Ensure security, prevent and detect fraud, and fix errorsDeliver and present advertising and contentSave and communicate privacy choicesCategories of data:IP addressesDevice characteristicsDevice identifiersProbabilistic identifiersBrowsing and interaction dataUser-provided dataNon-precise location dataUsers’ profilesPrivacy choicesData Retention Period:31 daysYour Consent:Consent expiry: 5 years 1 dayCookie expiry may be refreshed during the lifetime.Tracking method: Cookies onlyShow details
Hand-Drawing Style In Modern Web Design - Volume 2 Advertisement When it comes to web design too often perfect, colorful and boxy designs make the cut; however, the reality is different as it is hard to find objects with a perfect shape and a perfect color in our daily routine. To achieve a unique and communicative design we need to consider more creative approaches. For instance, we can draw sites by ourselves — or at least some parts of it. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when perfect, boxy and rounded elements can be found almost everywhere. And in fact, this is done quite often: whether a blog, a shop, an ad, a private page, or some collaborative project — doesn’t matter whether with Flash or (X)HTML. Please also have a look at our previous showcase Hand-Drawing Style In Modern Web Design What’s new? Few months ago we’ve declared that, in our humble opinion, shiny and glossy design elements were officially outdated. Script fonts gain on popularity 1.
Slideshow 2! A javascript class for Mootools 1.2 to stream and animate the presentation of images on your website If you are looking to download Slideshow, or for class documentation, please visit the open-source project at Google Code. If you are looking for the old version of Slideshow, it has been moved here. Support If you find this page helpful, why not donate? Because donations are voluntary, the act of making a small contribution has a big effect towards promoting future development and support. Examples By popular request, the following are some simplified examples of Slideshow usage: Demos Click below to view the various demos - perhaps the most impressive effect of all is simply viewing this page with javascript turned off. Slideshow 2! Colophon All photos were taken with a trusty Canon DigitalElph in New York, October 2007.
Retro and Vintage In Modern Web Design Advertisement Retro and vintage are becoming a new trend. Once rarely used in this robust, dynamic medium, early, retro and vintage elements are now becoming more and more popular in a variety of design contexts. Online shops, corporate designs, portfolios and blogs incorporate both styles on a small and large scale. Retro and vintage designs exhibit graphic solutions that are strongly influenced by the time period that they are supposed to represent. Such elements create a nostalgic atmosphere, awaken feelings and memories and attempt to communicate information effectively using emotions. The Secrets Of Vintage and Retro Designs What elements do designers use to create a genuine vintage or retro atmosphere? illustrations from old posters, movies, newspapers, CDs, vinyls, ads; old-style typography (e.g. vintage and retro are often combined with a hand-drawing style2 and grunge style3. Below, you’ll find a showcase of 50 beautiful retro, vintage and Renaissance designs. Custom Design6
Web-kreation - 48 incredible Mootools Sripts Ever wanted to add some AJAX effects to your site to create a great and interactive looking site. Here s a list of 48 of the best Mootools scripts around there (e.g. image galleries, lightbox clones, tabbed contents, forms, menus, tables, date pickers…). MochaUI MochaUI is a web applications user interface library built on the Mootools JavaScript framework to develop great Web Applications, virtual desktop, modal windows, widget… Maybe the best mootools app I have seen so far. Visit » Mootools Ext Adapter An attempt at creating a mootools adapter for the fantastic Ext library by Jack Slocum.Mootools version: 1.2 Milkbox Another lightbox clone, but this time is written for Mootools 1.2.Mootools version: 1.2 NoobSlide Nice and easy plugin for image slider. 8 slider samples in total.Mootools version: 1.11 and 1.2 (E)2 Photo Gallery (E)2 Photo Gallery is a open source gallery. Pathfusion : Slideshow Slideshow with transition between images.Mootools version: 1.11 MooSlide SmoothGallery MooFlow Slimbox
Textures In Modern Web Design Advertisement If you look around at well-designed websites in CSS galleries or any other source of design inspiration, you’ll see that texture is extremely common in modern Web design. One of the reasons it’s so popular is because of its versatility. Textures in Web design can be very subtle, so that the visitor hardly notices, or they can be a focal point of the design. When examining exemplary Web designs that employ textures, you’ll notice that textures are used in background images, headers, footers, sidebars, content areas and even fonts. One of the reasons texture is so useful to designers and so popular is because adding it to a design can be quick and easy with a program like Photoshop. Gallery: Texture in Modern Web Design Now, we’ll take a look at 50 websites in which texture has been applied to the design to improve it in some way. Textured Backgrounds When it comes to textures in modern Web design, background images are probably the most common area of use. Textured Headers 1.
How to Create Coda(tm) like Scrolling Window using Mootools -2 « N Rao Lakkakula’s Blog As I promised earlier , here is the code to do it. Look at the Final Output with some other Mootools Goodies at my website ( Assuming our html file is index.html and we have two folders names ‘js’ and ‘css’ to keep javascript and css files respectively. Download mootools.js and save in js/ folder. Step 1: Write HTML File ( I tookoff DOCTYPE and other header stuff to make it simple) index.html Step 2 : Write Javascript to do Scroll Effect js/site.js $(‘nav_about’).addEvent(‘click’, function(event) { event = new Event(event).stop(); scroll.toElement(‘content_about’); }); $(‘nav_projects’).addEvent(‘click’, function(event) { event = new Event(event).stop(); scroll.toElement(‘content_projects’); }); $(‘nav_portfolio’).addEvent(‘click’, function(event) { event = new Event(event).stop(); scroll.toElement(‘content_portfolio’); }); $(‘nav_blog’).addEvent(‘click’, function(event) { event = new Event(event).stop(); scroll.toElement(‘content_blog’); }); }); Step 3 : Stylesheets
More Web Design Trends For 2009 Advertisement Last week we presented 10 Web Design Trends For 20091, our review of the most promising developments and techniques in web design that may become big in 2009. In the first part we covered embossing letters (“letterpress”), rich user interfaces, PNG transparency, big typography, carousels and media blocks. This post is the second part of our review. It presents design trends for 2009 in terms of layouts, visual approaches and design elements. Please notice that this post showcases trends and developments that were extensively covered in our previous articles (e.g. handwriting, retro and vintage etc.) and therefore weren’t covered in this post (they are all linked in the overview, so feel free to explore these single posts as well). You may want to take a look at the following related posts: Web Design Trends For 2009 Let’s first take a closer look at some of the trends we identified, discovered and observed over the last months. 1. 2. 3. 4. 5. 6. 7. 8. Did we miss something?
Using jQuery for Background Image Animations After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm not the first to think so: see the examples at the end of this article). jQuery is a great library for this type of task but out of the box, it can't animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer). The HTML Nobody likes adding extra HTML to pull off all the fancy stuff and therefore, we're looking at a very simple unordered list: <ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul> The Basic CSS
Web Design Trends For 2009 Advertisement We Web designers are a fickle lot. We love to experiment with things. We love to observe how people interact with our work. And we love to try out unusual design approaches that might possibly go mainstream and become a classic approach. Over the last months, we’ve analyzed numerous Web designs, observing emerging trends and weighing the merits of numerous design decisions and coding solutions. This article covers only 10 of the over 25 trends we’ve identified over the last months. Update: the second part of our review1 is now published as well. Web Design Trends For 2009 Let’s first take a closer look at the main trends we identified, discovered and observed over the last months. Embossing Letterpress Rich user interfaces PNG transparency Big typography Font replacement (sIFR, etc.) Now let’s go into detail and take a closer look at each of the trends presented above. 1. 2. 3. 4. We presented some outstanding examples of BIG typography in previous6 posts7. 5. 6. 7. 8.
Symptoms Of An Epidemic: Web Design Trends Why You Should Get Excited About Emotional Branding Globalization, low-cost technologies and saturated markets are making products and services interchangeable and barely distinguishable. As a result, today’s brands must go beyond face value and tap into consumers’ deepest subconscious emotions to win the marketplace. In recent decades, the economic base has shifted from production to consumption, from needs to wants, from objective to subjective. Read more... A Guide To Validating Product Ideas With Quick And Simple Experiments You probably know by now that you should speak with customers and test your idea before building a product. Mistakes include testing the wrong aspect of your business, asking the wrong questions and neglecting to define a criterion for success. Read more... Building The Web App For Unicef’s Tap Campaign: A Case Study Read more... How To Build A Ruby Gem With Bundler, Test-Driven Development, Travis CI And Coveralls, Oh My! Ruby is a great language. Read more...
Веб-дизайн. Каждому устройству свое представление Регулярно увеличивающееся количество разнообразных устройств предоставляющих доступ во «Всемирную паутину» радует практически любого гика, но зачастую огорчает разработчиков и дизайнеров сайтов. В абсолютном большинстве сайтов совершенно нет поддержки ничего, кроме браузеров обычного компьютера, да и пресловутая кросбраузерность не всегда реализована в полном объеме. Хоть разработчики устройств и стремятся свести к минимуму различия в необходимом представлении, но не всегда это возможно по техническим причинам. Стоит ли поддерживать различные методы доступа к своему сайту? Какими устройствами сейчас пользуются? Попробуем определить какими устройствами, на сегодняшний день, пользуются люди для доступа в сеть и попробуем разобрать, каковы отличия в сайтах оптимизированных для этих устройств. ПК, ноутбуки и нетбуки Самая массовая часть пользователей использует именно эти классы устройств для доступа в сеть. Основных проблем разработки сайта для ПК я вижу две: Иная ситуация. Интернет планшеты
Использование ориентированного на пользователей подхода в веб дизайне для мобильных устройств « uxdnepr Перевод статьи A User-Centered Approach To Web Design For Mobile Devices опубликованной на сайте Smashing Magazine. Термин «Мобильный Веб» (который часто критикуется) обычно используется для описания доступа в интернет с помощью мобильного устройства. Это определение достаточно широкое, и покрывает такие понятия, как использование браузеров в стандартных мобильных телефонах, так и приложений для смартфонов и интернет планшетов. В наши дни, компании часто начинают разговор с точго, что «нам нужно приложение для iPhone», вместо того чтобы для начала изучить что именно требуется пользователям от мобильной версии, какие устройства они используют, и только потом определиться с направлением – мобильный веб сайт или мобильное приложение. (Термин «Мобильный Веб» часто критикуется из-за того, что он подразумевает существование различных «вебов», что на самом деле не правда – как не существует «компьютерного веба» так и не существует «мобильного». Не все сайты нуждаются в мобильной версии.