Articles tagged as ‘Web Development’

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 ».

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 ».

How To Build a Fullscreen Background Video Player

After looking over countless jQuery plugins I have seen a lot of new HTML5 video techniques. The audio and video elements have created a new method of publishing digital media, streaming off a web server. But developers have been hard at work customizing these features to be used within advanced layouts.

In this tutorial I want to look at using big video backgrounds within typical website layouts. I’ve chosen the jQuery plugin BigVideo.js which includes a list of resources in the documentation. We can setup genuine HTML5 videos streaming as backgrounds behind the main page content. It is not an easy setup, but I’ll provide a clear step-by-step process to follow along.

How To Build a Fullscreen Background Video Player

Read More ».

Cross Platform Mobile Application Development Tools: Bridging The Platform Divide

What are your considerations while shopping for a smartphone? Entertainment, infotainment, communication, professional aids, or something else? On the prowl, you learn that your hunt for the best buy doesn’t seem to end anywhere soon. You find yourselves in an ocean of smartphones having features with very little noticeable differentiation. Nearly all smartphones offer you similar features that you’re craving. Even if you’re ready to settle down for one or two unique features, it’s not always easy to spot them. But a platform vendor or an app developer never misses them – nor can they afford to.

Read More ».

Details of 10 E-Commerce Platforms

When it comes to choosing a platform for an e-commerce website there are plenty of options. Having options can be a good thing, but in some cases having too many options can make it difficult to know which one to choose. In this post we’ll take a look at 10 leading options and we’ll provide some details about each. They are actually broken down into 3 categories: hosted, open source, and hosted shopping cart.

Hosted e-commerce platforms will charge a monthly or yearly fee, which will include web hosting, use of the e-commerce system, and support. You’ll have to host your site with them in order to use the system. The downside to this is that you won’t be able to choose your own host, but the upside is that you’ll get support for hosting and the e-commerce system from the same place, and they will know their own system very well. Also, since it is hosted they can take care of most security details.

Open source e-commerce platforms can be downloaded and hosted anywhere. You’re not committed to a particular host, which can be a good thing. The downside is that support is likely limited to a forum or wiki. For designers and developers open source solutions can be a good choice, but end users who are looking to set up their own site will likely face more obstacles with an open source, self-hosted system as compared to a hosted platform.

Hosted shopping carts will allow you to use the CMS and host of your choice, and they will just host the shopping cart and checkout process for you. So they’ll still handle the security details since the payment will be processed through their site, but you won’t host your entire site with them.

So now we’ll take a look at the specific platforms. Certainly there are plenty of other options that could be included, but we have tried to limit the number to a few in each category to avoid overload.

Hosted E-Commerce Platforms:

Shopify 

Shopify

Read More ».

Recent and Useful Tools for Web Development

Looking for new ideas for your next project? you stepped into the right place. This post talks about brand new web tools that convert good ideas in excellent pieces of web development. Slowly but constantly, web tools are replacing desktop programs and It is very likely that in the future there will be no need of hard drives since everything will be in the cloud. The greatest developers for desktop applications will need to adapt to this or disappear. We bring you some tools that show the future now. So that you start adapting to it.

We Love Icon Fonts

We Love Icon Fonts

Read More ».

How To Code a Vertical Accordion Nav Menu with jQuery

Website navigation is an important aspect to any functioning layout. Users will often be looking for methods to traverse over your pages, and sometimes this requires a bit of creativity. I love the idea of vertical navigations especially with sub-menu links.

In this tutorial I will demonstrate how we can build a simple vertical navigation accordion menu using CSS3 and jQuery techniques. We can build custom styles and format the links to slide down & up on each click. Using this method we can also build sub-menu links, splitting up headers by ID or class names. Follow along with the ideas below and feel free to download a copy of my source code.

How To Code a Vertical Accordion Nav Menu with jQuery

Read More ».

CSS3 Image Gallery with Dynamic Caption Text

I have run into lots of tutorials on the web focused around creating stunning image galleries. These often include photo boxes or alternate JavaScript-enhanced functionality. Nominally in the modern era of web design there isn’t any problem with dynamic scripting.

For this tutorial I want to show how we can build a standards-compliant HTML5/CSS3 image gallery with fading captions. We will be using CSS3 transitions to create the animated effects. Also I have been working with a number of CSS3-specific properties on this tutorial alone. It leaves room for interpretation if you wanted to implement a JavaScript frontend animation using CSS3 as a fallback.

CSS3 Image Gallery with Dynamic Caption Text

Read More ».

Coding a Bare-Bones HTML/CSS E-mail Newsletter Template

There are a lot of tutorials out there explaining the major benefits of building an e-mail newsletter. It definitely draws attention to your website and helps regular readers keep up with new publications. But not everybody has the time or knowledge to build their own newsletter design.

In this tutorial I want to go over the process of building a very basic HTML newsletter. I’ll explain some key steps along the way and you can grab a copy of my source code as well. When you’re building HTML code for e-mail clients the work process is a whole lot different. But once you understand the basics you’ll have an easier time working with more complex layouts.

Coding a Bare-Bones HTML/CSS E-mail Newsletter Template

Read More ».

How To Build a Mobile Detail List Webapp in HTML5/CSS3

There are countless mobile applications which use list views in their UI. Both Android and iOS offer platform-specific designs to make building applications easier. But there is another template you can build with just typical HTML5 and CSS properties.

In this tutorial I want to introduce a method for building clean HTML5 mobile web applications. For the demo below I’ve limited the width at a maximum of 800px but you can theoretically scale to any browser size. This is what makes mobile web development so profitable – the amount of control you have over the user experience. You can follow along with the tutorial code and download a copy of my source files from the link below.

How To Build a Mobile Detail List Webapp in HTML5/CSS3

Read More ».

Facebook-Style Inline Profile Edit Fields with Ajax

The standard Facebook layout is well known amongst fans of social media. Many of the dynamic form fields on the website started a huge trend of Ajax-powered backend scripts. Now we can see open source PHP developers offering examples of their code for dozens of platforms such as Wordpress, Drupal, or Joomla!

In this tutorial I’d like to focus on building a simple jQuery inline edit field. We won’t store any data locally, but instead we can update the HTML data directly on the page after each edit. It’s possible to then tie into a MySQL database and store all these values as default. But for now let’s code the mere frontend functionality.

Facebook-Style Inline Profile Edit Fields with Ajax

Read More ».

Coding a Pixel-Style Video Game Fansite in HTML5/CSS3

There are not as many newer gaming fansites which utilize the power of HTML5 and CSS3 techniques. Some of the more popular gaming titles such as Final Fantasy and Kingdom Hearts have a devoted following. A large fan base will accompany forums and other online message boards – but this isn’t always the most successful CMS solution.

In this tutorial I want to demonstrate how we can build a simple retro Pokemon fansite layout using some newer CSS3 tricks. To keep the template fairly simple I haven’t included any extra jQuery effects. Although admittedly there is plenty of room for such a system of dropdown menus or sliding panels on the home page. Additionally I’ve included a few sprite resources ripped from the first 2 generation games.

Coding a Pixel-Style Video Game Fansite in HTML5/CSS3

Read More ».

Optimizing Your Mobile Design

With page views from mobile devices on the rise, shifting focus from standard to optimized and responsive design has become even more vital in preventing alienation of your site’s visitors. Some of the obvious elements exist: you have to use responsive design to make sure that your mobile website will fit on any size of screen. You have to design your mobile website so that people can use it with one thumb while they hold their phone with the other four and their dog’s leash with the other.  You have to design a mobile site so that it loads quickly and puts minimal strain on the user’s bandwidth limitations.

But there’s much more to the mobile web experience. Mobile websites are more than just tiny versions of your website, because people interact with mobile devices in different ways than they interact with desktop devices.

Read More ».

Coding a Guided Registration Form with jQuery

Techniques for building a usable registration form can be a major factor towards bringing in new users. When you’ve got an overly complicated form it can scare away so many first time visitors. But a great technique for keeping these people around is coding form hints into the layout.

In this tutorial I want to demonstrate how we can build such an interface with CSS3 and jQuery. We can embed hidden form tips which only display when the user has focused on a particular field. These hints can be used to denote syntax, such as the required length of usernames or passwords. But it’s a great usability tactic which livens up even the most dull websites.

Coding a Guided Registration Form with jQuery

Read More ».

Picking a Mobile Strategy

With the proliferation of mobile devices growing ever larger, it’s become necessary to consider not just what content to put on your website, but how it will be viewed, and from where. Assuming your website is only going to be viewed on a computer monitor is about as outdated as an eight-track tape deck.

Today’s Internet enthusiast is just as likely (some evidence would say more likely) to look at your website from their smartphone. But here’s the problem—that awesome website you just paid big bucks for only looks awesome when viewed on a great, big LCD monitor. Try to bring it up on your phone and you’ll spend more time scrolling up and down, and left and right, to read it than you’ll want to spend.

Read More ».

12 ‘Must-Know" Advantages of PHP

The latest trend in today’s web world is using PHP. PHP is a general-purpose scripting language that is especially suited to server-side web development where PHP generally runs on a web server. Its clarity in design, well organized modules and better upkeep of various technologies, make it the most popular language in the online industry today. Its popularity and credibility can be gauged by the fact that reputed organizations like Harvard University and popular social Networking site Facebook, both are based on PHP. This is possible because PHP websites can be easily maintained, improved and updated from time to time.

Having said that, let us examine a few good reasons for you to pick PHP for your website.

1. Open Source

PHP is Open Source. This means it is readily available and absolutely free! If you are planning to hire PHP developers and they have a good background in C and Java, they will do excellently in PHP. If the truth be spoken, PHP is actually much simpler than the rest and so you can stay assured of fabulous results.

Read More ».

How to Add an Awesome Parallax Banner for Your WordPress Site

The parallax effect has been used in the movie industry for a long, long time. Also, cartoons make great use of this simple technique. The general idea is to have 2 overlapped items moving in different speed ratios, to create an illusion of depth.

Parallax effects can work great even for websites. We can see many uses out there, and today we’ll take it a little deeper and create a banner making use of this technique.

The main challenge here is to do something simple because we’re dealing with dynamic content so everything will change pretty often. Our effect will need, for example, to automatically detect heights, since the only fixed dimension will be the width.

Also, we’ll learn how to do that on the top of a WordPress theme, in our case the Twenty Eleven theme (default theme), but you can easily use the concepts and snippets here to apply on your own theme.

How to Add an Awesome Parallax Banner for Your WordPress Site
Photo credits joeymc86

Read More ».

15 Free WordPress Theme Frameworks

For designers and developers that frequently work with WordPress, theme frameworks and starter themes can have a noticeable impact of efficiency. Frameworks and starter themes can eliminate some of the repetitive work that you probably do with each custom theme. In addition, many frameworks provide additional features that can make your theme more powerful with less development time.

In the past year or two, responsive frameworks have become more popular. Since designing and developing responsive sites and themes can be highly time consuming, these frameworks can be a great resource.

In this post we’ll take a look at 15 of the best free WordPress theme frameworks and starter themes. There are also a number of outstanding premium options, but in this post we’ll focus on the free ones. Despite being free, these resources can be highly valuable.

Bones

The Bones framework comes in two variations: classic and responsive. The classic version is built on the 960 Grid. The responsive version gives you are starting point to design for multiple devices, with a stylesheet set up for media queries and a mobile first approach. Bones isn’t intended to be a framework for which you develop child themes. Instead, it is intended to be a project template.

Bones

Read More ».

Building a List/Grid View Switcher with jQuery

A fairly common web interface feature is the dynamic view switcher. On product pages or blog archives you’ll sometimes find buttons to change the layout from display lists to smaller grids. In this tutorial I’ve built a simpler example using basic CSS and some jQuery commands.

I’ll be using interface elements from the Zephirro E-Commerce UI Set which include buttons and thumbnail photos. Feel free to demo the code yourself and try out a similar experience on your own website. This is a tricky effect to nail down, but when done properly your users will love the unique experience.

Building a List/Grid View Switcher with jQuery

Read More ».

Code an Awesome Registration Form with the Exotico UI Set

Today we’ll learn a few CSS tricks that you can use to code your UI elements and keep them as awesome as they were in the psds.

I know, things are much easier when you have a good design, so we’ll use Exotico UI this time. You can buy it for $19, or if you are a Vandelay Premier, you can just download it as a member. Also, we have a free version so you can see how awesome that UI Kit is.

We’ll use inputs, progress bars, and buttons this time. If you want to see any other element coded, you can let us know via comments.

That’ said, let’s start the fun part.

Demo and Download!

This is the final result we’ll get. You can download demo files or just check the online demo and see how it works!

Code an Awesome Registration Form with the Exotico UI Set

Read More ».

11 Websites for Code Snippets

When coding a website, making use of existing code snippets can be a great time-saving practice. It could be your own snippets that you keep and re-use, or you can benefit by using snippets that have been shared by other developers.

There are a number of websites that exist to allow developers to share code snippets with each other, or to allow developers to manage their own snippets. In this post we’ll take a look at 11 websites that are excellent sources of code snippets.

CSS Deck

CSS Deck showcases pure CSS creations (only HTML and CSS). You can view the creations on display and view the code snippets used to create them. You can submit your own creations, leave feedback on existing creations, or browse for code that can be used in your own projects.

CSS Deck

Read More ».

How to Code an Awesome Categories Menu for Your WordPress Site

Sometimes it’s good to ditch the default functions for components and create our own stuff. WordPress has great features for category listing but when it comes to customization we need to dig a little deeper on its functions.

Today we’ll see how to do an awesome categories menu, based on Pawel Kadysz’s awesome menu design.

We’ll see alternatives to WordPress wp_list_categories functions that allows full customization. Also we’ll see how to do it with clean CSS and a little jQuery for final touches to make it smoother.

So, are you ready to rock?

The Final Look

How to Code an Awesome Categories Menu for Your WordPress Site

Read More ».

How to Turn Any Site Into a Responsive Site

I remember the time when our biggest worry was about making stuff work in IE6. And sometimes I think that it was far easier then. Now we have not only to worry about IE crazy stuff (though now it’s much better) but also with a lot of new browsers /OS combinations and also a lot of screen sizes.

We can’t deny the power of mobile design. Actually, research shows that in a few years mobile will overtake desktop browsing. But also, you can’t live in the future and need results now. Like, right now.

Here we’ll see a few ways to take your current site and turn it into a mobile friendly one, with little effort. We’ll see CSS basics, HTML optimization, WordPress and jQuery plugins and other cool stuff you should be aware of.

So, let’s rock!

What is this responsive thing, and why should I care?

Responsive Web Design

Read More ».

20 of the Best jQuery Slideshow Plugins

jQuery sliders, slideshows, and galleries are extremely common on a variety of different types of websites. Portfolio sites, blogs, e-commerce sites, and about any type of site can make use of a jQuery slideshow. Fortunately, there are a number of great plugins already coded that make it easy to add a slideshow in a matter of minutes. Each one offers different features and has it’s own style. In this post we’ll showcase 20 jQuery plugins that you may want to use for adding a slideshow in your own projects.

Slides
Slides is a jQuery slideshow plugin built for simplicity.Features include captions, multiple slideshows, and more.

Slides

Read More ».

25 Useful jQuery Tooltip Scripts

Tooltips can be a helpful way to provide information to visitors without creating clutter in a design. If you would like to add an attractive tooltip to your website it doesn’t have to be difficult. There are plenty of quality scripts available for use that will allow you to set up tooltips without coding it from scratch. In this post we’ll present 25 different jQuery tooltip scripts.

You may also be interested in:

Easiest Tooltip and Image Preview Using jQuery

Easiest Tooltip and Image Preview Using jQuery

Read More ».

Getting Started with E-Junkie for E-Commerce

Finding the right e-commerce system can be a time consuming and frustrating process. No e-commerce platform is ideal for every situation, but we have found E-Junkie to be very easy to set up and flexible enough to meet the needs of many websites and businesses. In this post we’ll go through the process of getting started with E-Junkie and setting up a product to sell. We’ll also show you how to manage the affiliate program included with E-Junkie and how to set up a coupon code that can be shared with your customers.

What is E-Junkie?

E-Junkie provides “buy now” and “add to cart” buttons and a shopping cart that will allow you to sell digital products or tangible goods. It does not include a content management system like many e-commerce solutions, rather, you can use E-Junkie with the CMS of your choice. This separates E-Junkie from a lot of open-source and hosted e-commerce systems, which may be a good or bad thing depending on your needs. It integrates with PayPal, Google Checkout, Authorize.net, ClickBank, and several other payment processors.

We started using E-Junkie a few months ago on Vandelay Premier, where we sell graphic design resources. In our case, we were specifically looking for an option that would allow us to sell digital products while still using WordPress as a CMS. While we looked at several different options, E-Junkie proved to be the best fit for us and it was quick and easy to set up.

A lot of online shops that sell digital products use E-Junkie because it does a great job of handling the secure delivery of digital files, and it has a number of additional features that some of the other “light” e-commerce solutions do not offer.

The cost of using E-Junkie will vary greatly from one user to another. The cost starts at $5 per month and that allows you to sell 10 different products and it gives you 50 MB of storage space if you’re selling digital products. Prices increase depending on the number of products and amount of disk space, although you can opt to host the files yourself in order to save money on the disk space. The lowest-priced plan that allows for self-storage of digital products costs $18 per month. There are no bandwidth costs and no transaction fees.

Read More ».
Page 2 of 3123