Website Knowledge

HTML, CSS, Javascript, jQuery and more

Difference between Web Design and Web Development – A Brief Guide

 

In order to know the difference between web design and web development, it is first important to get a clear idea of what the two are and then try to understand at their differences. So, we will begin our article with brief and to-the-point definitions of each of the two. 

Let’s begin with web design! This can be explained as a customer-facing part of any website. It covers the ‘in the picture’ aspect of a website. Web design refers to the way a site looks and the way customers interact with it. It is the job of a web designer to determine how to put together the principles of design in order to create a site that attracts the potential visitors of that particular site and also how user-friendly a site is. If the site is easy to use, customers would find it easy to navigate around, which will prove to be beneficial for the website. This part is the front-end of a website and includes flash banners, login page, dynamic menus, and so on. 

Now, let’s discuss what web development is. The back-end of a website is known as the web development. The back-end of a website is the area that the visitors cannot see. However, it is the web development that makes the required information available to the visitors in the correct format. It refers to the programming and the interaction part of a website. Here, it is the job of a web developer to focus on the ways in which a site works and how customers can get things done on it. To put it in a nutshell, web development is all that is related to application, code, program creation and modification. 

According to the above explanations of the two important aspects of a website, we can say that web design is something that determines the look and the feel of a website. This is totally related to the layout, navigation and colors of a site. It may also have graphics and logo design as a part of its visual presentation. On the other hand, web development offers the functions and features of a website. It stands in total contrast to the web design, because it includes back-end programming and not the face of a website. These functions may include e-commerce, registration, database applications, and content management systems. It is that part of the website which allows the visitors or users to carry out functions of the website, for instance, logging in. 

Since the two are completely different systems, they have a different set of tools for their aid. Web design tools include software like Flash, fireworks and others. In contrast, web development tools include Javascript, SQL, ASP and XML. 

The main thing that you need to know is the fact that both web designing and web development are important aspects of a website. Obviously, in order to increase traffic on your website you need your website to be attractive and user-friendly. Thus, web design is something you need to focus on. But at the same time it is equally important that your website carries interesting features and functions to keep the interest of your visitors alive in your website. So, web development plays its role here.

Timed Pop-up using Javascript, Jquery and Cookies

Recently I worked on a website which required that a particular section of the website should show a popup to the visitor after they have been browsing the section for a minute. This popup should only show at certain times and once it has been show to the visitor it should not pop-up again during that session. So to put it all together clearly, it had the following requirements:

1. Pop-up should show after a visitor has been browsing for a minute.
2. It should only show in a certain section of the website (multiple pages).
3. Once shown it should not pop-up during that session.
4. It should only show during certain hours of the day (US Time).

So because the pop-up needs to show on mulitple pages I needed a way to store the visitor’s time when they first hit any of the pages of that certain section. For this purpose I used a cookie. So the idea was that once the visitor lands on one of the pages, it will store the time in a cookie. Then I would check every 5 secs if the visitor has been there for a minute. If yes, I will show the pop-up. Once the pop is shown I will store another cookie that the pop up has been shown so don't show it again.

Hopefully you are familiar with Jquery, if not,  it is just a library of javascript that makes writing javascript easier. You can read more here. I used the Jquery cookie plugin. I wanted the pop-pop to look cool so I used Jquery Fancybox plugin. For cookies I used the Jquery Cookie plugin, it makes using the cookies even simpler, see here.

<script type="text/javascript"> $(document).ready({ var CurrentDate = new Date(); //I converted the date to universal time becasue the visitors will come from all different time zones. Remember we need to show the pop up only during certain hours. CurrenHour = CurrentDate.getUTCHours();

So my client’s requirement was the pop up should not show during 02:00 and 08:00 UTC hours. So I checked for the condition as follows:

if(!(CurrentHour>=2 && CurrentHour<=8)){ //Checking if the cookie exists already if(SearchCookie == null || SearchCookie ==""){ //Store time in cookie var VisitDate = new Date(); var VisitTime = VisitDate.getTime(); $.cookie('SearchCookie',VisitTime) timeout('ShowPop()',60000) }

So if the pop already exists then the code below will run

function ShowPop(){ .("popup-link").click{ var VisitDate= new Date(); var CurrentTime = VisitDate.getTime(); } } } }); </script>

So the above code first checks if the time is not between UTC hours of 2-8 it runs the code, and in the code I check if the cookie exists already because there is a possiblity that the user has already seen the popup or the user was on a different page of that section of the website, and so the time has already been stored in the cookie. Below is all the javascript code:

<script type="text/javascript"> $(document).ready({ var CurrentDate = new Date(); CurrenHour = CurrentDate.getUTCHours(); if(!(CurrentHour>=2 && CurrentHour<=8)){ //Checking if the cookie exists already if(SearchCookie == null || SearchCookie ==""){ //Store time in cookie var VisitDate = new Date(); var VisitTime = VisitDate.getTime(); $.cookie('SearchCookie',VisitTime) timeout('ShowPop()',60000) } function ShowPop(){ .("popup-link").click{ var VisitDate= new Date(); var CurrentTime = VisitDate.getTime(); } } } });

Show DIV with jQuery Fancybox on Page Load

If you ever have to show some content e.g. a div with fancybox pop up on page load, its pretty simple. Add your content to a div and then hide it with css using display:none. As described in this post, if you have fancybox version 1.3.4, add the following code

Add the following code and you should see the fancybox popup with the hidden div as its content.

$(document).ready(function(){ var popup= $('#popup').css('display','block'); $.fancybox({content:popup}); })