Tag: webdesign

Responsive design has been here for a long while now and it is probably one of the most important design aspects of a website today. A responsive website will flux in size and layout depending upon the users media device, unfortunately embedding youtube videos into a website doesn’t always work well on your website but using some simple css code can help you find a way around this. In this post I give some brief code and a quick guide on making responsive youtube videos for users of WordPress.

Jetpack Edit CSS

I want to make this as simple for novice coders to follow so I recommend installing and activating the JetPack plugin from WordPress so that features to add CSS will be easier. Once you have activated the JetPack go to Appearance tab and then ‘edit CSS’.

If you are a bit unsure of CSS this is what the following code means. This code looks for the element ‘iframe’ in the ‘video-responsive’ css class and gives the video a height of 100% and width of 100% doing so ensuring the iframe takes on the width of its containing div. If you are feeling a little lost, don’t worry, simply copy the code and paste it into your Jetpack edt css feature and continue to follow the guide.

.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}

.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}

This is the first stage of designing a responsive div tag for video, next you need to gather the embed code provided by YouTube.

Stage 2: use embed code and div class to create responsive youtube videos

Copy the embed code from your youtube video, go back to your WordPress website, ensuring your page is in ‘HTML’ mode rather than ‘visual’ and paste it into the desired page in the location you wish to display it.

Once the code is in place surround it with <div class=”video-responsive”>replace with embed code from YouTube</div>. This will call the css we wrote earlier to ensure the video responds as we want it to.

Once all that is complete save your page and refresh your browser to see your YouTube Video responding something like that seen below.

If you have any problems creating a responsive youtube video please feel free to leave a comment below and I will get back to you shortly.

There is a lotta lotta information out there about digital marketing and how to get your website seen and generate sales leads and by golly, don’t you just worry that you’ve missed something? Hubspot, probably one of the biggest, if not the biggest, digital marketing agencies offers a service to see if your website is meeting the online marketing ‘grade’. Take some to grade your websites digital marketing via how well it is performing.

Continue “Grade your websites digital marketing via Hubspot”

If you ask any web designer then they will tell you that they are currently programming websites while keeping HTML5 and CSS3 in mind. It really is the way to go in this day and age. Just what are they though? Let’s take a closer look, shall we?

Now, every single website is constructed from HTML and CSS code. There may be a few more programming technologies behind the site (PHP for example), but it is only HTML and CSS which has the capability of displaying information in your browser. JavaScript can do this to an extent, but it will still need to be used in conjunction with one of the other technologies.

HTML is the technology behind the layout of the page. CSS is the technology behind the aesthetics. There is a degree of overlap which you will see if you learn the languages. However, if you are employing a Phoenix Web Designer to carry out the programming for you, you will not need to know about this in too much depth.

Now, just like any programming language, HTML and CSS are regularly updated. New pieces are added into the code to make it far easier for them to create certain features. HTML5 is the 5^th incarnation and CSS3 is the third incarnation. The idea is that these are the new standard. If you want your website to display properly in modern browsers then you will need to use both of these technologies.

HTML5 and CSS3 are modern standards. They have been designed in such a way to be much cleaner code. This ensures that sites that utilize them are very fast to load. Some of the features found in these new technologies, HTML5 especially, replaces items on websites where you would normally need a special plugin to display them. Take Flash for example. With HTML5 this has pretty much been ruled old technology. You can do everything that you want to do in flash with HTML5, and it does it much more effectively without the need to install any plugins.

Amongst the many features, both HTML5 and CSS3 have made it far easier to create websites that look fantastic on mobile devices. In fact, if coded well, you will have responsive design built in as standard to your site design. As mentioned before, HTML5 and CSS3 have ensured that old technologies with needed installation of plugins are now defunct. As a result, almost every website that follows HTML5 and CSS3 protocols should look fantastic on mobile devices. You are going to most likely need to wait until the mobile browsers are fully updated though.

As you can see, this is a very brief guide to HTML5 and CSS3. Sadly it would take up a whole book to go into depth on these. However, I do hope that the information here is more than enough to give you a nudge in the right direction and start to understand why your web developer is going to utilize them in your site design.

Author Bio: Kory Chesier is a professional blog writer, writes for HireaWiz a leading Phoenix web design specializing in custom web design, PHP development, Pay Per Click Marketing and SEO services.

Related articles across the web

• 30 Free HTML5 Templates for Responsive Website
• From Designer to Developer: A Brief Guide
• Analyst Watch: 2015 will be a pivotal year for HTML5
• Hour of Code: JavaScript
• The W3C, HTML5, And Catholic Virgins

How to create gradients was always the domain of photo editing software and vector creating programs, but now with modern technology and css3 you can create gradients with some coding that is fairly easy to learn. This is a brief guide on what you need to know on how to create gradients in css.

Where might I use gradients?

Gradient code is most likely to be used in buttons and backgrounds of websites or navigational system but don’t restrict yourself to  just the common places that they are found, if you have a good idea for use of a gradient then go ahead and try it out, there are no limits to experimenting with code and creativity, the only limits to design is your imagination and maybe a bit of technical understanding.

Selecting colours in the Hex code for your gradient

When creating gradients it is useful to know the hex codes of colours. A hex code is short for hexadecimal numbers which are as follows : –

0 1 2 3 4 5 6 7 8 9 A B C D E F

0 being obsolete of colour ( or we know it as black ) and F is white. Combining a set of these numbers together in how monitors display colour ( RGB, Red , Green & Blue ) we can create over 16 million colours. I have shown below how numbers choose the intensity of each colour, it does help if you have a little understanding of how colours mix.

#ffff00

I have shown above that two numbers given in a 6 digit hex code make up a screen colour, so for instance the first two digits, ff equals maximum intensity red followed by two more ff’s which equates to maximum intensity green but I have finished this code with 00 in the blue which means there will be no blue displayed in this code.

Do you know what colour this makes? If you are a painter you will think brown but actually we are not mixing paints here, we are mixing light together so the colour returned is in fact yellow! Watch this video below of RGB to see how light mixes, it’s quite insightful.

If you want to select colour easily then w3schools have a colour picker on their website here or if you want to understand computer colour theory further please visit this informative link from htmlgoodies.com.

I’m more a visual person, I want to be able to see the gradient

The difference between coding a gradient and visually creating one via editing tools is great and sometimes a few numbers on a screen is a little hard to understand for the novice css coder or simply for the general human being, but there is a solution! Colorzilla.

Colorzilla this is how to create gradients in css

Colorzilla allows you to play with gradients till you are blue in the face, pardon the pun, till you find the perfect visual combination. Just like major photo/illustration editing tools you have oodles of options like adding more colour stops, selecting preset designs, the orientation of the gradient, opacity and other things you can find in major applications for editing visual elements.

What is even better about Colorzilla is that once you have created your gradient

the code is also generated so you can easily copy and paste the gradient code into your css style sheet for the relevant element of your site, it even applies webkits for browser compatibility! It’s a great tool but it is also important to understand the code rather than simply cutting and pasting. You can find many reasonable tutorial websites and I recommend spending at least an hour a day on advancing your skills, the thing with our profession is that it is ALWAYS evolving so it’s important that you don’t decay when new technology comes about.

To play with the gradient website please follow the link below and secondly, please leave a link in the comment box below on how you have used gradients in your designs. Happy digital colouring in!

Create your gradients with Colorzilla today

Here is an alternative with fewer options

Linear Gradients

And finally, a gradient animator!

Gradient Animator

Free fonts for use on web are quite useful for the professional or student web/graphic designer using font face css and knowing where to find free fonts to use in your designs is even better! As a man who believes sharing in knowledge with others I have compiled a list of websites with varying free fonts for use on web below. I have also added a few where you have to pay and a couple of other tools for those who are wanting to develop websites to the latest html5 and css3 standard. If you know of any others please feel free to include it in the comment box below the post.

Free fonts websites

Please check that the fonts you are downloading are suitable for web before you use them, I know most of you will understand this but for those just starting to learn about web design check that the font will be a) compatible with all browsers and b) not slow down your site considerably.

Fontsquirrel

So you want to download fonts for free, well then fontsquirrel.com is a great starting point! A font on this site range from the fancy fonts, handwritten fonts to sans serif fonts. You can type in some text to their website and see font examples with each type face.

font files

The league of moveable type

free cool fonts are available on the league of moveable type, check them out, they believe in freedom of design!

cool fonts

Google Fonts

Google web fonts are totally free and really gaining in popularity. When choosing a font from the google fonts website make sure that its size isn’t going to effect the performance loading speed of your site. Google have also gone to the trouble of comparing different fonts with the google fonts making it easier to see google font combinations as not every font will match easily and it might look quite strange if too different but also if they are too similar this can be a problem also. google fonts google fonts download google fonts

NOT free fonts for use on web

Although its great getting free fonts sometimes paying a little fee can help you get fonts that really perfect the look and feel of your website’s brand image. Obviously there is is only so far free fonts can go and sometimes paying just a small fee for a custom font may not be so bad especially if you have many clients. The following websites are fee based but still worth a look.

Typekit

Fontdeck

Fonts.com

Webtype

Webtype is another place where you can download fonts for a fee.

http://www.webtype.com/

Other things to consider when selecting fonts for use on web

There are several things you must think about when selecting the fonts you use in your design and these are as follows : –

• Readability
• The mood the fonts give
• Font Compatibility
• Tracking/letter spacing
• Vertical Rhythm

Readability

Readability is all about how easy it is to read the font. At the end of the day it is important that the user feels that they can read the font easily, if they can’t then its kind of defeating the object of the task at hand. Make sure the free font you choose is easy to read.

The mood that the font gives

Even though readability should always be the number one reason for choosing a font ( in my opinion ) different types of typography give a mood or feel. Ask yourself is the font you have chosen given the appropriate mood or should you keep on looking for an appropriate typeface?

Font Compatbility

Font compatibility is also an issue, the modern way of typography expects two or even three different fonts to sometimes be used on a website. Making sure these fonts are compatible is really important. When I talk about compatibility I am talking about how they blend together. It is said that two font types shouldn’t be too different but at the same time they musn’t be identical either, there needs to be a good balance and on the likes of the Google Fonts website they give some suggestions of how you can pair certain fonts together.

Tracking/letter spacing

Tracking or letter spacing of a font is also important, if it is too close together it can look too cluttered and if it is too exposed it can be hard to read. I suggest that having a large space between each letter should only be used in titles if possible.

Vertical Rhythm

Vertical Rhythm is the hidden lines that make up a composition in a piece of writing. By using a vertical rhythm you will create a better UX and more likely to get the user to read your text. To find out if your website has vertical rhythm you can use a free bit of code from this website basehold.it

Earlier last year I did make another blog post about free fonts for web. Please visit the blog post here for more suggestions. I hope you find this post useful, please do share it and feel free to leave a comment in the box below.

Related articles across the web

• Web Design Calendar 2015
• Typecast – A Gift of Web Design & Better Web Typography
• Marketing yourself online for tradies and specifiers
• Rotating Words using CSS3 Animations
• 10 Web design trends you can expect to see in 2015

The CIW Web design Professional Certification program

As the 2014 has started and the wed designing field has become very advanced and in order to cater the demands of the increasing requirements as well as standards of the web designing sector, the need for certified and competent professionals have also accelerated so that they can handle the complex mattes and criteria for this sector. The companies, enterprises as well as the firms are in search for the professionals who can develop and design cutting edge web pages and designs for them. The CIW is a popular vendor of many webs designing certification series. The CIW Web Design professional certification is one of them. This certification is a very important and powerful web designing certification which is also recognized and accepted by the best employers of the world.

Getting the Certification

In order to get certified in this valuable certification, the individuals have to pass the two exams:

• CIW Web Design Specialist
• CIW E-Commerce Specialist

The CIW web design specialist exam is considered more important for the web designers. By passing each of these exams the individuals can get certified in each certification. But by passing both these exams successfully the individuals can get the status of CIW Certified Wed Design Specialist. This status is very important for getting several secure career options. The exam preparation is for the CIW web design specialist professional is very crucial and the individuals must prepare themselves for the certification.

The Targeted Audiences of certification

This certification is a professional and advance level certification program. The certification successfully targets the wed designers for advancement of their career. Several other individuals related to this field can also take certification for securing several higher paid designations with job security. The following are the targeted audiences of this certification:

• Art Directors
• Web and Graphic Designers
• Creative Directors
• Web Marketing Professionals
• Advertising Professionals

These individuals can take this certification program for advancing their current employment status to a secure way and can also gain several other professional advantages. By getting this certification the individuals can also increase their competency and credibility in web designing services even in the complex and critical environments.

The scope and value of the certification

We can summarize that in the current market situation, the CIW wed Design Specialist Professional Certification program can offer a wide range of occupational benefits to the individuals. This professional level certification programs are also recognized by the best employers around the world and top organizations. The employers hire and prefer the certified professionals to develop cutting edge designs. The web designing services offered by the certified professionals can provide advantages to the employers so, they provide higher salaries to these certified professionals. But in order to get this useful and important certification the candidates can take help from the Selftest Training website. This website is considered as the best certification exam preparation website. Individuals can get sample questions and preparatory references by visiting this website and can get guaranteed results.

Featured images:

•  License: Image author owned

By Mary Desilva

The Writer is Internet Marketing guru, blogger and writer, She is writing from last 3 years on many different topics, she also loves cooking, dancing and movies.