All posts by Mike Ditka

Web Designer’s Free Time

It’s May 30th, this month as a Web Designer and Developer “without an office” I feel a little lonely, not lonely because I don’t have a boyfriend 🙂 “it’s normal” 🙁 but because the job I get is only one and that’s it small scale. So much time left without work feels very wasteful, this kind of condition may be very coveted by office workers out there. But this condition is not so exciting for me 🙂 I am very thirsty for work and new things.

Business Plan If you think about it with a positive mind, this condition is not too bad, because with lots of free time you can use it to learn new things (new techniques in the programming language that we master, or learn a new programming language altogether, if you are a graphic designer can practice again so that the skill becomes more stable).

Finally Choice Falls.
It turned out that I didn’t do everything, because my choice was to update the dynamic web system (you could say a simple CMS for use in personal projects) that I already had. And finally now I have the 2nd version of my previous system, with new added features. In addition, at the end of this month, there was a company that asked for a proposal to offer a website repair, so the 2 days at the end of this month were quite useful in the end, to analyze the website and prepare the proposal. Hm…so a lot of free time is not wasted too much, because some of the time is quite useful even though it doesn’t produce material in the form of money, but makes improvements to the old system, this can save time in the future, and on the other hand, hopefully the proposal is accepted. Amen.

Another alternative.
Are there other alternatives to get around the amount of free time so it doesn’t go to waste?

The answers are many, for example:

We can read the articles that have piled up on the FeedReader list *if you like reading.
Setting up a new business in addition to your current job.
We can also take advantage of free time by going out of town to get a new atmosphere.
Visiting friends or relatives who we rarely see during work because we are too busy.
Use it as best as possible to really total rest.
Basically, don’t let your time go to waste 🙂

Okay, see you in June, friends, hopefully June has a lot of work.

Install Sass on Windows

Hi developers, this time we will try to install Ruby on windows and try using Sass.

If you are someone who always deals with CSS, we recommend you to try Sass, because with Sass writing CSS code becomes more interesting and fun. As it is written on the official website of Sass

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

The main thing to do to get started using SASS is to install Ruby, because SASS runs on top of Ruby.

For use on windows we can use the Ruby Installer for windows.

  1. Download Ruby Installer (latest version 1.9.3-p327)
  2. Install the downloaded Ruby

Install Ruby Until it’s finished
Install Ruby Until it’s finished

  1. After Ruby is installed, go to Command Prompt Ruby ( Start -> All Programs -> Ruby 1.9.3-p327 -> Start Command Prompt With Ruby )

Open Command Prompt Ruby
Open Command Prompt Ruby

  1. Install Sass with the command

gem install sass

Install SASS
Install SASS

  1. Installation process is complete

Start Working With Sass
After the installation process is complete, it means that now we can start making css using Sass.

  1. Create a folder in htdocs (example: mysass)
  2. Create an HTML File (index.html) with the following structure in body and /body


Have fun playing with ruby

while the head and /head sections don’t forget to include the css file compiled from sass

[html] [/html]

  1. Create a sass file with the name style.scss the contents are as follows
  • Remember the extension is .SCSS

$back-color: #333;
$text-color: #f8f8f8;
$box-margin: 30px;
$box-width: 500px;

background: $back-color;
color: $text-color;
margin: $box-margin auto;
padding: $box-margin / 2;
width: $box-width;
There we can see, CSS can now use variables, division and subtraction.

Interesting right?

For further use of .SCSS or .SASS syntax, please read on the sass website.

  1. Reopen Command Prompt, go to mysass folder

Here my mysass folder is in E:XAMPPhtdocsmysass

  1. Compile the .SCSS file to become a .CSS file with the following command

5 Principles of Good Web Design

There are some basic principles that make web design look good.

Many people say that design is relative, why? because, for example: for some people a website with lots of colors is good and attractive, but for some people it looks bad and tacky. There are those who call minimalism good, but there are those who mock it as a mediocre design.

The debate will never end, because people’s heads are different, people’s perspectives are different.

However, there are certain factors that will affect people’s views about a website design that will look good. At least we as Web Designers must be successful in conveying the content of the main message on the website that we create. That is the basic goal that website builders must adhere to.

Here are some of the important things to pay attention to:

Maybe some of them have also been discussed in the previous article about 5 Easy Tips to Improve Blog and Website Design

  1. Good Website Navigation System

However, the navigation system is the main weapon of a website, if the navigation system is not good (placement and shape) then the visitor will be confused, lost, difficult to find the information he is looking for.

So, no matter what kind of design you make, make this navigation system as good as possible, so that it is easily accessible to visitors and easy to understand the flow.

Also Read:

Creating Dropdown Menus With Jquery and CSS
Tips for Creating Horizontal Menus With CSS
Creating Menu Slides With CSS and Jquery

  1. Consistent in terms of branding/logo
    Logo and website name, these are important things in a website, so make this the best, regardless of your design form, place the logo in a place that is easy to see, because this is the main identity of the website created. Don’t let the client not know who the website he is opening is.

In addition to correct placement, consistency in placement or position must also be considered, avoid the position of the logo/brand or company identity changing positions. For example, the Index logo is on the top left, on other pages it’s on the top right.

Branding problems are usually related to the color of the website, the color of the website usually refers to the color of the brand/logo. So make it consistent in this section.

The Coca-Cola website, for example, applies website colors that match its brand, so that its identity is maintained, the dominant website color is red.

  1. Use Images Well.

Did you know that images or other visualizations are the most interesting things for website visitors? sometimes visualization in the form of images is more understandable than just text, it’s no wonder now there are lots of infographics, because it makes people more interested in reading it than just text at all.

You know that a lot of people hate reading books that are all written?

The picture was well received by everyone, you also know that some people buy books because they see the good cover? Those are some proofs of the power of an image.

So play around with the images in your website design, make it as attractive as possible, and as good as possible.

Also Read:

29 Ways how HTML5 will change websites for the better – Infographic
Surprising facts about making T-shirts – #Infographic
Learn Color Theory For Websites

  1. Use of Fonts Well (Typography).

What is the content of a website? Some websites on the Internet consist of WRITING.

Therefore, this article is the main source of information needed by visitors when visiting a website, so use fonts wisely, use fonts that are easy for visitors to read.

Also use a clear font color, if your background is ORANGE, don’t use a YELLOW font, because it makes the writing unclear, but use a dark font, such as Black or Brown.

Read also:

Basic Typography Guide For Web Designers

  1. Smart Utilizing Multimedia.

As with pictures, videos or other multimedia, some people like it, so it’s no wonder that television is more popular than radio.

Because with multimedia people will be easier to understand, because in multimedia such as video, it usually consists of Images, Sounds and Movements. This is more quickly understood by others. Remember that not everyone who visits our website can bear to read long writing and does not guarantee that he understands what we write, but with Video or Multimedia, the writing is not clear, there is still sound, the sound is not clear, there are still visual movements. So it’s easier to understand right?

So much for writing this time, hopefully it will be useful for you.

Facebook’s New Look Concept TWD

A Swedish designer named Fred Nerby has created a responsive and systematic design concept in the style of Metro Style for the world’s largest social media platform called Facebook, and the results are amazing. COOL.

Creating a design for a large-scale web is indeed very proud for a designer, although later the design turned out to be rejected by Facebook if he actually submitted it. Certainly not a big deal for him, at least he already has an amazing portfolio, and is seen by many people in the world. Nothing to lose, he has shown that he is ready for other big design projects from other companies who believe in his abilities by seeing the results of his work.

Here is the work of Fred Nerby.

Don’t forget to follow us on Twitter @tut_web



Twitter Website Redesign Concept Inspiration

Twitter is the top social media in the world, hundreds of millions of people use Twitter every day. From that number of users, many ideas must be born to continue to beautify the appearance of the social media website with the Jewish number. Designing a large-scale website concept is indeed the desire of designers.

Previously, we have seen the Facebook New Design Concept created by Fred Nerby, this time the Twitter Redesign Design Concept was created by a UI/UX Designer from Budapest, Hungary named Zsolt Hutvagner. This Zsolt Hutvagner design looks attractive, quite elegant and very trendy, almost like Fred Nerby’s Facebook Design, namely (Bringing Microsoft’s Metro Style design).

Here are some screenshots of zsolt hutvagner’s Twitter Redesign Concept.

Installing the Click & Drag Feature to Replace the Browser Scrollbar

Installing the Click & Drag feature to replace the browser scrollbar has become a current trend, especially with the increasing use of tablet PCs, this technique is growing and widely implemented in various websites.

A week ago, I redesigned the look of my personal site to be simpler, as well as added a blog. However, because it looks simple, I don’t want my site/blog to look “unfinished”.

That’s why I added some features. One of them is the click and drag feature to replace the browser scrollbar function. The click and drag feature of the system works the same as the swipe feature on touchscreen devices.

Interested to put it on your site / blog too? Follow this very easy tutorial.

We will need the following resources:

jQuery. Download the latest version of jQuery Download
NiceScroll. Download from GitHub
File Cursor (we will hotlink from Google)
But before entering the tutorial, there are several points that I must mention, namely:

Especially for WordPress. NiceScroll should work in jQuery v.1.5 to v.1.9. But in practice, NiceScroll can’t work in jQuery v.1.8.3 built-in WordPress (v.3.5.1). I don’t recommend you to replace jQuery WordPress with jQuery v.1.9, because that will make a lot of WordPress functions and plugins unable to work. But if you are curious, please try to tinker yourself.
With the click and drag feature, text selection (text block) becomes impossible. So if your site/blog requires text selection, pass the “touchbehavior:true” parameter in this tutorial. Consequently, you will not get the click and drag feature, but your page scrolling will look smoother and more attractive.
Touch Screen
Image by Ebayink

Basically, it can be applied to any HTML document. Even what you have today (for site/blog owners). Just make sure there is no other jQuery to avoid clashing.

Paste the code to call jQuery into the HTML document, just above the /body tag.

Then for the parameters, use the following code:

function() {
The full parameters are on the developer’s site or you can download the file provided.

Currently, your site/blog page already has a click and drag feature. However, there is one thing that bothers me, namely the cursor does not change to “grab” when we “drag” the page. For that, let’s add a cursor grab with CSS and javascript.

In your CSS file, insert the following stylesheet:

.hand {
cursor: url(, default !important;
.grab {
cursor: url(, default !important;
Then in the HTML document, paste the following javascript into the body tag:

onmouseup=”this.className=’hand'” onmousedown=”this.className=’grab'”
And done. Please refresh your document, and enjoy the new features of your site/blog.

Here is the result of the tutorial above.

Easily Create Web Designs With Twitter Bootstrap

Creating a website design with Twitter Bootstrap is indeed quite interesting, this html & css framework is increasingly popular and popular because it makes it easier for web designers to create layouts, twitter bootstrap uses a grid system for layout settings, there are also features to create responsive websites so that the website display can be opened on mobile (Tablet PC/Handphone), besides Twitter bootstrap also provides ready-made codes that can be easily used such as tables, buttons, forms, etc.

Twitter Bootstrap is listed as the most downloaded code on Github right now, the community is growing and growing. There are a lot of tools related to twitter bootstrap customization.

FYI: This website was also created using Twitter Bootstrap

However, with so many features that Twitter Bootstrap has, it turns out that there are still people who are not satisfied, humans are always looking for ways to make everything more practical, even though Twitter Bootstrap has actually shortened the time.

Layoutit (

Here the Web Design Tutorial will introduce a website that will make it easier for you to work with twitter bootstrap.


With layoutit making designing with twitter bootstrap easier, we just need to drag & drop to create the desired layout.

The Web Design Tutorial team has tried and found it very easy to use layoutit. We just have to open the website after that press the Start Now button, then start by doing the Drag & Drop menu on the left and place it on the right until the design you want is complete.

Twitter Bootstrap Layoutit
Twitter Bootstrap Layoutit

If you are finished, just click the Download button, you will be presented with a code that can be downloaded or just copy the code that has been generated.

This is interesting information, hopefully it will make it easier to make website designs.

10 Characteristics of a Good Quality Web Designer

Web designers who have good quality are easy to find, there are lots of web designers today, especially with the increasingly busy web industry in Indonesia in particular.

If you are looking to build a website with a good design, or you are looking for a web designer who you will invite to be your work partner in building a website, then try to take your time to read the following article so that you are not wrong in choosing people. (web designers). Because some designers are quite professional in their fields but very many are amateurs and irresponsible.

Also Read:

Basic Tips to Become a Web Designer
Web Designer’s Free Time
Here we will provide at least 10 qualities that a good web designer must have or we can say quite professional in their field, so that it can be your reference in choosing a quality web designer.

  1. Good Listener.
    Image by Radu Chibzii

A good web designer absolutely must be a good listener, so he can understand what your needs are and consider what he should give to fulfill your wishes in a website design.

  1. Consider Your Ideas.
    Many web designers are selfish, he only focuses on what he wants to do with your website and does not care about what you want the website you want to create. The web designer does have knowledge of what he will create, but he also has to consider what his clients want.
  2. Communication.
    In addition to being a listener, a good designer must have good communication as well, he must be able to explain the terminology about websites in the language you do with him. He is also easy to contact and easy to talk to.
  3. Knowledge of Technology.
    If you want to test your web designer’s skills or knowledge, then test his knowledge of web technology. He must be familiar with the tools used in making a website.

Responsive Web
Image By IntelFreePress

He can be said to be a good web designer if he understands HTML, CSS graphic issues, layout design, media issues, browser compatibility, and other issues surrounding the web.

  1. Use of Terminology.
    A web designer not only knows technology, but he also has to understand how to use the technology.

For example, currently the term “Responsive Web Design” is booming, a designer may know in theory but can he already use it? has he ever made Please see how he uses the technology, either by looking at his portfolio or from the ideas he gives.

  1. Keeping Business and Goals Together.
    You certainly want your website to look good, a good web designer must also be committed to making a design that has good quality too, a web designer must understand that what he makes will be / add to his portfolio. By understanding that, usually web designers will always give their best in every job.

For that you can look at his portfolio, whether he consistently makes good ones or only occasionally.

  1. Save Your Time and Cost.
    Sometimes web designers just think how to make him earn a lot of money from you. So be careful with web designers who ask for too long or too fast processing time, especially if they are paid hourly or daily. You should determine how long the target and the costs will be before starting work, a good designer will not waste your time and will not rush too, rushing can make the results not optimal.

But keep in mind, don’t press the price of the web designer, because it can make him work with a less happy heart, so the results are not optimal, give the best price so that he is happy and can produce good work.

  1. Good at Combining Old Designs With New.
    A good web designer can combine what was there before with new ideas, in terms of making a new website design for example, he will give a new touch by not leaving the character of your old website.

But if you want something that is completely 100% changeable, you should talk about it firmly too, because some designers work by looking at how you/your company was before.

So ask him to provide input on what he will do with your website, before you actually hire him, a good web designer must be able to describe what he will do.

  1. Have a Good Portfolio.

Most importantly, of course, we have to see what he has done, this is quite important when we want to work with other people. Look at his work, if you think it’s interesting, don’t just look at one, but see several, whether he consistently makes good or not.

  1. Recommendation / Big Name.

If he is highly recommended by others, of course he is a qualified person and has a good image in the eyes of others. So try to see his actions in cyberspace, with his activities on social media or in groups/forums, if he often provides solutions to questions in the group, you can say he has reliable abilities.

That’s it.

Hopefully this can be your reference before choosing a web designer, if anyone wants to add, please write in the comments section, so this article can be more useful.

Things to consider before creating a website

There are many things that need to be considered before building a website so that the website that is built can run according to plan and not cause losses or regrets in the future.

Apart from being a website owner, as a good Web designer & Developer, we also have to know what things need to be considered before creating a website.

Among these things, for example, choosing a domain name, a domain name is very important to think carefully before building a website so you don’t regret it in the future, a good domain name is also very important so that other people can easily remember the website, so choose a name. a good domain for your website.

We have had experience with choosing a domain name, where the name of this website was and because of various things related to the use of the word wakaka, we were forced to change it to another name, namely

An example of another important thing is the goal, the website must have a clear purpose before it is created, the determination of this goal can give encouragement to the website owner, the goal is also useful so that the website does not deviate from its original purpose. As the purpose of this website is to provide information and useful things about the world of web design & development in Indonesia, so we can focus on filling the content on this website with these things.

There are many more factors that need to be considered before building a website, an infographic from quite comprehensively describes it for us, as a reminder for us.

Hopefully this can be your reference before building a website that is useful for you and others.

So later before you create your website, think carefully about what you have to prepare, re-open this page so you don’t forget.

Making Youtube Videos as Website Background

Making video as a website background has become a trend lately, many web designers have implemented it, and it is proven that the results are quite good and make websites look attractive.

Usually musician websites, movie promotion websites or personal websites related to music and movies are suitable for using this trick to support the appearance of their website.

Movie background
Image by

In this article, will give an example of its use, namely putting a video as a website background, here the video used is a youtube video so it doesn’t take up hosting bandwidth.

Related previous articles

Play video on website with html5
Upload video files with codeigniter
Start With Equipment.
As usual, before starting we prepare the equipment that we will use.

Video from Youtube (Dear God by Avenged Sevenfold).
Google Webfont (Patrick Hand SC).
Jquery Tubular.
Creating HTML Structure.
After the equipment is enough, it’s time for us to create the HTML structure, actually to make a youtube video a background we only need a div with ID #wrapper


In the head and /head sections, we insert google web fonts, jquery and Jquery Tubular.
While in the body, we create the following structure.

Video: Dear God by Avenged Sevenfold | back to tutorial

For the appearance of the website, you can insert css, please adjust this css according to your needs.

in this demo we are just trying to apply the video as a background and place other elements on it.

To run a tubular jquery so that the video is played in the #wrapper div ID, we write the following javascript (jquery) script.
Place the following script just above /head.

$().ready(function() {
$(‘#wrapper’).tubular({videoId: ‘mzX0rhF8buo’, mute: false, ratio: 4/3}); // where idOfYourVideo is the YouTube ID.
To determine the youtube video you want to play, take the ID of the youtube video, for example this Avenged Sevenfold video:
take the tablished ID and put it in the videoID section in the above javascript.

Other options that we can use for video settings with Jquery Tubular can be seen below.

ratio: 16/9 // usually either 4/3 or 16/9 — tweak as needed
videoId: ‘ZCAnLxRvNNc’ // toy robot in space is a good default, no?
mute: true
repeat: true
width: $(window).width() // no need to override
wrapperZIndex: 99
playButtonClass: ‘tubular-play’
pauseButtonClass: ‘tubular-pause’
muteButtonClass: ‘tubular-mute’
volumeUpClass: ‘tubular-volume-up’
volumeDownClass: ‘tubular-volume-down’
increaseVolumeBy: 10 // increment value; volume range is 1-100
start: 0 // starting position in seconds

If the steps above are followed correctly then the video will appear like the following demo, and if you want to try it yourself you can download the script.

To run this script must be connected to the Internet because the video is on Youtube.

Demo | Download Script
so much

Until here this tutorial, hopefully useful for you, please use this trick to increase the browsing experience on your website (UX).