Category: Web design

How to find a web designer with great skills at low website design cost to you

Finding a web designer who knows what they’re doing, yet can keep your web design costs low, is like finding a needle in a haystack. The whole industry is saturated with big agencies and corporations who simply mediate between the web designer and the client, taking a huge amount of money in the process. Capitalism at its finest! The trick to finding a low cost web design for your business is to avoid the big guys.

How to find a web designer for a small business web design

Most top web designers work alone

It’s common for a web designer who is just getting started to get a contract from some semi-professional web design agency, but once they have built a decent enough portfolio they are going to look for ways to free themselves from the corporate bull. Web designers are just like any other artists- they are at their best when left alone for long periods of time.

Hire a web designer with a smaller portfolio

It’s fun to look at a massive web design portfolio of someone who has been around for a long time and has already established a solid business, but it’s usually not that fun to look at their price tags, if you know what I mean. Not only that, but these guys probably have a lot on their plate anyway, so the overall client & designer relationship might suffer as a result.

SEO + Web Design

Nowadays these two literally go hand in hand. Don’t make the mistake that my client made by having two different people do two different jobs. SEO (Search Engine Optimization) is not that hard to learn so the next time you are looking for web designers for hire, ask them about SEO and how they will implement it as they build your website. If they have no idea what you’re talking about then you might reconsider hiring them.

Look for designers who are clear about their web design pricing

I always recommend drawing at least some lousy sketch about what you’re looking for. It doesn’t have to look great! A good web designer can give you a pretty accurate price estimate based on what you have made. If they start to go on and on about different “packages” that include this and that- lose them! That’s usually a clear indication of a capitalist agent after your wallet. And so what if the job ended up being a little more time consuming? A sincere web designer is always willing to go the extra mile without the extra charge.

Individual freelancers, not agencies!

Every agency will tell you that they are the best, but they’re most likely lying. Did you know that the most popular web design agencies are paying up to $10+ USD to Google just to get you to visit them… once? Sadly they continue to get more and more unsuspecting clients this way who make them ever richer just because they happen to have a lot of money to spend on advertising.

If you want to find the worlds top web designers in once place I suggest going to 99 Designs. This is a unique place with the greatest minds competing among each other in a friendly way and the winner gets to do a website design for you, exactly the way you want it!

How 99 Designs works

1. You create a detailed request on what it is that you are looking for in a website design

2. Tens, even hundreds of web designers create a simple sketch based on your request

3. You pick out the ones who did the best job

4. The final round starts where you get to pick the winner and get to work one-on-one until your website goes live and outshines your competition!

Isn’t this great?!

Share!

Goodbye GreyRound, welcome Messages From Outer Space

GreyRound was the first WordPress theme that I built from scratch. It took me a while, but I was finally able to publish it on the official WordPress theme directory which meant a lot to me considering it was my first theme. At the time of writing this post, the theme has already been downloaded more than 3,000 times. I’m not sure if it’s good or not, because I haven’t compared it to other themes, but for me the number feels pretty big. A quick Google search also shows that people are indeed using GreyRound for their websites and it just feels great!

I’m the type who can’t sit still for very long so only about a month later I already felt the urge of building another theme for my site. I wanted it to have Facebook like loading of content (infinite scroll with JetPack) and I knew it had to have something to do with outer space… and when you combine infinite scroll with a space theme, the title just kind of makes sense 😉

Messages From Outer Space took a little over one week to build because I used the underscores skeleton theme as a base (it’s an epic base and I really recommend it!). This way I only had to change a few things in the theme structure and had more time to apply different styles to it. The layout and the main menu are built to make way for a bigger website with more content. As ynef.net is slowly growing bigger and getting more categories, the menu had to be designed differently from GreyRound’s circles.

I also made room for sponsor advertisements between posts (plsdon’t hate) and applied responsive styling so it will look fine on almost every mobile device. If you are on a mobile device and have JavaScript enabled you can use the websites logo to toggle the main menu.

As of right now Messages From Outer Space theme is not available to the public because I felt like my personal website has to be slightly different from the rest that’s out there, but I might change my mind about that in the future.

Share!

Fluid and responsive website layouts become vital for your survival on the internet with the latest Google search update

What is a fluid layout?

A fluid layout is a website layout where all the containers remain proportional relative to the screen width. In other words if you were to make the screen smaller, the fluid layout will adjust itself automatically to fit your screen without breaking the containers or moving them under each other etc.

A fluid layout is easily achieved most of the time by replacing all fixed widths with percentages.

Replace this:

.container {width: 1024px;}

With this:

.container {width: 100%;}

What is a responsive layout?

Fluid responsive layout pictureA responsive layout uses media queries and is a little bit more technical, but the result will be even better than simply having a fluid layout. A responsive layout can change the look of your website completely when viewed on smaller screens and this is its main advantage over a fluid layout because if your screen is very tiny and you are using relative container widths then those containers could become too small and your website becomes hard to navigate (especially on touch screens).

 

The example below will change the containers padding and font-size automatically when the screen size goes below 1024 px.

 

.container {
width: 100%;
margin: 0 auto;
padding: 5% 2% 5% 2%;
font-size: 2em;
}
@media all and (max-width: 1024px) {
.container {
padding: 2% 0 2% 0;
font-size: 1em;
}
}

Google’s “mobilegeddon” will change everything

It’s called the mobilegeddon for a reason. Google is going to update its search in a way that mobile friendly (fluid and responsive websites) will get a significant advantage over regular fixed websites. In other words, if you’re not mobile, you no longer exist on the internet. (Google IS the internet in case you didn’t know that by now!)

Google is not doing this to punish you. The statistics show that more and more people are switching over to mobile devices to find relevant information online so it’s really just a step towards a better user experience in the long run. Besides converting your old fixed website into a modern fluid layout is no rocket science, but can still be challenging enough so that a better solution in some extreme cases would be a complete design overhaul.

Whether you need a complete design overhaul or a simple conversion to a fluid/responsive layout, I can help you! Just message me on Facebook or Skype (frank.petser) and we’ll talk more about it.

Share!

How to make a closable hover header div for your website announcements or ads using CSS and Javascript

html and css programming language pictureIt’s perfect for site news

In this tutorial you will learn how to make a “hovering” header for your website news, announcements or ads. I am currently using the same technique on this blog too and it should have loaded up by now. (not any more!) As you can see it can be easily closed by the red X button and it’s “hovering” over the main content so it keeps showing even when your users scroll down.

The requirements

This script uses Font Awesome and jQuery via CDN. This basically just means that you need to add the following code inside your <head></head> tags:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The HTML and CSS parts

This will be the face for your news box and you can customize things like font size, background color, padding, etc. Add the following code right after your opening <body> tag:

<div id="announcement">
 <span id='message'>Your message goes here. You can add a link if you want or whatever you like.</span>
 <span id='close'><a href="#" title="Close"><i class='fa fa-times'></i></a></span>
 <div id="delimiter"></div>
 </div>

* I’m using the delimeter div to clear both floats so it will not cause any styling errors.

Here is my CSS

Customize it to fit the design of your website!

#announcement {
    padding: 0;
    margin: 0;
    display: none;
    background: #CCFF99;
    height: auto;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
 z-index: 9999;
}
#message {color: #000; font-size: 1em; float: left; padding: 0 2.1% 0 2.1%;}
#close {position: fixed; top: 0; right: 0; padding: 0 2.1% 0 2.1%;}
.fa-times {color: red;}
#delimiter { clear: both; }

* The position: fixed; along with top: 0; and left: 0; are what make the div hover over the main content. Same goes for the close button- just replace left with right to put it on the top right side of your page.

* z-index is a useful property because it specifies the stack order of an element. By giving it an unrealistic value we make sure it will stay on top of every possible element on your page.

* I’m using display: none; so that it will only display after Javascript has determined that the page is fully loaded.

* The fa-times class is for our close button. Font Awesome is really awesome 😉

Finally the Javascript

This is what makes everything work nicely! Add this code inside your <head></head> tags:

<script>
 window.onload = function () {
 document.getElementById('close').onclick = function(){
 this.parentNode.parentNode.removeChild(this.parentNode);
 return false;
 };
 }
 $(document).ready(function() {
 $("#announcement").delay(2000).fadeIn(500);
 });
 </script>

* I use the window.onload function to execute the script only after the whole page has finished loading. If your user is waiting for the page to load and at the same time a news box appears, it might scare away a potential client.

* You should also notice the getElementById(‘close’) and $(“#announcement”). Do not change these, they are the ID’s of the close button and the news box itself.

Share!

GreyRound theme is now available to download for free from WordPress

It’s finally accepted

I initially submitted the GreyRound theme for WordPress to review more than 4 months ago, but because this was my first ever attempt at creating a new WordPress theme completely from scratch, there were quite a few things I missed and I was asked to change those.

 

After hours of reading the WordPress Codex I was ready and submitted the 2’nd version for WordPress to review. Weeks passed… three weeks to be exact. I was very disappointed to see that there had been no activity around my theme any more. It later turned out that the guy who was supposed to review it for me had abandoned the thread- I guess he had other things to do…

 

So my theme got assigned to a new moderator called Poena after about two months. This is where things finally started moving somewhere. Many thanks to Poena for being a very supportive reviewer! She helped me through all the things I forgot to implement and when I didn’t know how to do something she first made sure I learned about it on my own and then proceeded to add her own ideas. I think it’s great that the reviewers at WordPress actually care about you getting better in your skills and help you learn like that. So after a total of nine revisions the GreyRound theme was accepted.

 

Download GreyRound 0.0.9

To download my first WordPress theme, GreyRound, simply visit the link below and don’t forget to rate!

https://wordpress.org/themes/greyround/

Share!

How to add a Read More link on your content when someone copy pastes it

Everyone copy pastes!

Every day people copy and paste paragraphs, quotes and anything else you can imagine from one place to another online. Copy pasting has become one of the most common elements of social media as well because we all love to share something we think is cool with our friends. When was the last time You copy pasted something? Chances are you still have that data on your clipboard.

Get backlinks on copied content

How to add copyright read more link back to your site on copy paste text
At this very moment hundreds of thousands of people are sharing something via email, social networks, blogs and messenger apps by copy and pasting information. Wouldn’t it be awesome if your website would somehow automatically add a read more link along with the text that someone copies from your site?

It turns out there is an incredibly easy way to do this! All you need to do is add the following code just before your closing head tag. (it looks like this: </head>)

 

Copy and paste this code:

<script>
 function addLink() {
 //Get the selected text and append the extra info
 var selection = window.getSelection(),
 pagelink = '<br /><br /> Read more at: ' + document.location.href,
 copytext = selection + pagelink,
 newdiv = document.createElement('div');
//hide the newly created container
 newdiv.style.position = 'absolute';
 newdiv.style.left = '-99999px';
//insert the container, fill it with the extended text, and define the new selection
 document.body.appendChild(newdiv);
 newdiv.innerHTML = copytext;
 selection.selectAllChildren(newdiv);
window.setTimeout(function () {
 document.body.removeChild(newdiv);
 }, 100);
 }
document.addEventListener('copy', addLink);
</script>

I’ve turned the part that you can modify yourself red within the code so it’s easier to see. Just change that to whatever you like or remove it altogether to only have a link under the copied text. It’s up to you! The only thing you should keep are the <br /> tags otherwise the link will be added on the same line as the copied text and it makes it kind of annoying.

Note: I didn’t come up with the code myself. The original article can be found on StackExchange

Share!

Simple php guestbook script – Free download

I didn’t have anything better to do today so I decided to learn a little bit how to communicate with MYSQL databases using PHP. With this wonderful tutorial to help me I was able to construct a very basic guestbook script in about 4 hours. I know it shouldn’t take that long, but please keep in mind that this is my first ever attempt to create something like this with MYSQL and PHP.

Here’s a screenshot of the actual guestbook in action:

Ynef's random script screenshotAs you can see it’s very basic, nothing fancy.

You might notice that the title of my guestbook is ynef.net/b. Well, at first I wanted to create something similar to 4chan, but right now there is no option to post images- only text replies. I might add the option to browse and post images in the future when I learn more PHP.

What wasn’t mentioned in the above tutorial:

First of all if you follow the tutorial I mentioned above your script will work, but it will post an empty message every time someone visits or refreshes the page. To counter this I added if ($post != ”) right before the part where new posts are inserted into the MYSQL database.

This is a simple if statement that makes sure to only continue when the variable $post is not empty. Oh and don’t forget to put the code that inserts stuff into your database inside these brackets { }.

 

Another thing I added was the date of the post: $today = date(“F j, Y, g:i a”); Now you just have to echo the date variable $today along with your post.

 

I also tried making the guestbook a little bit more secure. By default if you follow the tutorial I mentioned your guestbook will be vulnerable to Cross Site Scripting attacks. In other words a bad person can submit malicious code along with his post and the next time someone visits the page that code will run. I looked into this briefly and I believe I was able to secure the guestbook by making sure that tags like <html> and <script> etc. are getting excluded when echoing the posts. It was really easy to implement with strip_tags();

 

Downloading and installing the free guestbook script

Download file: random.zip

 

Installing notes:

 

1. Open install.php in notepad and change the database variables to your own MYSQL database values

2. Upload install.php into your web directory and run it in your browser

3. Delete the install.php from your web directory

4. Open index.php in notepad and change the database variables to your own MYSQL database values

You can also change the title within the <title> tags and the guestbook name within the <h1> tags.

Yeah, I guess I could have just put the variables in one simple config file and included it in both install.php and index.php, but I was just too lazy.

5. Now upload both index.php and style.css to your web folder

 

If you followed the above steps then your guestbook should be working. If not please let me know!

Share!