Articles tagged as ‘Web Development’

10 Beautiful Pre-Built Website Examples and How They Can Increase Your Productivity

Website building techniques, including wireframing, using online website building tools, or outsourcing design/development activities have their pros and cons.

Wireframing is a popular approach, but it can be difficult and time consuming when designing complex websites, and it does not address website development.
The quality of online website builders can vary, and most are subscription-driven, which can add to project costs.
Outsourcing can yield excellent results, but it can be an expensive approach and the website owner has minimal control over his project. Incorporating changes can significantly add to a project’s cost.
Pre-built websites get a project off to a rapid start, and given the right tools, will maintain that momentum.
Coding is not necessary when using a pre-built website together with efficient editing tools. Thus, a website-building tool that includes pre-built websites is an affordable approach.

The net result – a significant increase in productivity at a lower cost…

Read More ».

7 Factors that Separate Good Websites from Bad Websites

Most of us naturally form opinions about the websites we visit. Some of them we love so much that we come back several times a week, and others leave us with a bad experience that causes us to never return. But what is it that determines whether a website is good or bad? As individuals we each have our own opinions and we’ll never completely agree on which websites are good and which ones are bad, but most of us will base our feelings on similar factors. Here is a look at 7 factors that I feel are influential in this determination…

Read More ».

PHP 7.0 is Finally Here!

Recently, the PHP development team announced the release of PHP 7.0, the latest version of the popular web development language. PHP 7.0 has taken quite some time in the making, and its release was being anticipated for months now. Based on a new version of Zend Engine, PHP 7.0 claims to be twice as fast […]

Read More ».

5 Reasons Why Page Builders can do a Better Job than WordPress Themes and Website Builders

In the website design world there are today two mainstream ways to build a website: 1) use a premium WordPress theme, or 2) use a website builder. Much can be said for either approach, but there is a third way – using a WordPress page builder. This article will discuss the essential PROs and CONs of each approach as well as some overlooked facts…

Read More ».

HTML5 Tutorials, Resources, Guides & Tips for Developers

HTML5 offers plenty of potential for web designers and developers, especially when combined with CSS3. The possibilities of HTML5 are exciting, and many designers/developers have been creating amazing things that weren’t possible with HTML and CSS in the past.

The life and career of a web designer/developer requires learning new techniques rather frequently due to changes in technology, and HTML5 is no exception. This post will serve as a guide to help you find tutorials and resources that will allow you to improve your own skills with HTML5.

Here’s a collection of HTML5 tutorials, resources & tips to help you understand HTML5.

HTML5 Tutorials:

Design & Code a Cool iPhone App Website in HTML5

Design & Code a Cool iPhone App Website in HTML5

Read More ».

Desktop IDEs: Our Top Choices for Web Developers

To successfully develop PHP sites, you’ll naturally want to have a great development environment. When creating a website, you will likely also need to edit HTML, CSS and even JavaScript files, which is why utilizing an IDE will help you easily and effectively develop your site.

In this article we’ll walk through the most popular IDEs: Codelobster PHP Edition, Eclipse, Komodo IDE, NetBeans, PHPStorm, and NuSphere. Each of these programs has different advantages for programmers, and our goal is to briefly describe the coding possibilities…

Read More ».

Pre-made Layouts – a Time-Saving Alternative to Wireframes

No matter how experienced you may be with using wireframe techniques, it is still a time consuming activity, as is researching a conceptual design as a first step in getting a new project off the ground. While wireframes provide basic frameworks for website pages, pre-made layouts have become an increasingly popular alternative.

Conceptual designs need to be developed before wireframing can commence. Conceptual designs are an integral part of a pre-made layout.
Initial sketches have to be transferred to a grid in to initiate a wireframe process. This step is not required when using pre-made layouts.
Incremental enhancement of a wireframe design takes time. Editing a layout is an extremely rapid process.
With a pre-made layout, you can build a website in a small fraction of the time it would take when using a wireframe approach. You can literally hit the ground running…

Read More ».

Learning the Basics: Prototyping in JavaScript

In my book, Learning to Program, I teach the concepts, principles, and tools needed to program the right way. I’m not going to try to do that here. This article will teach you just enough JavaScript to prototype, and some of the things you learn will be just plain ugly. But that’s okay because you’re just prototyping. If you want to learn more, and learn why those bad things are bad for real applications, check out my book.

By the time you’re done reading this article, you will have learned just enough JavaScript to make a prototype registration form that checks for unique usernames and has a password strength indicator. We’ll be using an online editor called CodePen to take care of a bunch of the hard stuff. The hard stuff is interesting and important to learn, but again, that is not the purpose of this article…

Read More ».

11 Handy Shortcuts for Customizing Any Selectable UI Element

Online forms are some of the most common interfaces for user interaction. Many web fields rely on user input from the keyboard, but others have pre-filled answers waiting to be selected. These may include checkboxes, file inputs, or even select dropdowns.

Although select menus are fantastic they can also be a little boring. All web design should be functional, but great web design incorporates pleasant aesthetics too.

The following ideas center around dropdown select menus for website layouts. Web designers often like to design their own custom fields which best-suit the project at hand. Select menus and similar inputs can be tricky to customize, but modern techniques make the process a whole lot easier. Check out these plugins and code snippets which can be perfect for customizing any form field…

Read More ».

4 Crucial Components to Optimizing Page Load Time On Your Website

We live in a fast-paced era where speed is the dominating factor that governs the success of our personal and professional skirmishes. And, when it comes to a website’s page load time, its impact amplifies even more!

Today, users have become so impatient that they don’t want to suffer even a single second delay when surfing a website. They need the information – they came to seek on a website – to be displayed within a snap or a blink of an eye, to be exact. In fact, even a 400 milliseconds gap is long enough to frustrate the visitors and cause them to bounce off to a different webpage, according to Google’s engineers.

At the end of the day, speed is what you need to leverage to beat the competitors and, not to mention, to take the top spot of SERP. After all, Google has already laid out that a website’s load time or speed is one of the key SEO factors that regulate its SERP ranking.

So here I’m presenting you some of the effective practices that will help you tweak the loading time of your website (be it a desktop or mobile) and offer a lightning-fast surfing experience…

Read More ».

How Speed Up Your Front End Web Development Process

Web design is often lumped together with a lot of other ideas like UX design and web development. Although these areas do overlap, the skill sets are not interchangeable and not all designers know how to code (or vice-versa).

But those who do code websites are often very task-oriented with a focus on the final outcome. This means it’s a good idea to work with best practices to speed up the whole development cycle. It’s not an easy task, but there are plenty of free resources out there to help.

This article includes some handy tips and resources for a more expeditious development process. As with most projects, why should work take longer than it needs to? Those who reinvent the wheel often have a good reason for doing so–but it’s not the best choice 100% of the time. Instead utilize these resources to improve the speed and efficiency of your own frontend workflow…

Read More ».

30 Best Free Calendar & Datepicker jQuery Plugins

Some might assume that an Internet loaded with free code would breed indolence. Yet it seems developers are willing to contribute their help to projects more than ever before. JavaScript libraries are a microcosm of the larger open source community – specifically jQuery with its ever-growing popularity and easy learning curve.

One such area of broadened potential would be jQuery-based calendars for websites. Although date & calendar interfaces have sparse usage, they come in handy for very specific circumstances. And when building a site that requires this type of interface you’ll be happy to know there are dozens of open source plugins available.

I’ve catalogued the 30 best free jQuery plugins that offer datetime functionality. Some are more developed than others and each plugin has its own set of benefits. The best part about using open source code is that it’s easy to customize for your own purpose. So peruse through this collection and take a look at any plugins which pique your curiosity…

Read More ».

Ultimate Guide to HTTP Status Codes and Server Error Messages

Most of us are familiar with the gut-wrenching, nerve-wracking error codes like 404 and 500. But did you know that not all HTTP status codes and server error messages are mean and scary? Although some of these numbers could appear in the tech remake of Nightmare on Elm Street, others should evoke a sense of excitement and jubilation! But these “good” status codes are rarely visible to the average Internet user.

So this leads us to one final question: How do all these status codes work?

In this guide you’ll find all the necessary information to understand the concepts behind HTTP status code messages. Whether you’re a designer, developer, or just a curious Internet fanatic, this information should be useful to people of all backgrounds. It is my goal to clarify the process of website requests and how the web server passes information to your machine…

Read More ».

13 of the Best Hosted CMSs

Open-source content management systems like WordPress and Drupal get a lot of attention on design blogs, but they are not the only options when it comes to choosing a CMS. There are a number of hosted CMSs available that are popular with designers and their clients.

While the features vary form one hosted CMS to another, several of the primary benefits are common to all or most of them. Things like having the hosting included, the possibility for designing and developing sites very quickly, availability of pre-designed templates, and support tend to be listed among the benefits of choosing a hosted CMS.

Some hosted CMSs allow designers the opportunity for a private label, meaning that designers can brand the CMS as their own. In this case clients will see the designer’s branding rather than that of the company behind the CMS. In many of these cases the designer can also earn a commission on monthly hosting fees, which provides a nice stream of residual income for designers who use the CMS with a number of clients.

Here is a look at some of the best and most popular hosted content management systems…

Read More ».

43 Brilliant Free jQuery Image Gallery/Slider Plugins (And 14 Tutorials to Make Your Own)

jQuery Image Galleries

jQuery image galleries (also known as homepage sliders, slideshows or image carousels) have become more and more common on websites since the inception of jQuery in 2006. Designers and Photographers are especially attracted to them because they allow you to present many beautiful images in an interesting way. You can easily load up multiple images in the carousel and present them in a single position on your site without taking up too much room.

However, there are several issues with using jQuery Image Gallery/Sliders that you should be aware of before you jump the gun and add one to your homepage. They aren’t ideal for every type of website, and in some instances they could actually hurt your website.

Read More ».

8 Small but Powerful Tips for a Standout Website Design

Every one of your clients wants to (or at least should want to) stand out from their competition. To be distinguished is to be memorable. Your client’s job is to provide a solid business. Your job as a web designer is to make sure that they get both noticed in the first place and remembered so that they have an audience to whom they can demonstrate their excellence.

Creating a standout website design is not exactly the easiest task. It is much easier to pick a common layout and fill in the blanks or to pick a design trend and build a website around it. Neither of these methods will help you create a website that breaks the mold, though.

Read More ».

How to Help Your Client Decide if a Native App is Necessary

More and more people across the world are using their mobile devices to access digital content. According to eMarketer, mobile phone use will grow from 61.1% to 69.4% worldwide. The same article also claims that nearly one-fourth of the global population use a smartphone monthly, but by 2017, this number will increase to 50%.

American cell phone use has already surpassed the global numbers. The Pew Internet Research discovered that as of 2014, 90% of American adults own a cell phone, and 58% of those cell phone owners have a smartphone. Interestly enough, though, America only ranked number 13 in the 2013 list of countries with highest smartphone penetration. The top 5 in the list were United Arab Emirates, South Korea, Saudi Arabia, Singapore, and Norway, respectively:

Read More ».

10 Helpful Resources for Testing Responsive Web Design

Testing is a critical part of the responsive web design process. The purpose of using a responsive layout is to make the website useful on any type of device, but without extensive testing it’s not possible to know for sure how the site is behaving in different situations. Fortunately, there are a number of different tools and resources available that can help you to test your responsive designs. In this article we’ll take a look at 10 helpful tools that you may want to try for yourself…

Read More ».

25 Free and Premium jQuery Menu Scripts

If you are designing or developing websites chances are you are going to be using jQuery on many of your projects. Navigation menus are just one of the elements of a website that can be enhanced by jQuery, and there are a number of ready-made scripts that can be implemented into your work very quickly.

While you always have the option of coding a jQuery menu from scratch, sometimes there is a script already available that will help you to accomplish exactly what you need in a fraction of the time it would take to code from scratch.

In this post we’ll link to 25 different jQuery scripts that can be used in your own work. Some are free and some will cost a few dollars. (the free ones are listed first).

Premium jQuery Menu Scripts:

jQuery Menu ($5)

jQuery Menu

Read More ».

Website Designs that are People-friendly are Google-friendly

Google has always had the goal of making sure that their search engine provides the most relevant results to searchers. Through the use of algorithms, Google determines how related a site is when an Internet user completes a search for a certain keyword or keyword phrase. Recently, though, Google has made some very drastic changes to its algorithms. These updates have left many unaware website owners wondering how to make their sites appear on Google searches.

Read More ».

Should I Use a Hosted E-Commerce Platform?

When you’re trying to decide what platform, shopping cart, or CMS to use for an e-commerce site the options can become overwhelming. You could go with an open source option, a simple shopping cart for selling digital downloads, an enterprise system for large shops, create your own custom system, or choose a hosted platform.

In recent years several hosted e-commerce platforms have gained in popularity, partly because they are very easy to setup and use. Every option will have pros and cons, and in this article we’ll take a detailed look at hosting platforms to help you decide if this is the right option for you or your client.

What is a Hosted E-Commerce Platform?

A hosted e-commerce platform will provide you with web hosting as well as the e-commerce functionality. You’ll pay one monthly fee that will cover all aspects of the service, and you’ll get support from one company for both the hosting and e-commerce. A company like Shopify has created their own e-commerce system and it can only be used on their own servers. You can’t use a traditional web host and use Shopify on your site, it must be hosted with them. Of course, there are pros and cons of doing it this way, and we’ll look at them in just a minute.

Shopify

Read More ».

Programming Skills Most Desired by Employers in 2014

It’s no myth that programmers are a highly sought after group in companies all over the globe. In her Forbes article on the Top Jobs for 2014, Jacquelin Smith analyzes an EMSI job study, which found that software developer (applications and systems software) is "the higher-paying occupation that has produced the most jobs post-recession". She also points out that the Bureau of Labor Statistics projects a 30% increase in software developers between 2010 and 2020.

Joseph Mapua also points out in his article in SkilledUp that, according to the BLS, businesses are looking to hire IT and computer workers due to the high demand for implementing new technologies. Developing software, enhancing security, upgrading outdated systems are all areas for which organizations have a need for computer professionals.

US News Today came out with their list of top 100 jobs of 2014 recently as well. Software developer and computer systems analyst were the top two in the entire list! Within the list of tech jobs, the top 5 careers include these two plus web developer, information security analyst, and database administrator.

Read More ».

Online Courses for Learning Web Design and Development

Web design and web development are popular career choices right now. One of the great things about getting into the industry is that there are a variety of different ways to build your knowledge and gain experience. You can attend a college or university and pursue a degree in a related field, you can learn on your own, or you can taken advantage of a growing number of resources that provide online training. In this article we’ll look at the best websites that offer online training to help you learn how to design and/or develop websites. We’ll look at free resources as well as others that require payment. Of course, the free resources are generally more limited, but they can still provide a good starting point.

For those that require payment, there are a few different varieties. Many of the websites operate an a membership bases, where you will pay a monthly or yearly fee in order to get unlimited access to their training materials. Others will sell a variety of different courses, and you can select the specific course that you want to purchase.

Online Courses and Training for Web Design/Development:

Treehouse

Treehouse

Read More ».

Shopify Toolbox: Resources for Shopify Users and Designers

Shopify is one of the leading e-commerce options for companies and individuals who want to be able to quickly set up a feature-rich online shop. All Shopify users have access to free templates that can be used, plus a large and growing selection of beautiful premium templates that can be purchased for affordable prices. Shopfiy is a hosted system, so you won’t have to go through a complicated installation process on your server, and support and billing for e-commerce functionality and hosting is combined and managed in one place.

Many designers and developers love Shopify because it’s a great system to use for client projects. You can create custom themes for your clients, or even make money by selling your templates in their theme shop. Developers can also create and sell apps in the app shop. Shopify has a partners program that allows designers to earn a commission by referring clients, and they also have an experts section where you can get listed so Shopify users can easily find you for custom work.

In this post we’ll highlight a number of resources that will be very helpful to designers/developers who want to learn more about Shopify, and also for shop owners who want to find some great resources to make their e-commerce site even better.

Shopify Ecommerce

Read More ».

Using Parallax Scrolling without Overdoing It

Parallax scrolling has been around since the 80s when video games used the effect to make foreground images move at different speeds than background images. It wasn’t until about 2011, though, that parallax scrolling became popular on the web after Nike released its Better World microsite in January of 2011. At that time, parallax was new and exciting. It made a huge impression on first time visitors because of the stunning effects. Now, it has become an overdone effect that is (hopefully) slowly dying down.

Just because an effect has been abused, however, does not necessarily mean it should be thrown to the wind. Some websites use parallax scrolling in just the right amount and the right way – to pique the interest of viewers but point them to the right places. Even ecommerce sites can create some pretty excellent parallax that lends, rather takes away, from conversions. For other websites, parallax scrolling ruins the entire experience of the visitor, turning their site into something very un-usable and confusing. So how do web designers know how to correctly implement this effect?

The first bit of advice to remember is that there are plenty of other ways to make a site stand out and draw visitors in to an experience without parallax scrolling. But if you must use it, then make sure to keep the following points in mind.

Use It for the Right Website

Not every website will benefit from parallax scrolling. In fact, parallax is not beneficial for any website on which users want fast information. Parallax requires scrolling patience, especially if in between helpful information are a bunch of added graphics and cutesy animation. These distractions will usually end up annoying visitors who are in a hurry.

Storytelling websites, however, can benefit greatly from parallax scrolling. Again, you don’t want to create so many extras that getting to the right information is almost impossible. But a parallax effect can really add to the experience and emotional response of a story.

Read More ».

Factors to Consider When Choosing an E-Commerce Platform

Choosing the right e-commerce platform for your website is now easy task. There are hundreds of different options available with options in all different price ranges and with varying features. If you’re overwhelmed at the process of choosing the right platform for your site, or for the site of a client, the decision usually becomes much clearer once you’ve determined what is most important for your site. In this article we’ll look at some specific questions to ask yourself, or your client, to help lead to the right choice. Make sure that you take the time to make a wise and informed decision, because changing platforms down the road can often be a time consuming and costly experience.

General Categories of E-Commerce Options

Before we look at the factors that you need to consider, let’s first take a look at the general categories of e-commerce platforms. Most of the hundreds or thousands of e-commerce platforms out there will fall into one of these six categories.

1. Enterprise E-Commerce

Enterprise e-commerce systems like Magento’s Enterprise Edition are feature-rich and robust systems that are typically used by large or fast-growing companies. Of course, with the advanced features and capabilities comes a higher price tag.

Magento Enterprise

Read More ».

Technical Details to Consider Before Starting a Membership Website

Membership websites are often considered one of the best approaches for making money online. The recurring revenue generated by a successful membership website is an obvious reason that these sites are so desirable, but the truth is that running a membership website is not easy. Many customers are hesitant to sign up for on-going payments, so you’ll need to offer something that makes the recurring fee a worthwhile expense for your members. And in order to keep members you’ll need to work to add new, and valuable, content on a regular basis.

While getting and keeping members is certainly a challenges, it’s the technical aspects of setting up a membership site that present the biggest problems for most entrepreneurs who are looking to go this route.

A membership website needs to be able to do a few key things:

  • Allow new members to sign up
  • Process payments at the time of sign up and any recurring payments
  • Integrate the member accounts with the appropriate payments
  • Restrict access to protected content for anyone other than active logged in members
  • Provide active logged in members with the appropriate access to protected content

There are obviously other functions as well, but these are the basics. So if you want to start a membership website, how do you go about getting this set up? Of course, you could use a custom solution, but that would be very costly and/or time consuming. For the vast majority of people setting up membership websites the best option is to use an existing script or plugin that provides all of the needed functionality.

Finding the right option to power your membership website can be a challenge, but the good news is that there are more quality options than there were just a few years ago. Here are some of the leading options:

aMember Pro – aMember is a powerful, feature-rich solution that can integrate with a wide variety of content management systems. It’s probably the most popular option, in large part because it can be used with WordPress, Drupal, Joomla, Magento, phpBB, vBulletin, and much more. The down side of aMember is that it can be a little complicated to set up and it can be much more than is needed for some projects. The current cost for aMember is $179.95 for lifetime access with 6 months of free updates.

aMember

Read More ».

Udemy Online Courses: Effective Online Training

Udemy offers the best in online education for creative professionals. Whether you want to get promoted, break into a new industry, start a company, further a passion, or just accelerate your life, Udemy helps you learn from the amazing instructors around the world, enabling you to get there faster.

Udemy’s team recruits the world’s top experts, including New York Times best-selling authors, CEOs, celebrities, and Ivy League professors. These instructors have taught over 500,000 students on Udemy, helping them learn everything from programming to photography to design to yoga and more. Founded in 2010, Udemy is funded by Insight Venture Partners, Lightbank, MHS Capital, 500 Startups and other investors who previously foresaw the internet giants YouTube, LinkedIn, Twitter, Groupon and Yelp. Udemy is headquartered in San Francisco, California.

Today for only 8 more hours our users have been offered 75% off of any single course. If you have been thinking about trying out their training now would be the perfect time to get the best deal we’ve ever seen them offer. Here are a few suggested courses for you to check out.

USE CODE: DISCOVER775

Creating Responsive Web Design

Screen Shot 2013-10-31 at 4.26.15 PM

Read More ».

35 Brilliant jQuery Animation Tutorials

Creative designers can do some amazing things with jQuery. A wide variety of animation effects are possible, and these 35 tutorials provide excellent learning resources for anyone who is wanting to brush up their skills in this area. You’ll find tutorials for creative animated navigation menus, as well as for other types of animation that use jQuery instead of Flash.

Animate Image Filling Up Using jQuery

Animate Image Filling Up Using jQuery

Read More ».

A Comprehensive Guide to Becoming a WordPress Developer

Since WordPress is one of the leading content management systems out there it spurs countless people to become developers themselves. Some of the best I know in the industry emerged from these “DIY developers” – people who started looking at code as a hobby.

WordPress is a good medium to start out in because its functions are clear, the coding style is extremely transparent and easy to understand and the documentation is phenomenal (not to mention the huge community). With this article I hope I can give you a quick primer on where to start your long but – hopefully – fun journey!

Note to developers: There are quite a few instances where what I explain is not the full story. This is what Terry Pratchett calls “Lies to children”. It is difficult to explain programming concepts to beginners by going into maximum detail. When you learn acceleration in school you are not told that this is actually integral calculus, the sum of the area under a graph. You simply learn the result (speed over time). The idea is the same here :)

??????????

Read More ».

13 Resources to Design for Bootstrap

Twitter’s Bootstrap has rapidly grown into one of the most popular frameworks for web designers and developers. Bootstrap aims to make web development faster and easier, and a growing number of designers and developers are working with Bootstrap.

There are a lot of benefits to using a framework like Bootstrap, most of them focusing on the increased efficiency for building modern and responsive websites. If you’re a Bootstrap user, or if you are interested in giving it a shot, there are several resources that can help with the visual design aspect of working with Bootstrap, and we’ll look at them in this article. There are far more resources that useful for working with Bootstrap in one way or another, but in this collection we are focusing on those resources that help with creating a visual design.

Bootstrap 2.0 Photoshop Template
This free PSD file includes loads of elements that can be used to create your own Bootstrap-based designs in Photoshop. It come with things like buttons, form elements, typography, navigation elements, tables, and much more. It’s also available for Fireworks.

Bootstrap 2.0 Photoshop Template

Read More ».

15 jQuery Carousel Plugins

A common challenge during a web design project involves finding a way to display the relevant content in an attractive and usable manner. Carousels are often used for displaying images, text, and sometimes videos. If you’d prefer to save some time during the coding of the site you can use an existing jQuery plugin to create your carousel.

There are a lot of good scripts and plugins available, and in this article we’ll highlight 15 of them. Most of them are available for free download, but some of them are premium and must be purchased. Each comes with different features and options for customization. Hopefully you will find one that will be right for your next project.

iCarousel

iCarousel
iCarousel is a premium option (cost is $8 for a regular license) that supports touch gestures. It is highly flexible and customizable to allow you to create something unique. Both 2D and 3D options are available.

Read More ».

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 ».
Page 1 of 3123