Bluenotes EntertainmentBluenotes Entertainment

Full Size Background Slideshow

Kerry — Wed, 24 Apr 2013 01:00:16 +0000

This is a requested tutorial from one of our readers incorporating the a background Image slider into iWeb. If you would like to see other tutorials please let us know!

So as you can see from the above info box, I was asked to do a image background slideshow tutorial for iWeb. After looking online at a few examples, I came across one jquery slideshow called “Backstretch” which was developed by Scott Robbin. There are many of them out there, but for my iWeb audience, I chose this one for its simplicity. Of course you can use this in a non iWeb website as well. What this does is display a rotating set of images at full size within your page background.

Download Source View Demo

iWeb Note: This tutorial requires you to edit your published iweb page to add the JS scripts within the section of your html page. You can either use a text editor application, Coda, iWeb SEO Tools or any other program to help you. Also keep in mind that if you “re-publish” your page you will need to add this code back in again.

1. Download the provided source files above and upload the entire folder to your server. The source files I have provided are a slimmed down version of what is provided from the original developer. This version only includes 3 demo images, the jquery.backstretch.js and optional hosted jquery.js file (The code below uses the Google hosted jquery file).

2. Find the published iweb html page you wish to add Backstretch to and open the file in your favorite HTML editor. You can also use iWeb SEO Tools from Rage Software to include these scripts before the closing tag.

3. Copy and paste the following code within the section of your page. For best results, you should place at the end prior to the closing of the body tag.

You will need to alter the code above by changing the domain to match yours.

4. Save your edited page and load it in your favorite web browser, if you added the above code to the correct area of your html, and used the correct URL’s for the images and jquery.backstretch.js file, then it should load correctly. Remember the jquery library file we’re pulling from Google. So no need to alter that URL.

Notes

This slideshow only uses 1 transition, fade. The speed of the fade is controlled with the number in the js above.
When you’re adding your images to the array in the js script, make sure each image is followed by a comma, the LAST one does not.

Hope you enjoyed this quick tutorial. Have a question or need some help, feel free leave a comment.

The post Full Size Background Slideshow appeared first on Bluenotes Entertainment.

Simple – A Minimal Responsive HTML Template

Kerry — Tue, 16 Apr 2013 00:51:33 +0000

We’re excited to release new new HTML template called Simple. Simple uses our customized HTML framework to deliver a professional design, responsive layouts, feature packed elements and standard layout options such as sidebars, full width pages, blog pages and more.

Along with packing our full featured framework, Simple takes us back to just being “simple” The design is based to either give developers an easy start to creating something amazing or just targeted at those wishing to write and treat it as a blog. Simple takes that view and allows the viewer to focus on the words rather than the bells and whistles.

View the Demo View the Details and Purchase

Simple is also part of our Theme Bundle Pack! Download all of our current HTML themes for one low price.

The post Simple – A Minimal Responsive HTML Template appeared first on Bluenotes Entertainment.

Arrow Smile Dental

Kerry — Tue, 19 Mar 2013 17:10:35 +0000

Arrow Smile Dental is a dental practice in Covina. It is also the business of my partner. Dr. Rosales established Arrow Smile Dental back in 2007 and has seen over 3000 patients. He incorporates the latest in dental technology and services including his latest achievement of using the CEREC Milling Unit.

Visit their website!

Features:

CSS
HTML
JQuery
Photo Galleries
WordPress (CMS)
Blog
Contact Forms
Simplistic Design
Mobile / Responsive Design
Bi-lingual translation (English and Spanish)
Online Marketing

The post Arrow Smile Dental appeared first on Bluenotes Entertainment.

Natista – Responsive Business HTML Template

Kerry — Thu, 07 Mar 2013 21:41:25 +0000

We’re excited to release new new HTML template called Natista. Natista uses our customized HTML framework to deliver a professional design, responsive layouts, feature packed elements and standard layout options such as sidebars, full width pages, blog pages and more.

View the Demo View the Details and Purchase

Natista is also part of our Theme Bundle Pack! Download all of our themes for one low price.

The post Natista – Responsive Business HTML Template appeared first on Bluenotes Entertainment.

What’s the Big Deal About Responsive Design?

Kerry — Sun, 24 Feb 2013 21:17:18 +0000

Lets take a look at where we’ve come from in regards to mobility…

For the last few years, the web design world has gone through some drastic changes. One of which is known as responsive design. It’s the idea that when a website is designed, the developer should build the site to fulfill the scope of multiple screen resolutions such as the iPhone, iPad, and all of those in between. About 4-5 years ago, developers would approach this as a second thought. The idea was new and the iPhone just came out with a web browser that actually displayed the web like its desktop counter part. Therefore, why think about it? The iPhone displayed the page in its entirely. No loss, just requires to use of pinch to zoom to read it.

Before then, those with mobile Internet devices such as blackberry and windows mobile, would strip out most of the site design, almost taking us back to the 90′s. Apple’s mobile Safari was a game changer. It used the same driving engine from WebKit and processed the exact same website in your hands that you would have seen on your desktop computer. However with this great technology, users quickly found that reading on a small device was becoming trivial. Sure you could pinch to zoom and scroll around, but it wasn’t the same. Sometimes you would need to zoom, pan the screen left, move to the right, then pan back left to read the next line. Trivial.

The great minds then decided to create dedicated mobile versions of their website. This version would serve all the mobile devices on a separate domain, usually m.domain.com or mobile.domain.com. These worked well for what it was but soon after they too started to become a problem. Sometimes the mobile version would be incomplete, missing individual pages, or missing content. In addition, the developers had to manage two or more completely different sites, the main and the mobile. This cost time and resources, not too mention confusion as one article may not be on both sites.

Here comes Responsive…

Then we came to the view of being responsive. The idea was to make the the same exact website, with everything displayed, respond to a different browser size automatically. This became the perfect answer (so far). Serve the same webpage to all browsers including mobile and tablet devices, then just rearrange the content to fit the screen size. The developer would only need to make a single update and the change is served to everyone.

The way responsive is delivered is by altering the design CSS with media queries. These styles target specific browser sizes. For example if you use in your CSS:

@media only screen and (max-width: 480px) {
     body { font-size: 0.8em; }
}

Then all browser windows with a width meeting or smaller than 480px’s across will show the body font size at 0.8em instead of the typical 1em, or base font size, that might be used for the desktop version. This gave way to allowing developers to easily target and deliver custom styles based on the device’s screen size, regardless of what the device brand was.

By planning your website project for mobile devices at the beginning, the developer or designer would be able to adjust early on and format their content to meet all of the mobile possibilities including the desktop. Knowing and planning to use responsive styles to build your design, the developer or designer would be incorporating max-widths, percentages, EM’s, in addition the @media queries to build the site. Plan now and save time for the future.

Example Scenario:

Let’s take the following example. It’s from Natista, one of our HTML templates that we sell in our online store. It’s responsive and was built with the idea of working on all devices regardless of size. Let’s take a look at one of the design elements, the main menu. We knew that we wanted a menu that would respond to all views and still look and act like a menu.

We designed our menu to look the same, visually, even though it responds differently. We also clearly labeled our mobile menu to let the viewer know that this is a menu and you can click/touch it.

Another aspect of the above example, is the image slider (the cat that makes you go aww). The slider is from the well known Flexslider jquery plugin and automatically responds to the browser window size. In fact, the entire design of Natista does exactly this. All images use a max-width:100% css property and site layout uses a fluid grid system of percentages. Planning with these ideas will allow the entire site to flow to any viewer and any device.

Is 2013 the year of Responsive Design?

Given the rapid adoption of tablets and smartphones in the consumer market place and the fact that users seem to prefer reading their news, blogs, and favorite sites on the mobile web, I think it’s inevitable that 2013 will be the year that responsive design takes off. In fact look at all of the HTML and WordPress marketplaces, most if not all, of the templates for sale are responsive. Owners want it, developers want to build it, viewers want to use it!

Some Stats…

1) 1.08 of the world’s 4 billion mobile phones are smartphones. 3.05 billion are SMS enabled. (Source: Microsoft Tag)

2) Mobile internet usage is projected to overtake desktop internet usage by 2014. (Source: Microsoft Tag)

3) Apple and Android represent more than 75% of the smartphone market. (Source: comScore)

4) 74% of consumers will wait 5 seconds for a web page to load on their mobile device before abandoning the site. (Source: Gomez)

5) 46% of consumers are unlikely to return to a mobile site if it didn’t work properly during their last visit. (Source: Gomez)

6) 7.96% of all web traffic in the U.S. is mobile traffic. That number skyrockets to 14.85% in Africa, and 17.84% in Asia — up 192.5% since 2010. (Source: Pingdom)

7) 24% of US tablet owners use their tablets to shop 2-3 times per month; 20% use them to shop more than once per week; and 12% use them to shop every day! (Source: eMarketer)

8) Over 1/3 of Facebook’s users access Facebook Mobile; 50% of Twitter’s users use Twitter Mobile. (Source: Microsoft Tag)

Browser Compatibility

By now, all of the latest major browsers support Media Queries, CSS3 and HTML5. However, IE8 and older will need a little help from the html5shim or another equivalent plugin/script. So take the plunge, build quality responsive websites.

The post What’s the Big Deal About Responsive Design? appeared first on Bluenotes Entertainment.