Articles tagged as ‘Web Development’

Create a Sidebar that Sticks Within an Element

You’ve probably seen this trick used before with social icons or a sidebar that sticks to the top of your screen as you scroll down the page.

The problem is that often they don’t stop scrolling and up either disappearing behind another element or overlapping something they shouldn’t, which looks cheap and unprofessional.

In this tutorial we’ll create a ‘sticky element’ that only scrolls until the maximum height of it’s parent element which will prevent that unsightly overflow.

Let’s start with a very basic html structure:

Read More ».

7 Awesome HTML5 Website Development Tools by Adobe

PCMag recently spoke with Danny Winokur, Adobe’s vice president and general manager of Interactive Development, who said the point of today’s releases is to “advance what’s possible with HTML5 and associated technologies that have become instrumental to the modern Web.”

Adobe’s tools for HTML5 website development have brought the power of multiple technology features to build creative website designs. It aims to revolutionize the way the web is dealt with going forward. Adobe hopes to surprise web developers with a rather convenient and simpler creative process. These comprehensive tools are smart, flexible, and highly interactive in their use, style and performance.

Let’s take a look at the latest Adobe’s HTML5 website development tools re-invented for 2013:

Edge Reflow

This is a completely new, responsive web design tool by Adobe, available only for Adobe Creative Cloud members. The tool can create layouts and visual designs with CSS and is totally free in Adobe’s creative Cloud. It has a smart and intuitive design surface which can be easily resized. This surface gives an idea as to how layouts and visuals will adapt to different screen sizes.

It allows users to preview their designs in the browser, and check their designs in real-time with Edge Inspect extension. The design CSS can be transported to Dreamweaver, Edge Code or any other code editor for further modifications.

What it has in-store for Developers?

The primary purpose of Adobe’s Edge Reflow is to simplify the multi-screen design process, making it much more efficient and time-bound. Used for creating UX prototypes and visual designs followed by quick mock-ups.

Edge Reflow works on 2 design regions – design canvas for WYSIWYG layout and the property inspector (for single element styling). Breakpoints create new media query regions that can be easily tweaked to edit visual elements such as boxes, layouts and much more.

Edge Reflow

Read More ».

20 Awesome jQuery Sliders

Image and content sliders are an extremely common element in modern web design. Coding your own slider from scratch is always an option, but if you’re looking to save some time or if you’re not sure how to code your own slider there are plenty of options. In some cases, working with an existing jQuery plugin will give you the chance to observe the code that is being used, and learn things that can be used in situations where you do want to code from scratch.

In this post we’ll look at 20 different options for sliders. Many of them allow you to create responsive sliders, and some are optimized for mobile users as well. Most of these options are free. The last two listed are premium, and one is free with options to pay for a WordPress plugin version.

Slider Revolution
Slider Revolution is a premium WordPress plugin ($15) that allows you to easily create and customize responsive sliders. It comes with 20 different transitions, it’s touch enabled, and you can include just about any content you want within your slider.

Slider Revolution

Read More ».

23 Design and Development Job Boards

With so many designers and developers competing for jobs, finding work can be a challenging task. Fortunately, designers and developers can benefit from being in an industry that has a number of quality niche-focused job boards.

While major job sites can still be a source of job leads, smaller and more focused job boards are often a better use of your time. Many companies have found that industry-specific job boards typically produce higher quality candidates, which has resulted in more job listings on these job boards.

In this post we’ll break down the leading job boards into a few different types or categories. First, we’ll show those that list mostly jobs for designers. Second, we’ll show those that list mostly development or programming jobs. Third, we’ll show those that have a good mixture of listings for both design and development.

Job Boards that Focus on Design:

If you are looking for a job in web or graphic design, here are a few job boards that tend to have job listings in these fields.

Krop

Krop

Read More ».

How To Code Unique Avatar Photo Styles with CSS3

The popularity of social networking has converted a lot of websites to be more user-centric. This means you can find loads of new profile features and direct-connect OAuth apps through Twitter, Facebook, Tumblr, Pinterest, and others. Typically the profile photo is a common facet to each profile webpage design. Photos or avatars can be uploaded by the user, and sometimes pulled directly from their other accounts online.

In this tutorial I want to demonstrate 5 specific user avatar styles with CSS3. You may utilize any of these features on your own website or startup idea. Design trends have been advancing where new CSS properties are becoming much more widely supported. This means frontend developers can start really pushing the boundaries of how we style media in webpages. The user experience of a profile page is definitely a good place to start.

How To Code Unique Avatar Photo Styles with CSS3

Read More ».

12 Options for Easily Creating Web Forms

Creating web forms can be one of the most time consuming and sometimes frustrating parts of creating a website. It becomes especially challenging when you need an advanced form that involves things like conditional logic, multi-page forms, support for file uploads or attachments, and payment integration. Fortunately, there are a number of tools, resources, and apps that are available to make the process much less time consuming.

In this post we’ll take a look at several options for creating web forms, both basic and advanced, quickly and easily.

Wufoo

Wufoo

Read More ».

Displaying JavaScript Modal Windows using Bootstrap

It is true that Bootstrap has grown to include supporters from all around the globe. As there are plans for a Bootstrap 3 release I want to go into detail for one topic in particular. The Bootstrap JavaScript effects are not always useful to developers, so JS files are not necessary for running the whole framework. But they do provide quicker features to define common UI elements without having to reinvent the wheel.

I want to focus this tutorial on using modal windows within a typical webpage. We just need to include two files out of the Bootstrap framework. And the JS codes are not overly complicated to understand. My example demo allows users to dynamically update the background color, so this does admittedly have some more sample JS then you will need. But it is an excellent introduction to adding these brief components into any ordinary website.

Displaying JavaScript Modal Windows using Bootstrap

Read More ».

Build a Single-Page Sliding Navigation Bar with jQuery

Many web design studios and freelance portfolios will incorporate the popular single page navigation technique. The benefits of such a layout allows visitors to go through all your main content without needing to reload the website. Additionally this helps to keep the interface very simple and easy to maneuver.

In this tutorial I want to demonstrate how we can build a demo single-page layout with sliding navigation effects. I will be using the jQuery One Page Nav plugin which offers more control onto each of the page elements. Additionally the layout is standards compliant with HTML5 and CSS3 specs and the nav will still load properly in browsers where JavaScript is disabled. If you want to catch a glimpse of the final product we are building check out my demo page below.

Build a Single-Page Sliding Navigation Bar with jQuery

Read More ».

Responsive Design vs. Mobile Sites vs. Native Mobile Apps: Which One’s the Best?

With constantly changing trends and a five fold increase in mobile Internet users, more and more companies are aiming to create sites which will make their services available to mobile users. It is a fact that what seems to be more important on a desktop might not be equally important or useful for a mobile user who is accessing the page on a much smaller screen and is on the go. This is why, thinking properly before you choose to build a site for smaller devices, for your company is important. Here you will also have a few different options. These three options are:

1. Responsive Web Design

A responsive website is basically a website which can adapt itself on different screens regardless of the device you are playing it on. You build one single responsive website and it resizes itself accordingly.

Boston Globe

Read More ».

Which Magento Solution Suits You Best: Community, Go or Enterprise?

Having made an entry into the realm of eCommerce not so long ago (in 2008), in its brief stint of less than 5 years, Magento has already made a mark for itself and is now owned by eBay. With a proven track record and an impressive list of solutions, Magento can build small, big or gigantic web stores effortlessly. There are a number of e-stores of various magnitudes already functioning on it. Its flexibility as a CMS is wider that most eCommerce platforms.

While it goes without saying that it will do justice to your web retailing needs, the big questions is which plan offered by Magento would suit you the most?

Considering that its target group is a variety of business owners and enterprises, Magento has charted out three distinct plans. Let’s take a look at those three options.

Magento Go

It’s particularly designed for small business providers to create fully equipped online stores quite easily and fast. You don’t need to worry about installing any software or administering any servers. It’s armed with a set of powerful tools to take your business to the next level. Magento Go is for those who want an eStore, without knowing the technology.

Magento Go

Read More ».
Page 3 of 712345...Last »