Wednesday, October 31, 2012

Login Screen – behind the scenes

Login Screen – behind the scenes

We wanted the login screen to feel personal and for our customers to feel comfortable and familiar with signing in. It's something that our most loyal customers see very regularly too, so it had to be streamlined and quick to understand and submit. At the end of the day, people don't want to stay staring at a login form – they want to use GoSquared – they want to find out more about their website.

Wednesday, October 31, 2012

8 code snippets for new website projects

8 code snippets for new website projects

Working as a web developer often requires compromise and trying out new systems. Some of your code will turn out to be a flunk and other codes will become staples in your development process. I have learned a lot about useful code snippets and how greatly these can affect your development process.

Wednesday, October 31, 2012

Javascript Full Screen API

Javascript Full Screen API

The full screen API is an easy way to get the full web content to be displayed on the page. It's very similar to pressing F11 on your keyboard but this can be done at the developer's choice. This is a great feature to use for things on slideshows, you can make the browser go into full screen on a click of an image.

Wednesday, October 31, 2012

Add telephone number links with HTML5

telephone number links with HTML5

Normally telephone numbers are adding to web pages as just static text of digits which doesn't offer any interaction to your visitors. With more and more people using the internet on their mobile it's time to change your telephone numbers to clickable areas to call the number directly from your mobile phone.

Wednesday, October 31, 2012

A simple parallax scrolling technique

A simple parallax scrolling technique

This technique revolves around controlling the speed of background image. So let's begin with the HTML markup, creating two sections along with the required attributes: data-type and data-speed. Don't worry; I'll explain these later.

Tuesday, October 30, 2012

Fonts, fabulous fonts: How to use the @font-face rule with popular font services

How to use the @font-face

Studies show that five out of five web designers agree that the handful of fonts that come installed on most Windows and Mac computers offer a woefully inadequate choice for even the simplest design projects.

Tuesday, October 30, 2012

CSS3 tucked corners

CSS3 tucked corners

I had one of those moments this week when I remembered I saw a while ago a tucked corners effect made by Joshua Hibbert. That was cool. While thinking about it, one of my first thoughts was to try finding an alternative solution which can allow you use a pattern as a background for the containing block.

Wednesday, October 24, 2012

Low cost user experience testing

Low cost user experience testing

User experience testing and usability testing are absolutely essential for the creation or editing of a successful website. While it is important for all types of websites, testing is particularly important for e-commerce and other complex websites where users will need to do navigating through several pages in order to achieve their objectives.

Wednesday, October 24, 2012

How to SEO Your Website

How to SEO Your Website

What is SEO?

SEO or Search Engine Optimization is the practice of making your website attractive to search engines such as Google, Bing, Yahoo, etc.

Search engines regularly read and archive websites so that people can find them easily. For example, a person may be searching for ways to cook salmon. If your website is about salmon and optimized properly, your site should appear within the first page or two of every search engine.

Monday, October 22, 2012

The Web Aesthetic

The Web Aesthetic

It is the nature of the web to be flexible and it should be our role as designers and developers to embrace this flexibility and produce pages which, by being flexible, are accessible to all.

Monday, October 22, 2012

Mo’ Pixels Mo’ Problems

Mo’ Pixels Mo’ Problems

Mobile devices are shipping with higher and higher PPI and desktops and laptops are following the trend as well. There's no avoiding it: High-pixel-density, or "Retina", displays are now becoming mainstream — and, as you'd expect, our websites are beginning to look a little fuzzy in their backlit glory. But before we go off in the knee - jerk direction of supersizing all our sites, we must first identify the problems ahead and figure out the most responsible way forward — keeping our users in mind first and foremost.

Monday, October 22, 2012

The Infinite Grid

The Infinite Grid

Grid systems are a key component of graphic design, but they've always been designed for canvases with fixed dimensions. Until now. Today we're designing for a medium that has no fixed dimensions, a medium that can and will shape-shift to better suit its environment — a medium capable of displaying a single layout on a smartphone, a billboard in Times Square and everything in between.
We're designing for an infinite canvas — and for that, we need an infinite grid system.

Monday, October 22, 2012

Windy: a plugin for swift content navigation

Windy

Windy is a jQuery plugin that allows a rapid navigation through a pile of items using some CSS 3D transforms and transitions. The effect of a continuous navigation flow reminds of a deck of cards or sheets flying away, hence the name. This plugin idea is inspired by the CSS shaders examples as shown in the CSS shaders Flipbook video by Adobe.

Thursday, October 18, 2012

Real-Time geolocation service with Node.js

Real-Time geolocation service

Hi guys! In today's tutorial we will make a simple real-time application that will determine and show the locations of currently connected users directly on a map. For this purpose we will use Node.js and the HTML5 Geolocation API.

Thursday, October 18, 2012

Making a mosaic slideshow with jQuery & CSS

mosaic slideshow with jQuery & CSS

When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. With the raise of the jQuery library and its numerous plugins, there is an abundance of ready-made solutions which address this problem. However, to make a lasting impression to your visitors, you need to present them with something they have not seen before.

Thursday, October 18, 2012

Elastislide - A responsive jQuery carousel plugin

Elastislide

With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel's structure into a container with a fluid width will also make the carousel fluid.

Thursday, October 18, 2012

Creating a rotating billboard system with JQuery and CSS

Creating a rotating billboard system with JQuery and CSS

Currently we are in the "hey, let's do that flash thing in jQuery"-mood and so we came up with another idea: a rotating billboard system.

Thursday, October 18, 2012

Create a slick and accessible slideshow using jQuery

Create a slick and accessible slideshow using jQuery

In this in-depth web development tutorial, you'll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you'll see the concept of Progressive Enhancement in action.

Thursday, October 18, 2012

How to capture CSS3 animation events in JavaScript


CSS3 animation events

CSS3 animations are smooth and quick to implement but, unlike JavaScript, you don't have frame-by-frame control. Fortunately, you can apply event handlers to any element to determine the animation state. This permits fine-grained control such as playing different animations in sequence.

Tuesday, October 16, 2012

Chained AJAX selects

Chained AJAX selects

In today's tutorial, we will build a set of chained select elements. Selecting an option in one of them will trigger an update on the page, showing you more choices to refine your selection. We will describe the options server side with PHP, so it is easy for you to hook today's example to a database.

Tuesday, October 16, 2012

Animated portfolio gallery with jQuery

Animated portfolio gallery with jQuery

Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlarged by clicking on it, making it appear as an overlay.

Tuesday, October 16, 2012

Fullscreen gallery with thumbnail flip

Fullscreen gallery with thumbnail flip

In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. We will add navigation controls for the mousewheel and for keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.

Tuesday, October 16, 2012

Create a photo admin site using PHP and jQuery

Create a photo admin site using PHP and jQuery

I'm pleased to present you with part one of a two part series on creating a photo site using PHP, jQuery and AJAX. Originally, I intended to fit the entire tutorial into one screencast, but that quickly became a pipe dream as I realized that there was simply too much to cover. Nevertheless, even if you only watch this first video, you should learn a great deal.

Tuesday, October 16, 2012

Image wall with jQuery

Image wall with jQuery

Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

Tuesday, October 16, 2012

Lateral on-scroll sliding with jQuery

Lateral on-scroll sliding with jQuery

After getting the request, we are going to show you how to create a "slide-in on scroll" effect. You've probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from "outside" of the page to the center when they are in the viewport. We will also add the option to move the elements in 3D space.

Tuesday, October 16, 2012

Cool animated menu with jQuery

Cool animated menu with jQuery

In this tutorial we'll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.

Tuesday, October 16, 2012

How to create accordion menu (CSS3 + jQuery)

How to create accordion menu (CSS3 + jQuery)

As you may noticed a few days ago we released a tutorial about How to Create an Accordion Menu in Pure CSS3. As this pure CSS3 Accordion Menu will not work on all browsers because the :target selector in not supported in the oldest browsers we decided to create a jQuery version of this menu. Also jQuery offers more stability and cross browser compatibility support so if you want to provide to your visitors/client a better product you may consider use this jQuery version.

Thursday, October 11, 2012

What Your E-commerce Store Colors Says About You

E-commerce Store Colors

The color scheme you use for your online store can speak volumes about your products and you as a company. They can also affect the way visitors use and shop on your site. When it comes to something as important as making sales, you really want to pick the right colors.

Thursday, October 11, 2012

Compass Recipes

Compass Recipes

Overview

  • Backgrounds, patterns & gradients effects
  • Color, Variables Names, advanced color functions like `brightness()` & color scheme functions)

Thursday, October 11, 2012

Compass CSS3

Compass CSS3

The CSS3 module provides cross-browser mixins for CSS properties introduced in CSS3, for example border-radius and text-shadow.

Thursday, October 11, 2012

Sass for Designers

Sass for Designers

Note: Throughout this post, when I say "Sass" I mean "Sass and Compass".

This is not a post saying...

If you're still building websites without Sass, you're doing it wrong.

This is a post saying:

If you haven't tried Sass/Compass, please do before dismissing it.

Thursday, October 11, 2012

Drawing things with box-shadow

Drawing things with box-shadow

This is a neat little trick that I stumbled upon when play­ing around with a CSS exper­i­ment a few months ago. Basically, by using mul­tiple box-shadows, you can draw com­plex images with only a single ele­ment. As you may know, I'm a big fan of semantic markup and I really don't like using extra ele­ments just for styl­ing, so I was very happy with this discovery!

Thursday, October 11, 2012

Great resources for Compass and Sass

Compass and Sass

With front-end design getting more and more attention in web development these days, it's not a wonder that the two are beginning to meld into one. It is crucial to maintain consistency and efficiency in web projects and Sass/Compass tackles this head on. In geek speak, Sass is a meta language integrated with CSS that makes stylesheets more manageable and less repetitive. This simply means you can create CSS without copying and pasting and having to constantly search for previous style references.

Thursday, October 11, 2012

Website Design: A beginner/designers guide to using Modernizr to solve cross-browser challenges

guide to using Modernizr

This piece is intended to help users who are comfortable with HTML and CSS but not so confident using JavaScript. I'll (hopefully) demonstrate how you can use the incredible open-source Modernizr JavaScript library to solve cross-browser design challenges and conditionally load assets (CSS or JS files) based on a number of tests. If the thought of writing JavaScript makes you shudder. Don't worry, it's going to be OK...

Wednesday, October 10, 2012

Old school cassette player with HTML5 audio

Old school cassette player with HTML5 audio

Vintage format meets modern web tech: an HTML5 audio player with realistic controls. Today we want to share an audio player with you that looks like an old school music cassette.

Wednesday, October 10, 2012

Receding background modal boxes

Receding background modal boxes

You all know Hakim El Hattab right? He creates some super crazy progressive demos over on his blog. His CodePen profile is full of amazing too.

Wednesday, October 10, 2012

CSS3 Filters: altering HTML and images with just CSS

CSS3 Filters


CSS3 Filters are a quite interesting offshoot from SVG, allowing you to modify HTML elements and images with blurs, brightness and a lot more. In this quick tutorial we'll go over exactly how they're going to work.

Wednesday, October 10, 2012

Filter functionality with CSS3

Filter functionality with CSS3

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

Wednesday, October 10, 2012

CSS ribbon menu

CSS ribbon menu

This uses CSS3 transitions and CSS2 pseudo-elements to create an animated navigation ribbon with minimal markup.

Wednesday, October 10, 2012

Exceptional CSS navigation techniques

* Click on the images for more details and tutorials.

The Menu menu

CSS navigation

This another great CSS menu Stu Nicholls that's unique – hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page.

Wednesday, October 10, 2012

Simple scalable CSS based breadcrumbs

Simple scalable CSS based breadcrumbs

A few days ago I was implementing breadcrumbs in a website I'm working on. Not that I sincerely believe every site needs this, but on some occasions and to some users breadcrumbs are practical. Anyhow, it gave me the idea to write an article about it because it's been a while since I last wrote about anything CSS-related. The one I'll share with you is a very simple one. It uses only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code.

Wednesday, October 10, 2012

Wordpress: redirect to post if search results return one post

Wordpress: redirect to post if search results return one post

WordPress has a built in search functionality which allows your visitor to easily search for posts on the blog. It can search for keywords in the post title and in the post content.

When a search is performed WordPress will use the Archives.php file to display you the results. You can customise this page to display the entire list of posts returned from the WordPress database.

The problem is that if WordPress returns only one post in the search results it will still take you to the Archives.php file and display a list of posts, well the one post.

Tuesday, October 09, 2012

The 30 CSS selectors you must memorize

The 30 CSS selectors you must memorize

*

* { margin: 0; padding: 0; }

Let's knock the obvious ones out, for the beginners, before we move onto the more advanced selectors.

The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I'd advise you to never use this in production code. It adds too much weight on the browser and is unnecessary.

Tuesday, October 09, 2012

Creating different CSS3 box shadows effects

CSS Box Shadow Effect 6

In this tutorial we are going to be creating box shadow effects with just CSS.

Tuesday, October 09, 2012

Speech bubble arrows that inherit parent color

Speech bubble arrows that inherit parent color

Interesting question:

css3 speech bubble question: for the "triangle"'s border color, how can I set it to whatever its parent div's bgcolor is automagically?

By "css3 speech bubble", Jin means using a pseudo element on a container to add a little pointer arrow (triangle). Not really CSS3, but that's pedantic.

Thursday, October 04, 2012

Circle hover effects wtih CSS transitions

Circle hover effects wtih CSS transitions

A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations.

Wednesday, October 03, 2012

Improving site performance with YSlow

Improving site performance with YSlow

We spend a fair bit of time improving the performance of our application servers and databases, but truth be told 80% of a web request is spent working on the frontend. The screenshot below shows the entire request time of a large eCommerce site using New Relic. (Shown with their permission, of course). As you can see, the average total request time is 3.2 seconds but only a fraction (5%) is spent in the web app layer (in purple). The other 95% is spent in the network, DOM processing and page render. So looking at performance from the frontend is critical and that's what we're going to do in this post.

Wednesday, October 03, 2012

Preprocess THIS!

Preprocess THIS!

A while ago I wrote a little post discussing my dive into CSS preprocessing and, at the time, I wasn't totally convinced that this hot newness was the best approach for my workflow. I shared my internal struggle with bloated output and questioned if this preprocessor business really did save me that much time. When I wrote the article, I had only worked with LESS, one of several popular CSS preprocessors, as it was a project requirement. Many of you fine folks suggested (both on Cognition and off) that I try Sass. Well, I did. Fast-forward 10 months and HOLY TOLEDO THIS FRONT-END DEV IS SERIOUSLY SASSY AND LOVING IT.

Wednesday, October 03, 2012

CSS Ellipsis: how to manage multi-line ellipsis in pure CSS

CSS Ellipsis

Properly cutting off multi-line text is a surprisingly hard thing to do well.

  • overflow: hidden provides no indication of the text cut off.
  • text-overflow: ellipsis works only on single line content.
  • Various JavaScript solutions are fragile because they need explicit relayout whenever the box width or content changes.

Wednesday, October 03, 2012

Bookblock: a content flip plugin

Bookblock

BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a "page flip" navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism.