Preventing the Burn Out Blues

 Design work by nature is creative. Finding your creative muse can be stressful, illusive, mind numbing, and sometimes down right emotionally painful. To stay creative, you need to open your mind to the endless possibilities and keep all options on the table during a project. But rest assured, that when your time comes, and the ideas seem further and further apart, there are ways to get your mind back in the game, so you can continue churning out the creative work you're use to.

 Before getting into the heart of this article, let us consider something first. If you were the only person on the planet, would you still be as creative as you are now? Or do we inherently draw inspiration from other designs and things that we see?
 My answer is this. Though we are human and generally crave to create something brand new and unique, whether it be music, works of art, computer programs, magnificence buildings, automobiles, or whatever, we do tend to draw inspiration from what we see, and adapt it to fit into our particular project. This is not to suggest that we should plagiarize anyone's work, but merely stating that if it were not for the wonderful & awesome pieces of art that have already been created, many works yet to be created may never be realized. Simply put, creativity fosters creativity.

 But let's get back to the topic at hand which is how to avoid getting into a rut, or getting burned out. Let us suppose you're driving down the central street of a major metropolitan city. When you look around at the buildings, traffic, and people hurrying off in all directions, do you see beauty or the beast? What if you're taking a trip down a dusty back road out in the country somewhere, with no houses or people to speak of for miles? Visiting an art museum? A planetarium? Watching a movie or viewing a commercial on TV?
 I hope you're getting my point... which is, beauty is in the eye of the beholder, and finding inspiration is more about your attitude than viewing a masterpiece.

 Sometimes, the best place to look for inspiration is a place you’d never think to look. Actually, sometimes it could be the place you’ve always avoided. If you take the time to look around you, I'm sure you'll begin to see the real beauty that is all around us, and specifically start to generate creative ideas based on what you see. Generally there is at least one component or element in any design that stands out and says "Here I Am". It's those types of elements that you want to incorporate into your own designs and projects.

 As a web designer, I know how difficult it can be at times to find inspiration. To come up with a unique website design for each and every client. To that end I offer the following:

 Many of us are taught to ignore impossible ideas. We’re led to believe that impossible is a set notion, one that cannot be overcome, so we stick to ideas that are simple and proven, that we know will work.
It’s between those the places shown in the above diagram that the most remarkable, creative ideas are found. The best place to find creative ideas is between everything you've considered, know, and the impossible.

 You'll want to get into the project and just start designing as soon as you can. Remember they're just drafts until it's finished, so keep revising and don't be afraid of failure.

 To summarize:
- Look around
- Dream the impossible dream
- Just start designing
- Keep revising
- Don't be afraid of failure
- If all else fails... walk away for a little bit and relax. Try to take your mind off of the project by doing something completely unrelated.

Tom M. Wiseman
Digital Dreams
http://www.digitaldream-designs.com 

Scalable Embedded Videos in RWD

 If you've ever designed a website using the scalable, Responsive Web Design methodology, you more than likely have ran into problems when dealing with embedded videos, like those found on YouTube.

 And if you're like me, you probably tried searching for a solution after banging your head against the wall trying to figure out why it wouldn't scale down properly. Well here's the good news... After a lot of research, I finally found a solution that works.

 This solution is not only very easy to implement, but also can be implemented for other objects such as embedded documents.


A typical embedded link will look something like this:
<iframe width="560" height="315" src="http://www.youtube.com/embed/HXevi6Cd2_w" frameborder="0" allowfullscreen></iframe>

So, the first thing you'll need to do is strip out the height and width attributes, so it looks like this:
<iframe src="http://www.youtube.com/embed/HXevi6Cd2_w" frameborder="0" allowfullscreen></iframe>

Now one may think that from here all you would need to do is to set a max-height and max-width in your style sheet for the video DIV container, and then set your left and right margins to auto, but I can tell you from experimentation, this will not work. Copy the code below into your style sheet and then rename that DIV wrapper or container the iframe is held in to class="video-container" and you'll be off and running.

What's interesting to note here is that the solution calls for the .video-container to have a bottom padding based on a percentage, while the top padding comes in the more typical pixel flavor. You'll also note that the height is set to 0 while the width is at 85%. The positioning for the .video-container is relative, so it'll be adjusted according to the parent DIV.

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
}

.video-container iframe, 
.video-container object, 
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

And that's it. The embedded object within your iframe should now scale up or down according to the screen resolution, right along with the rest of the page/objects.

Tom M. Wiseman
Digital Dreams
http://www.digitaldream-designs.com 

Input Box Calendar Pop-Up Using JavaScript

If you have ever needed to populate an input box with a date that the user can select, you probably have explored the possibility of having a pop-up calendar when the input box is selected, allowing the user to select the date they want simply by clicking on the calendar. At first glance this may seem like a difficult chore, but I'm here to tell you that implementing the Javascript function for this task doesn't have to be as hard as it may seem.

Typically this sort of function would be used in a reservation form, but obviously it could be used anywhere you'd like. Let's go through the simple steps to get one up and running.

First off we'll need to define the link for the Calendar Pop-Up script. We do this by adding the line below somewhere in the header section of your HTML document. Then make sure to place that script in your scripts folder.

<head>
   <script src="scripts/CalendarPopup.js"></script>
</head>

You can download a copy here: http://mattkruse.com/javascript/calendarpopup/CalendarPopup.js

Now we need to add in our variable which will store the data so we can use it later on. We'll keep it simple and just call it "cal".

<script type="text/javascript">
    var cal = new CalendarPopup();
</script>

With the essentials in place, we can then create our form, add in our input box and then drop in the calling routine to our pop-up script. So down in the HTML section of your document, we're going to first create the form, which will look something like the one shown below. Please note that the action and the form name can be changed, but if you change the name, you'll need to edit the calling routine a little further down so the routine knows which form to act upon.


<form action="goReserve.html" method="post" name="ReservationForm">

Next we create our label and the actual text input box. You won't have to fill in the initial value unless you want to because our pop-up calendar will take care of that for us. You'll notice that the code below looks fairly standard, except the onClick portion. That's our calling routine for our pop-up function. Again, you can edit the input name or even the ID here, but if you do, you must also edit the onClick section to match.

<label for="checkinDate"><strong>Check In: </strong></label><br /><input name="checkinDate" type="text" id="checkinDate" onClick="cal.select(document.forms['ReservationForm'].checkinDate,'checkinDate','MM/dd/yyyy'); return false;" value="">

</form>

Next, save your HTML document and open it in a browser. If you did everything correctly,  when you click within your input box, you should now get a pop-up calendar that looks like the one above.

Tom M. Wiseman
Digital Dreams
http://www.digitaldream-designs.com 

Is Your Website Mobile Friendly?

 Over the last year there has been quite a bit of blogging and articles written concerning the topic of website design, specifically about having a mobile ready website.

 Is having a mobile friendly website really that important? Yeah, we believe it is.

 To get this editorial off to a good start, let me throw out some fun facts:

  - According to an online Google article from July 2012, 75% of customers prefer a mobile-friendly site.
  - There are over 331 million mobile phones in use in the US alone.
  - 245 million of those mobile devices are used to access the Internet.
  - 46 percent of US mobile users now have smartphones.
  - 69 percent of US mobile users access the internet on their phones daily.
  - Worldwide, there are over 5.6 billion mobile phones in use, and this doesn't reflect mobile devices like tablets, which can also access the Internet.

 So, with these kind of numbers staring you in the face, let me ask you, does your website need to be mobile friendly? I hope your answer is a resounding yes.

 Now that we have that settled, the next big question is how do you update your site so it's mobile friendly.
There are actually a few different perceptions on the best way to create/design a mobile ready website, not the least of which is RWD, or Responsive Web Design which I have been talking up for at least 4 or 5 months now.

 You could certainly also design a mobile only website, which is to say having one design for your mobile customers and an entirely different one for the PC. The problem with this methodology as I see it, is the fact that you would end up with two different domain names (i.e. www.somecompany.com & www.somecompanymobile.com), which can be a little confusing to someone doing a search for your business, not to mention the fact that when you build two different sites, maintainability becomes more of an issue. Add in the fact that most mobile only sites have no scalability for different resolutions, meaning they're built for a specific screen size and that's it, makes me truly wonder why anyone would want to go this route.

 On the flip side, RWD allows a designer to build a website for any given screen size, all contained within a single domain name and site. The only downside to a site based on RWD technology that I can think of is the load time. Because all of the various choices for different resolutions are contained within a single CSS3 document, loading up the site could, if it's a large document, take a while. And by a while, I mean over 6 seconds. However, experienced designers will know this going into a project and will design the site in such a way as to keep the load times down to the bare minimum.

 By using media queries, an example of one is shown below, we can tell the browser to use only a portion of the styling document so the user only sees the content we want to deliver at that resolution.

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
}

 In this way, we can style our site for various screen resolutions and orientations.

 If you're a web designer reading this article, remember to keep in mind that if you have too many media queries, meaning you're styling for more than 4 or 5 resolutions, you could end up with long load times, which may defeat the customer's purpose for having the site to begin with.

 It's important to note here that before beginning any website design project, you should have discussed all of the details with the client first, letting them know about their different options, so they can make an informed decision on how you should create the site. How their customers will interact with the site will ultimately be your guiding path as to the structure. layout, & design of the site.

I also want to state that having a mobile ready website and a mobile friendly site are two different things. Mobile ready simply means a site which can clearly be seen on a mobile device, while mobile friendly means that the site looks good on a mobile device and suits that environment and those specific users. Having a unique navigation menu for your mobile visitors will go a long way toward this endeavor. Keeping the content to a minimum at the lower resolutions is also recommended.

One final piece of advice for those of you who will be doing the designing, and that is to not limit the scale of the site. There isn't a single good reason not to allow a mobile user the ability to zoom in or out. In your HTML document, simply add a line like the following:

<meta name="viewport" content="width=device-width, initial-scale=1">

So, if you're a designer who doesn't offer mobile ready/friendly sites, you should start. And if you're a business owner who doesn't have a mobile ready/friendly website, you should find a professional and get started on having one designed today. Mobile technology and devices are growing every day, so get up to speed and make sure your business is ready for those mobile users.

Tom M. Wiseman
Digital Dreams
http://www.digitaldream-designs.com 

Mobile Layouts - Hook, Line, & Sink.

 So you've accepted and latched unto the whole Response Web Design concept, creating a simple site or two. But when you attempt to be a little creative, wanting to build something with some pizazz, suddenly something goes amiss.

 This is actually fairly common for web designers still new to the RWD concept and stems from not having a complete understanding of how exactly it works. More over I find sites that were supposedly built  using RWD, but fail to deliver a respectable page on the mobile end. It seems some folks are forgetting the #1 rule for RWD, which is to build for mobile devices first.

 Before you actually start coding, gather your thoughts and ideas and plan out what you want the site to look like from a mobile perceptive, taking into account the limited screen space those visitors will have. Then when you're ready, write the code that will produce those results. After extensive testing, ensuring the site appears precisely how you wanted it to, then you can finally start adding fancier components for the larger resolutions.

A fairly simple solution to having different menu items and/or different content appear with the various resolutions is to create multiple content items using different DIV id's, and then use the display: block style if you want it to be shown under the screen size your working on, or display: none if you don't.

If you're still not following, look over the example below:

/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
}
#MenuDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    margin-bottom: 40px;
}
#LayoutDiv2 {
    float: left;
    margin-left: 0;
    max-width: 90%;
    display: none;
}

This is a portion of my style.css document. As you can hopefully see, we're staring at the Mobile Layout section which handles resolutions of 480px and below. Additionally, my MenuDiv1 is visible in this layout, but I'm hiding the LayoutDiv2 since it contains some content that I'm animating using jQuery, and don't want to slow down the connection when accessing from a mobile device.

Along the same lines, we probably should, display and hide some of our content at the higher resolutions. Since in this example I'm allowing a mobile user to see a different rendition of my menu, I would in turn want to hide that menu in the higher resolutions in lieu of something more appropriate for the viewing size.

Remember that the whole point of designing a site using RWD is to have the ability to make it look pretty at any resolution, but we also need to make it functional. Often times web designers forget that, and want to throw everything that a PC visitor would see at a mobile user. And quite honestly, that defeats the purpose.

Cutting down on the load time for mobile users is essential if you want that visitor to stay long enough to learn about the product or business. You'll want of course to display the essential information, but again, keep the mobile content displayed to a minimum.

As an example of what I mean by displaying different content and a different menu for the various resolutions, here are some screenshots of my own website, shown from a mobile perspective, then tablet, and finally a widescreen PC.

As you can see, a mobile user gets a plain menu structure, plus they don't see the Facebook like button, the Twitter follow-me button, the rotating text between those two divs, nor the animated content below that.

A tablet user gets a little more, but still not all of the content I have available. With my tablet visitors, I'm still restricting the animated content below the social link buttons, but at 768px, I'm allowing them to see the normal menu layout.
 
Until next time...

Tom M. Wiseman
Digital Dreams
http://www.digitaldream-designs.com  

Hazzle-Free Image Rotator

Have you been looking across the vastness of the Internet to find a suitable image rotator? Something that's really easy to setup, understand and modify? Look no further. You've come to the right place.

Some time ago I too was doing searches for something really easy to use. And while there are some really great scripts out there, some of which I have used myself, I really didn't want to have to copy a whole bunch of styling code or spend a lot of time looking over the main code in order to understand it just so I could plug in whatever images I wanted. I also wanted a highly flexible script that I could use different size images with, without a lot of editing.

It was during one of these searches that I came across a very easy to use script. The only problem was that it was designed to rotate text, not images, and had no special effects built-in like jQuery's fadeIn. So, I took what was there, gathered up my ideas and manipulated it to suit my own needs. What follows is the result. I think you'll agree that while not particularly fancy, this script will do most, if not all of what you want and need it to.

First we need to tell our HTML document where the latest jQuery script can be found. So up in the <head> section of your document, add the following line:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Now below that, but still in the <head> section, include the following lines:

<script>
	var imgitems;
	var currimg=0;
	$(document).ready(function(){
		imgitems = $("#imgrotate li").hide().size();
		$("#imgrotate li:eq("+currimg+")").fadeIn(1000);
		setInterval(imgrotate,6000); //time in milliseconds
	});
	function imgrotate() {
		$("#imgrotate li:eq("+currimg+")").hide();
		currimg = ++currimg%imgitems;
		$("#imgrotate li:eq("+currimg+")").fadeIn(1000);
	}		
	});
</script>

As you might have guessed, we first initialized two variables that we'll be using in our script; imgitems and currimg.  Then we load the script into memory as soon as the document is loaded so the function is ready to go when we need it.

After that we hide anything inside the first li tag which is inside the id of imgrotate. We then load the associated image within our first li tag, and allow it to fade-in with a delay of 1000ms. The script then waits 6000ms before moving on to the next li tag. The script will continue on down the list of li's until it reaches the last, and then return to the top to start over. Note that the delays can be edited without worry of breaking the script.

Down in the <body> of our document is where we'll need to add in the imagerotate id and the associated li tags.

   <ul id="imgrotate">
       <li><img src="gallery/featured-14.jpg" alt="Outlaw Grafix"></li>
       <li><img src="gallery/featured-22.jpg" alt="Sacramento Soccer Academy"></li>
       <li><img src="gallery/featured-23.jpg" alt="St. Andrew Presbyterian"></li>
       <li><img src="gallery/featured-34.jpg" alt="Par Amour Visions"></li>
       <li><img src="gallery/featured-29.jpg" alt="Premium Steampunk Theme"></li>
   </ul>

The id must be contained within the ul tag and then each image you wish to display (rotate) should be in a separate li. Feel free to edit in whatever way suits you. You can add in hyperlinks, titles, or whatever. And naturally, you can style the id any way you want, but for simplicity sake we won't cover that in this post.

Don't worry about setting the width and height for your images. This script doesn't care and will use whatever you toss at it, though you might consider setting the max-width and max-height for the ul tag.

Another great thing about this script is it's very simple to modify. You can literally throw anything you want into the li and have the function rotate it. From text to images to even flash animation, if you so desired. Or, you can mix it up and have a little of each. The point is that the choice is all yours.

 So there it is. Perhaps the easiest to use image rotator you'll ever find. I hope you find it useful.

Tom M. Wiseman
Digital Dreams
http://www.digitaldream-designs.com 

Sending E-mail Using ASP

In a previous post I covered how to send an e-mail using PHP. Today we're going to cover the same process but using ASP instead. As I'm sure many of you know, PHP is a server-side scripting language used on unix or linux servers, while ASP is a server-side scripting language used on Windows servers. The two languages are generally not interchangeable.
For this blog entry I'm going to assume you already have your form configured in your HTML document. If not, you might want to refer to the previous article I already mentioned, Sending E-mail Using PHP, which covers the basics of that procedure.

So let's jump right into the meat of it here and get started on our ASP code. The METADATA lines are necessary for ASP to know how to handle certain functions. Specifically the Set ObjSendMail.Configuration, so don't forget to include them.

<!--METADATA TYPE="typelib" UUID="CD000000-8B95-11D1-82DB-00C04FB1625D" NAME="CDO for Windows Library" -->
<!--METADATA TYPE="typelib" UUID="00000205-0000-0010-8000-00AA006D2EA4" NAME="ADODB Type Library" -->

<%
' ASP Contact Script
' Written by: Digital Dreams
' June 30th, 2012
' http://www.digitaldream-designs.com
' Copyright 2012 / All Rights Reserved

We need to declare our variable before we can use them.
     ' declare variables
    Dim EmailFrom
    Dim EmailTo
    Dim Subject
    Dim FullName
    Dim Phone
On my contact form I have a selection option box. You can remove the line below if you don't use this in your form.
    Dim HearAbout
    Dim Message
    Dim ObjSendMail
    Dim iConf
    Dim Flds

We need to pull in the data from the HTML document. This is similar to PHP's $Fullname = $_REQUEST['fullname'];
    '----Settings-----------
    FullName = Trim(Request.Form("FullName"))
    Phone = Trim(Request.Form("Phone"))
    Hearabout = Trim(Request.Form("HearAbout"))
    Message = Trim(Request.Form("Message"))

This is where we set all the fields for how ASP will send the message. Unfortunately, you must include your e-mail name and password within this document since we're sending the message via SMTP, and ASP will produce an error if we leave it out.
Though no one should be able to see the ASP document directly, one work around to avoid people having your e-mail account information is to create a second account, and have that account forward the e-mail to your primary account.
You'll need to edit the SMTP server, port, UserName & Password lines.   
    Set ObjSendMail = Server.CreateObject("CDO.Message")
    Set iConf = CreateObject("CDO.Configuration")
    Set Flds = iConf.Fields
    With Flds
    .Item(cdoSendUsingMethod) = 2
    .Item(cdoSMTPServer) = "smtp.YOURSERVERNAME.com"
    .Item(cdoSMTPServerPort) = 2525
    .Item(cdoSMTPconnectiontimeout) = 45
    .Item(cdoSMTPAuthenticate) = cdoBasic
    .Item(cdoSendUserName)  = "YOUR EMAIL ACCOUNT@YOURSERVERNAME.com"
    .Item(cdoSendPassword)  = "YOUR PASSWORD"
    .Update
    End With
       
    Set ObjSendMail.Configuration = iConf
    ObjSendMail.To = "YOUR EMAIL ACCOUNT@YOURSERVERNAME.com"
    ObjSendMail.Subject = "Contact Form"
    ObjSendMail.From = Trim(Request.Form("EmailFrom"))


This is where we define the body of the message, another words, what will be sent in the e-mail.
You can edit this however you wish, but make sure that if you add any fields/variables, that you go back up and declare those variables first.
 ' prepare email body text
    Dim Body
    Body = Body & "Contact Form" & "<br />"
    Body = Body & "-----------------------------" & "<br />"
    Body = Body & "Name: " & FullName & "<br />"
    Body = Body & "Phone: " & Phone & "<br />"
    Body = Body & "Heard About: " & HearAbout & "<br />"
    Body = Body & "Message: " & Message & "<br />"
       
You could theoretically send a text message by simply commenting out the top line and removing the comment on the 2nd line.
    ' we are sending an html email.. switch the comments around to send a text email instead
    ObjSendMail.HTMLBody = Body
    'ObjSendMail.TextBody = Body
   
ASP now needs to validate the SendMail data. If it's blank or incorrect, you'll get an error. If everything is correct, the e-mail message will be sent.
    ' validate EmailFrom
        If ObjSendMail.From <> "" Then
        ObjSendMail.Send
        ' inform success or error
            If Err = 0 Then

Short message to the user letting them know the message was sent.
            Response.Write("Your message has been sent, thank you") 'if the message is sent return 0

Assuming your contact form calls this ASP document up in the same parent window (another words you did not use target="_blank", we then need to re-direct the user back to our homepage. But we need to delay that re-direction slightly so they have a chance to see the message above.          
            Response.AddHeader "REFRESH","3;URL=index.html" 'Delay 3 seconds then return to index.html
            Else
            Response.Write("Message could not be sent. Please try again later as the mail server may not be responding.") 'otherwise return 1
            End If
        Else
        Response.Write("Message could not be sent. Please verify all required fields are filled in.")
        End If
       
Reset our fields.
    Set ObjSendMail = Nothing
    Set iConf = Nothing
    Set Flds = Nothing
%>

And that's it. If we did everything correctly, your contact form should work correctly and you can now receive e-mails via your ASP document.

Tom M. Wiseman
Digital Dreams
http://www.digitaldream-designs.com