Web design

How to make Youtube Iframe Responsive

The default Youtube video iframe embed code is anything but elegant and will break most responsive web designs if you try to embed a Youtube video on your website. Fortunately there’s a workaround for everything and we can easily turn any Youtube embed responsive using some simple CSS magic. Here’s how:

Youtube embed responsive

When you use the original iframe embed code the result may look something like this, where the red box is just a normal wrapper and our video is breaking outside of it:

Responsive iframe embed code not fitting

To counter this, the first thing we do is remove the fixed width and height from the Youtube iframe code altogether. We won’t be needing these any more!

<iframe width="420" height="315" src="https://www.youtube.com/embed/rNRNYZATe9g" frameborder="0" allowfullscreen></iframe>

Then we place the entire iframe inside a relatively positioned container and absolute position our Youtube video inside of that wrapper like so:

CSS

.wrapper {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
}
.wrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

HTML

<div class="wrapper">
 <iframe src="https://www.youtube.com/embed/rNRNYZATe9g" frameborder="0" allowfullscreen></iframe>
</div>

The result is an elegant Youtube video that no longer breaks our fluid website design and will fit inside any parent container perfectly.

Youtube embed responsive fitting container

Tool to make iframe responsive

It can get quite tedious to manually have to do this every time you need to make a Youtube iframe responsive or have to publish a fluid youtube video quickly on your blog so I have built a neat little online tool especially for You! (and for me for that matter).

Using this tool You can make Youtube video responsive simply by entering the URL of your video and clicking submit. The generator will output the above code with your video embedded responsively inside the wrapper just like I explained in this article.

If you think this is pretty neat why don’t you hit the like and share buttons below and help me out a little? ;)

Share!

How to add unique meta description tags in WordPress without plugins

When I checked my website for errors in the Google Search Console earlier this morning, I noticed a warning about duplicate meta descriptions on my WordPress website. I had 205 pages with duplicate tags and at first I didn’t think much of it, but I decided to find out the significance in terms of better SEO just in case. I was shocked to realise that having duplicate meta description tags throughout your WordPress blog is a bad idea and Google doesn’t like it one bit!

Google: Don’t duplicate meta description tags

Google’s Matt Cutts has officially stated in his video that it’s better to have no meta description tag than to have numerous duplicate meta description tags on all of your pages and categories. This is especially frustrating because by default most WordPress templates have only the one description tag displayed throughout the entire website. Check out this video with Matt explaining everything:

Unique meta description without plugins

It’s clear that Google doesn’t endorse the use of duplicate description tags and there are numerous plugins available that try to work around it (YOAST for example) and while I don’t personally have anything against these plugins, one might still consider avoiding them in order to gain better website loading speeds because it’s common knowledge that having too many plugins active on your WordPress site can actually slow down the loading speeds and make the end user experience that much more annoying.

Just a few lines of code

In your header.php file remove the default <meta name=“description” content=“Your description”/> and instead use the following code:

<?php if ( is_home() ) { ?>
<meta name="description" content="Your main and most important description shown on homepage"/>
<?php } ?>
<?php if ( is_single() OR is_page() ) { ?>
<meta name="description" content="<?php { setup_postdata($post); echo esc_attr(htmlentities(get_the_excerpt())); } ?>"/>
<?php } ?>

The above code uses conditional statements to check whether the currently displayed page is either a homepage, a single post or a single page and then uses “Your main and most important description shown on homepage” on your homepage and the default post excerpt in the description of posts and pages respectively.

In my experience you don’t really need to display the description tag anywhere else so I removed it from elsewhere. And in case you’re worried, Google is fairly good at coming up with descriptions for the rest of your page so your search results should still look very nice.

Double check just in case

This code works on my template, but you should still double check so after editing the header.php and replacing it with the original try refreshing your page (ctrl + F5) and then view the page source, especially the meta description tag, and see if it’s working. First try it on the homepage (main index) and then click on any posts or pages you may have and view the source on those pages also. If you see the post excerpt inside the description tag it means everything is working as it’s supposed to.

Share!

Design Features of a Great Website

You can’t skimp when it comes to great design features that make up a top notch website. Failure to include any of them could be disastrous for your site’s conversions from visitor to customer. Let’s talk about some of those necessary features.

First of all, the site must have a good overall appearance so that is appealing to the visitor. It has to be attractive and professional looking. The proper use of color is very important, by using two or three primary colors that will create a mood and a proper tone for your theme. What those colors should be depends on the market you’re targeting. Tech sites tend to use dark, edgy colors, whereas a site dedicated to home and family generally uses bright pastels.

Second, the text should be easy to read, the most readable style being black text on a white background. Remember that if your text is too outlandish or different, it will distract and give the opposite impression that you desire. Other color backgrounds will work if they fit into overall theme and give the text enough contrast to stand out well. The best size for your font is between 10 and 12 points.

The graphics should be pertinent to what you are attempting to get across as your overall message. The graphics are very important because they lend to your message, and support your overall effort. The graphics can be overdone, but they are very necessary to move the eye of the reader and to overcome boredom that can set in if there is just text present, and nothing else.

Using higher quality professional images gives your site a professionalism that will set it apart as opposed to candid shots only.

Keeping your site well organized is something that is not lost on your viewers. There should be a high degree of function and ease of navigation. The visitor should not even be giving a thought to how they will navigate. If the site is well built, the process will be very obvious and the navigation process will be simple and at the forefront of the experience, making the process effortless.

The content of the website should flow and provide the information in which a typical visitor would require. The best way to present the content of your site is to package it in organized fashion in short paragraphs. The eye will flow better with these short looks and tend to stay with it.

Often people are interrupted when on a website or their attention will wander, so long paragraphs don’t work well. Be sure to put labels or titles on each important segment to further identify what you want the reader to see.

Provide appropriate links to more detailed information, or to proofs and examples. Keep your message flowing, and speak to your visitors needs. After all, the reason they are on your site in the first place is because they want information.

Use the words I, we and us sparingly, if at all. Simply state the message, and be very descriptive as you do.

Avoid all the flash and animation, and particularly music. This does not always load well on everyone’s computers and can be very annoying. While autoplaying videos has been proven to increase conversion rates, keep in mind that it will irritate a certain segment of your visitors.

Be sure your site is well optimized for the search engines and mobile devices. Most content management systems make this easy to achieve now, so there’s no excuse for your site not supporting smaller screens.

Site design is the first step to generating revenue from a website. Put your best foot forward by including all of the features people expect — no, demand — from a professional presence.

Share!
Filed under: Technology, Web design

I just made a new Blogger template for Pictures.ee

Pictures.ee is a brand new website or should I say, photoblog, where you’ll find various nature related photography made by two amateur photographers in Estonia.

Pictures.ee Blogger Template Screenshot

Due to a limited budget we decided to use Blogger as our Content Management System mainly because of the free hosting it provides. It’s true that Blogger has a lot of limitations compared to other more sophisticated CMS out there, like WordPress, but for now it serves its purpose just fine.

I really wanted to keep the design simple so I removed most of the usual clutter that comes along with every basic template. At first glance, you might not even recognize that the site is running on Blogger. The original comments section has also been removed and replaced with a sleek Disqus plugin where anyone can comment by logging in via Facebook or Twitter etc.

The thumbnail galleries are grid-like or at least that’s what I was going for. There is no custom mobile theme for Pictures.ee so we are currently using the default mobile template that comes with every installation, but as the website grows I might reconsider and create a mobile theme with a bit more personality.

Big thanks to Background Labs for providing me with a neat wooden background image. It really makes the template whole!

Share!

Dental Website Design Is A Lucrative Business For Most Website Designers

Whether it has been just for a scheduled check-up, pulling out a wisdom tooth or having fillings placed inside your teeth, most of us have had the need to visit a dentist at some point in life. Let me guess, the bill was anything but reasonable? That’s because a dentist is nothing more than a businessman and their dental office is their monopoly. It’s not a coincidence that in most countries your healthcare will not even cover any of your dental problems.

Dentist businessman medical website designHave you ever noticed how your dentist is gently trying to market all sorts of different “As Seen on TV” products to you and your family? Every time I had to visit a dentist, I ended up with a lot of overpriced stuff like state of the art toothbrushes, pastes and dental floss products. All of which would have been a lot cheaper had I bought them from the local drugstore!

Because your dentist is always looking out for the best deals and is therefore considering you as their client and not their patient, it’s only logical that they are willing to pay top dollars to website designers who will build a website for them to help them lure in more prospects.

Medical Website Design

Dental websites and medical websites as a whole are a great and profitable sub-niche for all of us website designers and developers, but up until now this market seems to be a little bit underrated.

The average price range for a fully functional dental website design ranges anywhere between $10,000 – $15,000+ not to mention the monthly SEO services and other additional features a dental website might want to implement, yet there are only a handful of website designers who are providing these services.

Just take a look at 99 Designs or other freelance website design marketplaces to know what I mean. Hundreds of dental offices are looking to build a website or redesign their old one, but only a couple of freelance designers are actively bidding on their projects.

Share!

HD Asphalt Pavement Background Image for your next web project

I took this with my Samsung Galaxy S2 which has a pretty decent 8MP camera for a smartphone. Added some finishing touches using a freeware photo editor software called PhotoFiltre and the result is a wonderful, slightly dark asphalt background image. You can use it wherever and however you see fit! I would appreciate if you linked back to my site though, but it’s not required.

Click on the image to enlarge

Grayscale HD Asphalt Background Image

Share!
Filed under: Web designTagged with: , , ,

Closable jquery full screen popup window and how to make it using CSS

Have you ever wondered how some websites display a closable div or a full screen overlay on top of their main content to say something really important to the viewer? I had to do something similar for my old portfolio that is no longer updated, to direct readers to my new and better looking portfolio instead. Here’s how I did it.

HTML popup window is dead

I just had to say this before I continue. Do not use HTML/Javascript pop up windows- most browsers block these by default and if you mange to bypass the popup blockers, you’re just going to annoy your readers so much they will leave and never come back. Seriously, don’t do it! Instead, use a more modern approach by making a jquery popup box.

Full screen overlay effect in CSS

Consider a simple container div. We need to make its height and width match our viewport/screen. We can do this by applying a 100% viewport width and height:

#box {
height:100vh;
width:100vw;
background:white;
}

Depending on what padding/margin rules you have set for your body element, you might see that the box is not fully covering the screen yet. Besides, we need to position it outside the normal flow anyway, because it needs to stay on top of everything:

#box {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}

Now it should cover the whole screen with no margin anywhere. But is it on top of your main content? Probably not. You need to add a high enough z-index to it so it will stay on top:

#box {
z-index:999;
}

But wait… now you just have a box covering the whole screen and your content cannot be accessed. We need to have the box initially hidden so we can make it visible using jquery later on:

#box {
display:none;
}

Right now when you load it up, nothing should show because we have hidden the box. It’s advised to only load the overlay div when the whole page has finished loading so we will put the call inside a document .ready function using jquery:

<script>
$(document).ready(function(){
  $( "#box" ).fadeIn( "slow", function() {
    //Box loaded
  });
});
</script>

The box should now load only when the rest of your website has loaded first. So far so good, but there is no way for your user to close the box. To do this, we need another div (it can contain a cool icon if you wish). I’m using a simple X icon with a transparent background found on Google:

<div id="close">
    <img src="http://ynef.net/portfolio/src/close-button.png" alt="Close" height="64" width="64"/>
</div>

The close button would look stupid if it was loaded immediately so we need to hide it the same way we hid the box itself in CSS:

#close {
display:none;
}

While we’re at it, we should position it in a place where it makes sense too. I suggest putting it in the top right corner of your screen with 10px away from both the top and right side (the display:block will make the entire div clickable):

#close {
position:absolute;
top:10px;
right:10px;
display:block;
}

Finally don’t forget to add a higher z-index than what you had for the box. In our case a z-index of 1000 should do the trick:

#close {
z-index:1000;
}

Back to jquery! Since the close button is hidden at first, we need to make it visible after we have loaded the box. Let’s also add a .click function to the close button that will hide everything when clicked:

<script>
$(document).ready(function(){
  $( "#box" ).fadeIn( "slow", function() {
        $( "#close" ).show();
        $( "#close" ).click(function() {
        $( "#box" ).hide();
        $( "#close" ).hide();
    });
  });
});
</script>

Now that we have covered everything that’s happening, I can let you copy and paste the whole code as one:

CSS for fullscreen div

#box {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999;
display:none;
}

#close {
display:none;
position:absolute;
top:10px;
right:10px;
display:block;
z-index:1000;
}

And the jquery

$(document).ready(function(){
  $( "#box" ).fadeIn( "slow", function() {
        $( "#close" ).show();
        $( "#close" ).click(function() {
        $( "#box" ).hide();
        $( "#close" ).hide();
    });
  });
});
Share!