Author Archive: Preran Kumar

Dreamweaver FAQ2: What’s the ideal size of a web page?

We will get to the answer you are looking for, but get yourself through the beginning paragraph first.

In today’s world, it is very difficult to predict the devices on which your web pages will be ultimately viewed.  That’s why it doesn’t make much sense to tailor fit your website to the dimensions of a single device. To understand the most likely device on which  your web pages are going to be viewed, you must do your research well. Your research will save you time when prioritizing the design for your website and the benefits you will get from it.

This article, Best Screen Resolution to Design Websites, http://www.hobo-web.co.uk/best-screen-size/ provides an insight into popular screen dimensions for 2014 and previous years.

After you have an idea about the device that you will be primarily designing for, you can start designing in those dimensions while allowing your design to load/transform gracefully  on devices with other dimensions. This approach is known as Responsive Design.

Examples of responsive websites:

To check if a website is responsive, drag the handles of your browser window to see if the web page inside morphs itself to fit the new dimensions of the browser window.

http://www.awwwards.com/web-design-awards/education-above-all

http://www.awwwards.com/web-design-awards/webflow-interactions

Responsive design uses a single website with multiple CSS files. The media query information in the CSS file specifies the dimensions of  the display device for which it should be used. This media query in the CSS file tells the browser, “Hello browser, use this CSS file if your display area is N pixels”.

<link rel=”stylesheet” media=”(max-width: 800px)” href=”example.css” />

CSS files combined with media query helps  you create a single website that caters to display devices with different dimensions.

Before you start designing your website, do a deep dive into Responsive Web Design. If you are going to be a web designer for a sufficient period of time, the principles of responsive design will keep you in good stead.

Happy designing!

Dreamweaver FAQ : How do I center align a web page in Dreamweaver?

Purpose of this tutorial

Create a page in Dreamweaver and center-align the contents of the page. If you are looking for the code to center your page, dive directly to the section “Center the Content”. However, if you are new to web design and are getting started with Dreamweaver, I suggest that you go through every step of this tutorial.

Can I do it without knowing CSS?

No. If you aren’t conversant with CSS, I advise you to take a quick class on CSS and come back. You don’t have to go into a lot of depth, just read the essentials. It should not take you more than an hour or a couple of hours at the most.

How do I center a page?

You create a container (DIV) for the other DIVs on the page. When you center-align the container DIV, the rest of the content gets center aligned as well. Simple! While it is not necessary that you use Dreamweaver for the tutorial, some of the steps that are mentioned are very specific to the use of this software. If you are conversant with HTML and CSS, you will do just fine without these steps using the editor of your choice.

Create a new site

Before we proceed to create a page that centers itself with respect to the display, we will first create a site to store all the files we will be creating hereafter.

Before you proceed, create a folder or directory on your computer called FAQ_Tutorials. I am on a Windows computer, and I have created this in my C drive.

  1. Select Site > New Site.
  2. In the Dialog Box that appears, enter the following information.
    1. Site Name: Tutorials on FAQs
    2. Local Site Folder: Click the Browse or Folder icon. Navigate to the FAQ_Tutorials folder on your computer. Click Select Folder.
  3. Click Save.

lesson1_site_creation

That was simple! You now have created a Site with the name Tutorials on FAQs, and the files for this site will reside in the FAQ_Tutorials folder. Great job!

Create a new page

We will now create a web page that we will save in the FAQ_Tutorials folder.

  1. Just to make it easier to manage your files, create a subfolder called “FAQ1_center_webpage” in the FAQ_Tutorials folder.
  2. In Dreamweaver, select File > New. Ensure that the options Blank Page, HTML, and <none> are selected in the New Document Dialog that is displayed.
  3. Click Create.
  4. Select File > Save As.
  5. Navigate to the FAQ1_center_webpage folder.
  6. Save the file with the file name “centering_a_webpage”
  7. Click OK.

Create the Container and Header

For the web page, we will create a container div that will hold the contents of the page. When we center the container, all the contents inside get centered as well.

In the container, we will include three DIV tags: Header, Body, and Footer.

  1. In Title, replace “Untitled Document” with “Centering a web page”
  2. In the Insert panel, select Structure from the menu.
  3. Click Div.
  4. In the Insert Div dialog, enter container in the ID field. Click OK.
  5. Delete “Content for id “container” Goes Here”.
  6. Ensure that the cursor is within the Div. Click Header in the Insert panel.
  7. In ID, select Head and click OK.

You now have a parent container with the Header div tag inside it. Great going!

Style the Header Tag

Let’s style the Header tag so that we can differentiate it from the other Div tags that we are going to create. And for this, you guessed it right; we are going to need some CSS love.

We will style the header to give it a blue background color with white text.

  1. Just after the Title tags in the code view, we will enter the style tags <style></style>.
  2. In between the tags, we will enter this piece of code:

#head{

                    background-color:blue;

                    color:white;

                    }

  1. Click in the Design view. Do you see a blue box with white text in it? Good!

Create the body and the footer

Let’s go ahead and create the other two DIVs below the header.

  1. Ensure that the cursor is after the closing div tag for the header (</header>).
  2. Click Div in the Insert panel.
  3. In the Insert Div dialog, select After Tag and <header id=”head”> from the Insert options.
  4. In ID, enter body, and click OK.
  5. In the Insert Panel, click Footer.
  6. In the Insert Footer dialog, select After Tag, and <div id=”body”> from the Insert options.
  7. In ID, enter foot, and click OK

You have now created a container DIV with three child DIVs (Header, body, and Footer). When you center the container DIV, all the three child DIVs get centered as well.

Style the body div and the footer tag

Follow the procedure described for Header in “Style the Header Div” to add styles for the body and footer Divs. Add the styles below the style for the header.

#body{

                    background-color:yellow;

                    color:black;

                    }

#foot{

                    background-color:red;

                    color:black;

                    }

You should now see three boxes blue, yellow, and red one below the other. If you don’t, go back and see where you went wrong.

Center the content

Now that we have the contents ready, we are going to center them with respect to the browser they are displayed on.

This is what we will do: Define a width for the container, set the top and bottom margins to 0, and the left and right margins to auto. This clears the space to the left and right of the margin allowing the browser to calculate the margin.

While you can add the style for the container tag anywhere, I suggest that you put it above the style for the header because this is the parent tag.

#container{

                    width: 980px;

                    margin:0 auto;

                    }

Preview the page in a browser

  1. Select File > Preview in Browser.
  2. Select the Browser in which you want to preview the page.

The contents of the page should now be center-aligned. Some of the older versions of Internet Explorer might not work with this code. As a workaround you might have to create a class for the body and center-align text. Unless there is a real necessity to support really older versions of browsers, this step is not necessary.

body {                          

text-align:center;

                    }

 

Some useful notes on linking CSS files

In this tutorial, we have used CSS on the same page as that we have designed. However, it is not a good idea to have CSS on every web page if your website has many pages. A better idea is to create a single or few CSS files and link it to the HTML pages. That way, you can make changes at one location and have them reflected across multiple pages.

For example, you can create a CSS file called theme.css and link it to your HTML page.

<head>
<link rel=”stylesheet” type=”text/css” href=”theme.css”>
</head>

Here, the theme.css is the name given to the CSS file. You can choose any name you want. The CSS file here is on the same path as the page to which it is linked. However, if your CSS file is within a folder called CSS, you will have to specify the path as say, “href=/css/theme.css”. See http://compugoddess.com/relative-vs-absolute-links/ for information on relative paths.

No one responding to your post? Your title could be the culprit.

Why don’t people respond to posts?

Posted something on the Internet and did not receive any response? You are not the only one. Many like you are part of what is infamously referred to as the World Wide Wait. And yet, the laws of eliciting a response on the Internet aren’t very different from that in the real world.

wait

Much like your decision to read a book from an unknown author is partly based on the cover of the book and its title, the decision for someone to read your post depends to a large extent on how interesting the title of your post is.

Before clicking on a title, a person usually asks the following questions to oneself:

  • Do I understand the title?
  • Is it interesting? Is it compelling enough?
  • If the author is inviting comments, do I have what it takes to contribute?

Keep your titles short but comprehensive

More effort must go into the title of your post than its content. Go through the body of your content and write down a working title for your post. Then keep shortening and simplifying it until you have an interesting title.

Working title:

Computer crashes immediately after updating to the latest version of Windows and opening the 2.1 version of XYZ software on my computer.

Final title:

Computer crash after latest Windows update | XYZ 2.1

Avoid generic titles like “Help”, “I am lost”, “XYZ software”

Such titles do not give any idea about the content of the post. Such titles could also be mistaken to be spam.

Do not capitalize all letters in the title, and avoid multiple exclamation marks

Even if you are frustrated, unleashing it on the whole world serves no purpose other than putting people off altogether. Keep your titles unemotional and relevant. Interested people will get to it ultimately.

And that’s it. You have all that you need to get you going.  All the best!

When we ask you for your files, or a link to your site…

diagnosis

 

Much like the good doctor needs to examine the patient before coming to a diagnosis and very much like a detective that needs sufficient clues to nail the victim, it is important for us to go through your files to come to a correct conclusion on solving the issue at hand.

It is possible that sometimes, the issue that you are facing has everything to do with your code, and nothing to do with the software in particular.  Many times, it helps us improve the software after we have researched a particular bug that you have reported.

And yes, the files that you send us are not shared with anyone inside Adobe or outside of it except for the primary people involved in troubleshooting the problem.

For websites, you could stage your content on to to a staging server and share the link with us. The log in credentials that you provide us will be treated with utmost secrecy.

The do’s and dont’s when posting on a public forum

On a public forum, what you ask is as important as how you ask it. Ensure that you have done all that is possible at your end when asking the question before you seek answers.

Etiquette

Work on your title

As flowers attract bees through their vivid display of colors and scents, posts attract visitors by their titles. Ensure that you have captured the essence of your query in your title. Think over what it would take for you to click on the title if you came across it. For example, if your issue is related to a problem with a software not responding at launch, you can title it, “Adobe XYZ software doesn’t launch on the latest version of Mac OS (Maverick)”. People are more likely to click a link if they understand what the title is all about.

Provide all information that you think would help solve the problem

Solving a query on a forum is detective’s work. Provide as many clues as possible.

  • When did this happen?
  • Was this working normally previously?
  • Did you make any changes to your computer before this problem surfaced?
  • What is your software version, which OS are you using it on, which version of the OS?

The more clues you provide, the better will be the quality of your responses.

Insert screenshots where necessary

Absolutely, when necessary. Use the provision to insert images (click the Camera icon) to insert screenshots into your post. This way, you don’t have to type a whole lot of text. And if you are good at capturing videos of your screen, that would be equally wonderful. Just make sure that the video is crisp and captures most of the information that the experts will need to solve your problem.

screenshot

Do not divulge confidential information

Public forums, are well, public and accessible to everyone across the world.  To avoid your contact information being misused ensure that you do not divulge any confidential information such as your contact details, your serial number, your credit card details, and so on. Most forums have an option to send a private message. You could use that to provide information to trusted people on the forum.

Acknowledge help received on the forum

I cannot say this enough: Please, please acknowledge answers by marking them as correct or helpful whenever relevant. This provides other users with an insight into solutions that helped, and the next reader does not have to read the entire length of the post to arrive at the correct answer. And of course, it encourages the person that answered the question. Also, most times, people are helping you for free and this gesture can be rewarding in more ways than one.

Have patience

If you have asked the question well, it shouldn’t be long before someone answers your question. Just in case your question is ignored, do not panic. Go back and ask if people on the forum need more insight into your problem.

Go back and help other users

If you have enough expertise on the topic, enlist yourself for helping other users. Keep aside some time to help other people in your community. It can be a highly rewarding experience.

 

 

Date for the next update? Hard to tell

Lips-Sealed-714817

Much as I (we) understand your need for information on the next update, it is not possible to do so for a variety of reasons. No one understands better than us your need for fixing a bug that is bothering you. But when we do that, we want to make sure that the other person who needs a different fix is also taken care of.

In an unrealistic world, the bug fix would sneak your way into your software the next time you opened it and an equally sneaky message would inform you about the transgression.

In the world as it exists today,  product teams usually have to co-ordinate a lot of things and make sure things are perfect before they announce a release date. And things could go terribly wrong at the last minute prompting a change of plans.  That is how everyone’s world works too, right?

This is the reason why the product management team is the only team that has to make that call and announcement. People like me can broadcast it only after that is done. Think of it like a nuclear deal signed by the head of your country. The journalists probably have a clue about the details but they are not authorized to reveal it until the deal is done. There can be consequences.

4 Golden Rules for asking questions on forums

OK, you posted your question on a user to user forum and it went into a black hole.  And then you assumed, mostly incorrectly, that your question was dumb and unworthy of a response. Before you condemn yourself to eternal damnation, it might be worth following these four golden rules.

Rule #1: Do your homework

Philosophers worth their latest Nirvana will tell you that the way you go about seeking answers is sometimes more important than the answer itself.

OK, I made that up but it does make a lot of sense huh?

CCC_Search_REC_Recherche

Query answered already?

If you are Johnny come lately, chances are that your question has been done to death on the forum to an extent that it gives everyone the hives to answer it all over again. Look for the Search box. Use it.

You Google for everything from the person your favorite actor is dating to the possibility of human beings being aliens. Maybe it is a good idea to entrust Google with your problem too.

Your title, matters.

It is amazing how our actual behavior is completely in dissonance with, well, our actual behavior. Most of us never travel beyond the headlines of a newspaper, and yet, assume that titles such as  Adobe Problem, Help!, Adobe CS5 will have people rushing to answer us with floral scented candles.

Go back, rephrase that title, and get the pheromones oozing out of it.

The details, you devil!

What’s the software; which version? What Operating System; which version? Anything that changed on the computer before it got all wonky? Provide as much ammo as possible.

The more you give the more you get – this couldn’t be truer for forums. But avoid writing a soap opera.

Rule #2:  Don’t multi-post

keep-calm-and-don-t-repeat

Heard of the law of diminishing returns? If you got Rule #1 right, you are not going to be ignored. And if you are, just go back with a second appeal – on the same post.   Some communities can be very unforgiving of people that post the same question multiple times. Death by Ostracization is not unheard of.

Rule #3:  It takes time to answer. Wait.

patience

The submit button is not the equivalent of your confirming the order with a waiter. You have done your bit; now wait. People on a forum will help you when they have the time for it. It might take a couple of hours; maybe a day. They are doing it for free remember? And in most cases, all that they are getting for their head banging is your not-so-guaranteed thank you.

If people that work for free to answer your question can stay composed, so can you. They have other problems too + your problem.

Rule #4: Are you at the right place?

lost

If you have the latest version of the software and need a solution urgently, you should probably be picking up the phone or chatting with a customer service representative. Caveat: Ensure that you have followed Rule#1 before you do that.

Long wait times? Did you check if the company has a Twitter handle or Facebook account? Did you try using the callback option? Did you try chat support?

Socially yours…

It has been quite some time since I blogged, and in this time, I have moved from being content creator to the online social lead for web products. Essentially, what that means is that I will be responding to user queries posted on various social media platforms in collaboration with other experts at Adobe.

I will be using my blog to communicate all information about web products that I am allowed to share.  And needless to say, if I inadvertently state something that isn’t entirely correct,  it has everything to do with me and nothing that has been endorsed by Adobe. Having said that, I will stay clear of such misadventures.  I am trying to account for Monday mornings and bad hair days.

The information that I share is however, not for just your consumption but is meant to be shared, retweeted, reblogged, recycled, whatever. I will try to ensure that it is all worth your effort, time and space.

If you have anything that you want to share, please use the comments section to do that. Anything that is positive and constructive will be given immediate thought and attention.

I will try and notch up a blog post a week, and it is one of my commitments I hope to keep.

Cheers!

Preran

Creating transition effects in Adobe Premiere Elements 10 (Video tutorial)

Adobe Premiere Elements 10 – Creating transition effects

Understanding options when creating a new project (Adobe Premiere Elements)

Adobe Premiere Elements 10 – Understanding options when creating a new project