How to Create a Responsive Image Slider in jQuery and CSS3

 

Are They Necessary of Responsive Websites?

Standard

Here are 3 obvious reasons your WordPress site should be responsive:
1. Mobile and Tablet Users can easily navigate your site
Gone are the days you need to be sitting behind a computer to surf the Internet. Nowadays most people use their mobile devise or tablet to easily access information wherever and whenever they need it. So your website can be view in a user friendly layout it must first be responsive.
2. No more zooming in and out
Responsive web designs are created to allow a website to perfectly adjust to any screen size or resolution. The layout will change from what you can see on a computer screen compared to a mobile devise.
3. Keeps your customers engaged
If someone visits your website from their mobile devise and all they see is just a smaller version of your desktop site then it’s hardly encouraging them to navigate the site. More often then not, visitors will click out and find another website offering similar information (probably your competition) but in a easy-to-view layout.
All in all, responsive web design is vital to your website. When selecting a WordPress theme ensure you go with one that is responsive, there are thousands to choose from, so you shouldn’t have any problems finding one that suits.
Thanks to business2community for the piece!!

How to Create a Responsive Image Slider in jQuery and CSS3

Standard

STEP 1 – Markup
The slider html markup is very simple. We’ll create a
with the class “flex-container”, then inside of this
we will add another one with the class “flex-slider”, in this div will be placed all the slider controls. To finish we will create an unordered list to add all the slides. Each slide needs to be inside of a list element.
//

<div class="flex-container">

    <div class="flexslider">

        <ul class="slides">

            <li>

                <a href="#"><img src="img/slide1.jpg" /></a>

            </li>

            <li>

                <img src="img/slide2.jpg" />

            </li>

            <li>

                <img src="img/slide3.jpg" />

                

Designing The Well-Tempered Web

            </li>

        </ul>

    </div>

</div>

Next we’ll include the jQuery library and the FlexSlider plugin. To load the slider include the following code, you can set the settings there too, for more setting visit the plugin website.

// <![CDATA[
src=
// ]]>"http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<script src="js/jquery.flexslider-min.js"></script>

<script>

    $(document).ready(function () {

        $('.flexslider').flexslider({

            animation: 'fade',

            controlsContainer: '.flexslider'

        });

    });

</script>

STEP 2 – Basic Styles

First we will add some reset styles to clear all the margins, paddings, etc. and keep consistency trough all browsers.

.flex-container a:active,

.flexslider a:active,

.flex-container a:focus,

.flexslider a:focus  { outline: none; }

.slides,

.flex-control-nav,

.flex-direction-nav {

    margin: 0;

    padding: 0;

    list-style: none;

}

.flexslider a img { outline: none; border: none; }

.flexslider {

    margin: 0;

    padding: 0;

}

Then we will hide the slides to avoid jumping of the images during the page load. We will also set some styles for the images.

.flexslider .slides > li {

    display: none;

    -webkit-backface-visibility: hidden;

}

.flexslider .slides img {

    width: 100%;

    display: block;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    border-radius: 2px;

}

To finish this step we will add some styles to clear the floats from the slides.

.slides:after {

    content: ".";

    display: block;

    clear: both;

    visibility: hidden;

    line-height: 0;

    height: 0;

}

html[xmlns] .slides { display: block; }

* html .slides { height: 1%; }

STEP 3 – Container Styles

For the container we will set the background color to white and add a small shadow using the CSS3 property “box-shadow”. Then we will add 10px padding and the rounded corners.

.flexslider {

    position: relative;

    zoom: 1;

    padding: 10px;

    background: #ffffff;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);

    -moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);

    box-shadow: 0px 1px 1px rgba(0,0,0, .2);

}

I’ve set a minimum and maximum width for the slider. You may need to change it or remove when implementing on your project. We will set the zoom property to 1, this will avoid resizing on mobile browsers.

.flex-container {

    min-width: 150px;

    max-width: 960px;

}

.flexslider .slides { zoom: 1; }

STEP 4 – Next and Previous Arrows

For the next and previous buttons we will add a green CSS3 gradient, set the width and height, etc. To align the buttons vertically, we need to position them 50% from the top and add a negative margin, half of the button width.

.flex-direction-nav a {

    display: block;

    position: absolute;

    margin: -17px 0 0 0;

    width: 35px;

    height: 35px;

    top: 50%;

    cursor: pointer;

    text-indent: -9999px;

    background-color: #82d344;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));

    background-image: -webkit-linear-gradient(top, #82d344, #51af34);

    background-image: -moz-linear-gradient(top, #82d344, #51af34);

    background-image: -o-linear-gradient(top, #82d344, #51af34);

    background-image: linear-gradient(to bottom, #82d344, #51af34);

}

The arrows will be added using the “:before” pseudo-selector. This pseudo selector allows us to include some content without adding a new tag in the html. To create that ribbon effect we will use a border trick to easily create shapes using only CSS, this shapes will also be included using a pseudo-selector, “:after”.

.flex-direction-nav a:before {

    display: block;

    position: absolute;

    content: '';

    width: 9px;

    height: 13px;

    top: 11px;

    left: 11px;

    background: url(../img/arrows.png) no-repeat;

}

.flex-direction-nav a:after {

    display: block;

    position: absolute;

    content: '';

    width: 0;

    height: 0;

    top: 35px;

}

To finish the buttons will add the rounded corners, position them to right and left and add the “triangles” that will make the ribbon effect.

.flex-direction-nav .flex-next {

    right: -5px;

    -webkit-border-radius: 3px 0 0 3px;

    -moz-border-radius: 3px 0 0 3px;

    border-radius: 3px 0 0 3px;

}

.flex-direction-nav .flex-prev {

    left: -5px;

    -webkit-border-radius: 0 3px 3px 0;

    -moz-border-radius: 0 3px 3px 0;

    border-radius: 0 3px 3px 0;

}

.flex-direction-nav .flex-next:before { background-position: -9px 0; left: 15px; }

.flex-direction-nav .flex-prev:before { background-position: 0 0; }

.flex-direction-nav .flex-next:after {

    right: 0;

    border-bottom: 5px solid transparent;

    border-left: 5px solid #31611e;

}

.flex-direction-nav .flex-prev:after {

    left: 0;

    border-bottom: 5px solid transparent;

    border-right: 5px solid #31611e;

}

STEP 5 – Slider Controls

The slider controls are the little circles at the end of the slider that allows you to click on a slide. We’ll position this container at the bottom of the slider. Then we will create the circles using the “border-radius” and “box-shadow” property. For the active slide circle we will remove the box shadow and add the same CSS3 gradient that we used on the buttons.

.flexslider .flex-control-nav {

    position: absolute;

    width: 100%;

    bottom: -40px;

    text-align: center;

    margin: 0 0 0 -10px;

}

.flex-control-nav li {

    display: inline-block;

    zoom: 1;

}

.flex-control-paging li a {

    display: block;

    cursor: pointer;

    text-indent: -9999px;

    width: 12px;

    height: 12px;

    margin: 0 3px;

    background-color: #b6b6b6 \9;

    -webkit-border-radius: 12px;

    -moz-border-radius: 12px;

    border-radius: 12px;

    -webkit-box-shadow: inset 0 0 0 2px #b6b6b6;

    -moz-box-shadow: inset 0 0 0 2px #b6b6b6;

    box-shadow: inset 0 0 0 2px #b6b6b6;

}

.flex-control-paging li a.flex-active {

    background-color: #82d344;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));

    background-image: -webkit-linear-gradient(top, #82d344, #51af34);

    background-image: -moz-linear-gradient(top, #82d344, #51af34);

    background-image: -o-linear-gradient(top, #82d344, #51af34);

    background-image: linear-gradient(to bottom, #82d344, #51af34);

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none;

}

STEP 6 – Captions

We’re almost there, let just add some simple styles for the captions. Set the background color to black with a little bit of transparency using the rgba color mode. Then we will position it at the bottom of the slides.

.flexslider .slides p {

    display: block;

    position: absolute;

    left: 0;

    bottom: 0;

    padding: 0 5px;

    margin: 0;

    font-family: Helvetica, Arial, sans-serif;

    font-size: 12px;

    font-weight: bold;

    text-transform: uppercase;

    line-height: 20px;

    color: white;

    background-color: #222222;

    background: rgba(0,0,0, .9);

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    border-radius: 2px;

}

Courtesy : wwwdesignmodo.com

CSS tricks for Responsive Web Site

Standard

CSS @media queries :

Take a look at this code:
<link rel=’stylesheet’ type=’text/css’ href=’/css/mobile-retina.css’ media=’only screen and (-webkit-min-device-pixel-ratio: 2)’/>

/* Start main CSS file */
. . .
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* here come styles from mobile-retina.css */
}
/* End main CSS file */

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
background: red;
}
}
It’s just saying:
“IF (it’s a screen device) AND (its screen width is between 320 and 480), body will have a red background”
Here i write some example devices code:
————————————————
/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Website Speed Optimization in 10 Easy Steps

Standard

Have you ever been stuck on a page that takes forever to load? What did you do after waiting a minute or two? If you did what I think you did, I also know you wouldn’t want your website to meet the same fate.
Slow website speed will cause you to lose potential customers, every time. Your website’s speed is also a factor that influences your search engine ranking. Hence, every millisecond counts.
Here are a couple of general web development suggestions to improve your website’s speed:
1. Update without Reloading – This is achievable using AJAX. By updating parts of your page without completely reloading it, you will ensure the user sticks on and manages to see everything you want him to see.
The ‘lazy loading’ pattern will come in handy, especially if your web page has lots of image files. Using AJAX’s ability to asynchronously update, you can display image thumbnails instead of loading all pictures the first time a user visits your site. You can call full-size images from the server only when a user clicks on a thumbnail, and update the page.
Not only does this reduce page load time, but also gives the user a choice to see or not see images.
AJAX libraries like Prototype, jQuery and MooTools can be used for deferred loading.
2. Use External Files – When your page loads, the user’s browser will cache external JavaScript and CSS files. Thus, placing JS and CSS in external files instead of keeping them inline makes a lot of sense. Besides, inline CSS will increase the rendering time of your page. An external CSS file with all the style rules will minimize the work of the browser, thus decreasing your page load time.
Also, external JS and CSS files make site maintenance easier without the need to modify scattered code over web pages.
3. Use Caching Systems – Your site should not have to be connecting to your database every time to create content. A cashing system helps your site create content once, instead of creating it every time the page loads. Since caches refresh periodically, even your constant changing pages can be cached.
WordPress, Drupal and other popular CMS will have static caching features that reduce unnecessary server processing by converting dynamic pages to static html pages.
You can also install server-side scripts and database caching systems on your web server to help reduce the work of database web applications, thus improving their performance.
4. Web Caching Optimization – Create websites that utilize web caching. Create web pages that include CSS, JavaScript and images…things that can be cached by your web browser.
5. Avoid HTML Resizing – Always resize your images using an image editor instead of tweaking dimensions in html. Modifying the dimension of an image in html does not change the image’s originally resolution.
In case your image is a very high quality image, say 300 resolution, even a 100×100 size image will take the same time a 640×800 image takes to load. If you want to reduce image load time, reduce the resolution using an image editing tool, save the file, and then include in html.
6. Use Correct Image File Format – Optimize your file sizes using the right file format: PNG, JPG, or GIF. Also, when you save your images, make sure you ‘save for web’ so that pictures are automatically saved at web standard resolution. Lightweight images take less time to load.
7. Stop Using Image Texts – They are completely useless where SEO is concerned, and is also inaccessible to users. Besides, if it’s text, it doesn’t make much sense to display it as an image and increase the load time of your page. It’s text; write it down!
If you want to use custom fonts on your site, then use CSS to display custom fonts on your page. Of course, you have to decide if font files will benefit your web page more than images.
8. Optimize Your Code – Use CSS wherever it’s possible. The more the use of html codes, higher the loading time. An external CSS file helps keep your main document’s source code clean, and is also easier to maintain. Besides, search engines find it easier to read pages with minimum html.
9. Load JS at the End – JavaScript that loads at the end of the page instead of at the beginning, helps browsers load everything before JS blocks rendering. Your web page is automatically more responsive.
10. Use CDN – Your user’s location will greatly affect your website’s loading speed. The farther your users are, more the distance your data has to travel to reach them. Ensure your content is cached across multiple geographical locations. Of course, Content Delivery Network will make your operating cost higher, but it will help your website’s speed.

Web Design Storyboard – Business Storyboard Example

Standard

A web design storyboard is the process of making a rough outline of what your web site will include before it is actually created. It can be used to organize thoughts and content.
A Business Storyboard may include:

1. Main Page or index
Think of this page as the “cover to your book” inviting viewers to enter your site. Our goal should be to make it colorful and eye catching. Your company logo, name and a brief description of your company may go here.
2. About Us
Think of this page as chapter “one” of your “book”.
Your company profile or a more in-depth description of your company is described here. Additional pages can spring from this page such as:
* Company History page
* Credentials page
* About Our Employees – individual biographies page(s)
* Customer Testimonials Page
* Company Awards Page
* A customer serviced page with hyperlinks
3. Services Offered
Chapter “two” page of your web site
Again, additional pages can spring off of this page to describe your services in more depth.
4. Products Offered
Chapter “three” page of your site
This page will describe in detail the products your company offers. Again, additional pages can be linked from this page to describe your products in more depth.
5. FAQ
Chapter “four” of your site
List any frequently asked questions about your company and the answers.
6. Contact Us
Chapter “five” of your site
This page should list your address, phone number, e-mail address, hours of business, etc. Mini pages could spring from this page to include:
* Company Directory of Individual employees / title / work extension and e-mail address page.
* An information request form page.
* A Directions page
7. Site Map
Chapter “six” of your site
This important page is similar to a Table of Contents except it is made up of hyperlinks to each page of your site.
The ideas for content are endless. Additional web page ideas include:
* Online coupons
* Helpful related websites.
* Definitions of words or a business glossary related to your business.
* Privacy policy