Archive for the ‘Tutorials’ Category
There are many different user interface techniques for building a login/signup layout. One of my favorite approaches is to include both the forms on a single page and offer some navigation between the two. A large dropdown or popup modal window could work, and sliding panels are another example.
In this tutorial I want to demonstrate how we can build two sliding forms which rotate into a single page using jQuery. The effect doesn’t require very much code, and it’s mostly repetitive in nature. This should also work on smartphones and other mobile browsers with JavaScript enabled. The direct improvement to user experience is phenomenal and definitely worth considering to implement in your own website.
Live Demo – Download Source Code
Let’s get started by creating a single HTML page named index.html. I’m going to build on a simple HTML5 template which I use in most of my projects. I’ve copied this code over below:
With the introduction of CSS3 media queries, web developers can create CSS which enables web page to adapt and respond to whatever device renders it. Creating a responsive design, where elements on the web page are fluid, has never been simpler. If you have a basic understanding of CSS, then you possess all skills needed to get started with your own responsive design.
For this purpose we’ve created simple cheat sheet with most helpful media queries that will turn any website into a real “responsive marvel”.
Prohibition of resizing for mobile devices
1 | body{-webkit-text-size-adjust: none;} |
Stylization of links for mobile devices
1 2 3 4 | <a href ="tel:"]{ color: inherit; text-decoration:none; } |
Hide the text in Slider pagination in e-note
1 2 3 4 5 6 7 8 | .class{ width:..; /*sets fixed width*/ height:..; /*sets fixed height*/ text-indent:-100%; overflow:hidden; font:0/0 a; color:transparent; } |
Resizing the background (except for IE8 )
* For full width
1 | .bg{background-size:100% auto; } |
* Full height
1 | .bg{background-size: auto 100%;} |
More web developers are looking towards responsive techniques for problem solving. This shift can be attributed with more users accessing websites from a mobile device, smartphone/tablet or otherwise. Coding your layout with responsive media queries allows the same HTML code to render properly on all screen resolutions.
But there is an underlying problem with content in responsive web design. That problem is dealing with media – especially images and galleries within your webpage. Mobile browsers do not have the same screen real estate for displaying full-sized images or slideshows. In this article I’ll go over a few techniques for responsive media and how to style your images with extra CSS3 design flair.
Setting the Mobile Viewport
Before handling actual image content I should explain a few key tags necessary for mobile support. In most of the modern smartphone browsers any default website will automatically render at 100% width. Then you can pinch to zoom in closer and pan around the layout.
For a responsive design you want to disable this functionality. Otherwise all the tweaks we’re making will be useless in comparison. For any responsive layout design you want to add a couple meta tags into your document header. I’ve copied the code below:
1 2 3 4 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </meta><meta name="HandheldFriendly" content="true"> </meta><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> </meta> |
The most important tag here is the viewport which sets a number of important rendering traits. First the scale we’re generating is 1×1 which means no artificial 100% width display. Each pixel on your website will render the same on any mobile screen, regardless of the size or shape. Also the user-scalable value will limit users from zooming in and out of the layout. It’s a nice addition to keep your responsive site from breaking.
The other two meta tags aren’t necessary, but also won’t hurt to include together. Internet Explorer uses the X-UA-Compatible tag for setting the proper rendering engine(this includes Windows Mobile Phones). HandheldFriendly was originally developed under Blackberry but has gained some support in other 3rd party browsers.
Time passes but Photoshop is still the best image editing software used to created outstanding visual effect both for commercial purposes and for entertainment.
With Photoshop text effects you can make most designs stand out, and it is not that hard! Typography is defined as the art and technique of arranging type, type design, and modifying type glyph. With Photoshop and the right skills and techniques at your disposal you can push the limits of typography to the edge. This article is one of the most interesting “vessels” of Photoshop text effects tutorials that we were able to find. Feel free to use them.
***
***
Create a Retro Chrome Automobile Emblem in Photoshop
***
Turquoise Metallic Text Effect
***
Lots of people tend to describe their web design services as “high-quality” ones.
But what does the word “high-quality”, as defined, is the design quality or not? Well, there are several ways on how to define quality in web design. After all, if one determines what lets him create awesome web design, he/she can use the same techniques to hone personal style.
Here are the recommendations.
1. Distance between objects on the page.
One of the main advantages of a good website is the rational use of the space between the elements of design. If you pay attention to how certain elements are aligned on the page, you can improve greatly its appearance and create the feeling of a high-quality design. The main error in the determination of the distance between content elements – pinning them to the edges of the page. No matter how stylish the objects themselves are – if they fit them too much onto the page, it will lose style and quality.
Tips on how to align elements on the page effectively:
- Use the grid with guide lines – the grid will certainly help you understand the importance of the distance between objects.
- Try again and again – through trial and error, you can determine what should be indented.
- Free space – does not mean wasted – if you have a page with an empty space, it is not necessary that it should be filled.
- Less is more – rather than trying to fit more onto the page, produce less amount of content, add some space and place only vital info.
2. Perfection to the last pixel.
When design is almost done, the end result is already seen clearly. Sometimes it all depends on the smallest details, which user may not notice at all. “Perfection to the last pixel” is the method, when attention is paid to the lines, edges and borders. You can simply insert a line, and you can add a little detail, whether subtle gradient, simple shadow, 1px wide of a highlight – and your work will really stand out.
Tips for excellence in design details:
- Lots of attention to small details – those tiny things that complement the content of the page are the key to success.
- Think like a pixel – borders, gradients, lines, shadows, etc. do not have to be huge to produce the desired effect.
- Before and after – compare the results of your work: how does the page looks before and after you’ve applied various effects. Then you can see how effective they are.
The new HTML5 media trends are very popular chatter among web developers. It’s now easier than ever before to embed custom video or audio into your website. And best of all, modern web browsers are starting to adapt these trends so that we’re constantly pushing towards a single set of accepted file formats.
But in this tutorial I would like to share some ideas related to embedding custom HTML5 video. I want to use the open source HTML5 Media project as an example of one library we can include for interactive web development. I will also explain how we can make the video layout responsive so all the content will be fluid on mobile phones.
I’m hoping this tutorial will provide an introduction into embedded video media. In the past most web developers have been working with a custom flash player, which has been acceptable until recently. Now that the iPhone has absolutely no support for Flash plugins we need to push for an alternative. And the most promising advancement towards the future looks to be HTML5.
Hit the screenshot to see the preview, press Space to play, to see how video adapts to different resolutions simply scale the page. Hit the link to download the Source Code.
Specific Media File Types
Before we jump into the code I’d like to explain the separation of file types. Apple devices have always been supporting .mp4 video which is undoubtedly the most common. Practically everything can support .mp4 video except Firefox and older versions of Internet Explorer.
The alternative to these video formats is WebM which has been growing very quickly. These videos are generally high quality with lower file sizes, which makes them very quick to stream over the Internet. Between just these two filetypes you can support 99% of the visitors who come onto your page.
If somebody is using an older browser which doesn’t support either webm or mp4 then you could always try serving up a Flash alternative. Every browser including IE6 has support for Adobe Flash if the proper plugins are installed. MP4 videos use the H.264 codec which can be passed into any Flash video player and streams perfectly.
Many developers still try to support the OGG filetype which was really a spinoff from older versions of Firefox. All these releases are currently outdated, and so I don’t find OGG to be particularly interesting. Firefox 3.6 is the only version which doesn’t support WebM yet supports OGG. And obviously as more people update their Firefox installation these problems will naturally fix themselves. If you’re interested in these trends check out this great HTML5 video webpage which has some charts and statistical data for web developers.
Setting the Document Header
To get started let’s create a new blank index.html file. I’ll be adding in my own custom header information right after the HTML5 doctype declaration.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < !doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5 Responsive Video Player</title> </meta><meta name="author" content="Jake Rocheleau"> <link rel="stylesheet" type="text/css" href="style.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </meta><meta name="HandheldFriendly" content="true"> </meta><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <script type="text/javascript" <src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://api.html5media.info/1.1.5/html5media.min.js"></script> <!--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> < ![endif]--> </meta></link></meta></head> </html> |
It’s understandable how we need to include a large amount of custom tags in the document header section. The meta tags such as X-UA-Compatible and viewport are needed to force all mobile browsers into a 100% zoom state. That way the users aren’t pinching to zoom into the page every time it’s loaded onto an iPhone or iPad.
WordPress is one of the most powerful website platforms. The best thing about WordPress is that you can widen its functionality with any possible plugin and turn your website into anything you want whether that is a community website, ecommerce store, portfolio showcase site, membership site, online magazine the list is as endless as your imagination.
If you visit WordPress.org you will see that the number of extensions is absolutely incredible more than 20,000 and we know the wider the range is the harder the choice becomes. Still when picking the plugin you must not grab the first you come across, you need to consider multiple options
That’s why when picking any plugin for any possible functionality you need to pay attention to several important parameters that form trustworthiness rate of the extension. When relying on the plugin you can expose your site to an increasingly wide variety of risks. That’s why let’s discuss the problem with plugins and things you should consider before installing one.
What the plugin does is only part of the story. A good plugin will give you leverage, and won’t leave you stranded when its author abandons the development.
Here is a Guideline on How to Choose WordPress Plugins:
First and the most important you need to check how often the plugin is updated.
The ones produces years ago may not work in the latest versions of WordPress simply because they are not optimized for it. When using the administrative web interface for plugins press “Plugins >> Add new” and WordPress will tell you how many days passed since the plugin was last updated.
Can you find other works of this author?
Generally this may not be of the primary importance, still it will be good to know if you can trust the author of the plugin. Freelance developers have more time for a single project while full time devs have more time for bug fixes and updates. Check the plugin home page to get some insight on the plugin author. If the plugin home page wasn’t updated in a year or two why would you still be there? If the plugin home page has been recently updated, and has attracted a lot of comments, that’s a pretty good sign.
What do people need the most when they create website or blog? Of course they are seeking for easy managing, multipurpose functionality and simple customization. These main principles allow us to prove out that such great product as WordPress takes its rightful place on the top of CMS pyramid and it’s absolutely clear why. Nobody wants to spend a lot of time and money for building his/her website in the proper way, trying hard to figure out all necessary things which will be quite important for his/her web project. And WordPress is one of the most popular applications in web design surrounding not only for its handy usage, but also for its technological effectiveness and versatility.
Pursuing the aim to help you join the WordPress community, we’ve gathered for you the following WordPress theme design tutorials which will assist you in managing your work with WordPress theme and will teach you how to develop it step by step. Agree that when you have already a constructive tutorial with a website’s example and detailed explanations – it becomes not so difficult to understand its structure and start building your own WordPress theme. So use these perfect WordPress tutorials, design a theme and save your time!
Powering Your Design with WordPress
![The Lord of WordPress: Designing Theme from Scratch [Tutorials]](http://blog.tmimgcdn.com/wp-content/uploads/2012/06/Powering-Your-Design-with-WordPress.jpg?9d7bd4 "Powering Your Design with WordPress")
* * *
The Internet is arguably one of the most used types of media nowadays, second only to the more common television. And as technology and science drives a swift bus known as evolution, the web is seen tagging along the ride.
There are tons of writers, programmers and designers out there contributing to the ever-growing world of internet media by creating websites and web pages, and developing more convenient and efficient ways of making them. One of the most popularly used nowadays is the JavaScript platform, which is pretty much a string-based programming environment used for writing codes that make a lot of things run, from a simple calculating program to a whole website or even mobile phones and other IT devices.
What’s jQuery?
JavaScript, like other programming languages, consists of smaller sub-applications with the same type of language, but aims to make coding much easier. These sub-applications, more commonly known as “libraries”, have different uses and can be found all over the internet.
One popular JavaScript library used today is jQuery. It has over 55% of the 10,000 most visited websites using it. Perhaps the main reason it got its fame is its emphasis on better graphic presentations (for those viewing it) and ease of use (for web designers and developers using it).
jQuery is an open sourced program, meaning that developers can add their own plugins or tweak the application to suit their needs. It is also free and dual licensed (MIT License or the GNU General Public License, Version 2), which means that anybody can use it freely and publish their works online. jQuery was released in January of 2006 by John Resig and up until now has been updated constantly to improve its performance.
A person who has no background might be thinking that it would be impossible to use jQuery without having knowledge in programming, but there are numerous articles out there about using it, ranging from introduction for newbies to more advanced tricks a seasoned user can benefit from.
Here are some of the tips and tricks anybody can use to start with. They are split into two parts: the general tips and the more application-specific tricks inside the jQuery environment itself.
General Tips in Using jQuery
These tips are for those who are just starting to get the gist of using jQuery. Most articles with the same topic provide similar (if not the same) tips of advice and thus making these points a part of the “need to know” list.
- Add plugins. Compared to JavaScript, jQuery provides easier code handling and designing. And with the use of additional plugins, creating a very appealing website will be just a breeze. The jQuery environment is written in a way that users can add other additional software to it. One of the easiest ways to do it is incorporating plugins into the program. These plugins have a wide variety of uses (from acting as a “shortcut” to longer strings of code or setting up an already complete system and then tweaking the theme based on the user’s needs. It can be easily found anywhere online, so one can just search for it in Google and receive many results.
- Use a cheat sheet. Memorizing all the codes requires a lot of time and, evidently it is very difficult to do. Instead, most people using jQuery create or look for cheat sheets. These can be in any form – be it just background wallpaper showing different terms and codes or a plugin for jQuery and created with jQuery itself. Adding this to the arsenal makes coding much easier and faster.
- Use the latest version. Since its launch in January 2006, jQuery has been updated regularly, improving its efficiency and usability. And since it is free, the updates that come along with it are free as well. Using the most recent version not only provides better performance but also lets the user know he/she is in line with the latest changes.
For a long time sliders have been amusing website users with their amazing effects. Still website developers try to impress users even more, producing design element that enhance overall functionality of the site without being intrusive or distracting.
Day after day web design market is being filled in with various goodies. Each month a new type of website slider appears, each and every is defined by its uniqueness. Designer crowd all over the world supports only the most trusted items and NivoSlider is one of them. This project became a huge success and during the first year it was downloaded more than 1M times and now it is known as the most beautiful and easy to use slider. NivoSlider is a shareware i.e. it can be downloaded toll free. There is no better way to make your website look totally stunning. If you don’t believe us, keep reading and you will see, how tiny plugin “can turn upside down” image presentation on your website.
NivoSlider is a lightweight (12kb compressed) jQuery plugin for creating good-looking image sliders. It converts an element that wraps images into a slider and offers 16 unique transition effects (effects ranging from slicing and sliding to fading and folding). The plugin can display prev-next buttons and a navigation to control the slides. The transition to be used can be a single one or you can set NivoSlider to randomly apply them. Also, it is possible to define the number of slices, animation speed and pause period for maximum customization. For you to experience visual presentation of NivoSlider we included several demos of this impressive slider:
Nivo Slider with Default Theme & Default Settings
***
Nivo Slider with Orman Theme & Box Animations
Featured Templates
Advertisement
Follow TemplateMonster Updates
Rss Feed:Recent Comments
- Just started reading your blog entries the other day, and I’m...
- Thanks for the post!
- Thank you! Great post as forever!
- Thank you for sharing these..!
- Thanks for share us…!