We’re learning about absolute positioning now. And I made her a bunch of screen shots to show her how the “draw Layer” tool works on our admittedly old but still-Macromedia-and-not-Death-Star-Adobe-Version copy of DreamWeaver. It’s a great way to understand how DW writes CSS and what you’re actually doing when you move things. It doesnt matter if you have a new copy of DW, code is code. Learn the -code- Do not be held hostage by software. Beat it into submission. Then you too can point and laugh at people who use DW in design view.

So I will share, for other lost souls wrestling with a WYSIWIG, what the #$%$ thing is actually doing.

The context here was that she was trying to place an image. I told her to make a new div and then place her image within it. She didn’t quite get there…

(and yes I know she should add this to the unordered list and position it and use image replacement, but bear with me. She needs to learn to position first.)

first, we find the layout bar and choose the right button. Draw Layer.

Draw the layer, it will grow handles when you are done. Doesn't matter where you put it. This is absolute positioning.

Move the layer with the handles. Resize it. Put your image inside it.

Give your layer a unique name in the properties inspector. This is the name that comes after the # sign in css.

Now open split screen with the layer still selected in design view. Notice your layer is a div. Notice the css in the header of the html.

Place the button where you want it in design view. Your div in code view will stay in the same place.

Now cut and paste the div code to put it inside another layer, so it moves with the page.

Your layer will have moved in design view. Put it back where it was ..in design view.

Test it by previewing in the browser

Notice your CSS is different. That's because you moved the div. DW writes your CSS.

Cut and paste your styles to your main style sheet and save!

Hopefully now you have a basic understanding of how Dreamweaver uses the design view to write your css, which is really what you need to make a web layout. Since you’re going to learn the code, eventually you will just write the css yourself, but sometimes it will still be faster to use design view and it’s good if you do, to understand how it works so you know how to fix things when something goes awry.

cheers.

Had a meeting this week with a business owner who wanted to know if we understood marketing in his field. His field is different than ours. Suspicion is understandable.

Here’s the thing though? Some ideas are applicable to every industry. Basic principles about marketing are global. Marketing is really about getting yourself into the position to be at the right place, at the right time.

What we believe about marketing in the B2B space is pretty simple. You are good at what you do. You tell the truth about yourself, what you think and in some cases what you are doing as loud as you can, in as many formats as you can. You make friends. You make friends online, using Twitter, Facebook and LinkedIn (or whatever channel applies to your industry.) You make friends in local groups as well. Those channels are sort of like ongoing conferences. You blog, which is where you let people in, online. Let them get to know you.

When you connect with others in your industry, you occupy their mind space, even if they just see your name. You do favors, answer questions. You be a friend. It’s important to go to conferences and networking events to meet people face to face too. But basically, you do good work and work on people -knowing who you are- in your field.

This is marketing. It’s not going to see an immediate return. But what will happen is all of these things, daily things that you choose to do consistently, build a wave for you. The wave translates into work and sales.

Did you hear me say consistently?

One of the things we do for our clients (try to do) is to help set them a routine. We want to program the people and give them a tool to use (the routine) so they can stay consistent in their marketing. If they don’t follow the routine, we email them, write persnickety blog posts knowing they will read them…as a reminder. We might bet them or challenge them to do the routine for a few months, with a hard deadline to check back in and see what happened.

Because we know, if they use the routine, they will see results.

We know you can’t just program tools, you have to program people. It’s the people who use the tools. Ultimately it’s their habits that will determine their success or failure. If you have a beautiful website and a wonderful blog but you don’t tweet, write or post? If you’re not making friends, taking part in the global conversation going on online?

Well, you’re not marketing. That’s what we think.

You have to be consistent. Consistent does not mean you try Tweeting for two weeks and quit. Consistent means you commit to a regular routine for a year. Yes, I said it…a year. Marketing builds a wave and that wave doesn’t happen overnight.

That doesn’t mean you have to do those things daily. You just have to do them regularly. You determine what regular is for you. The most important thing is to begin, to find your voice and to use it.

So do we know how to market for your industry? Maybe we don’t know which cliques are important in your field or the industry jargon that you use. But we do know the landscape and the habits you need to get results.

Try it. What do you have to lose?

Visual Design is a language. It’s a form of communication as earnest and necessary as any spoken word. It can resemble body language in its subtlety and philosophy in its profundity. It can affect people at primal levels, without their conscious realization. Design wheedles, provokes, dispels and comforts. It is like a really amazing song in its ability to affect opinions and attitudes. Visual Design impacts. Design encompasses everything from a printed page to a package to a software UI, and may (or may not) have anything to do with pleasing aesthetics. You see, design is not just about the message communicated, about persuasion. Design is also about solving problems. Whether the problem is one of opposing ideological perspectives or one of the most practical usage of a tool, with effort and thought, design can resolve it. Design matters.

The primary question in visual design then, is “What are you going to say?” In the design, the tone and manner of approach can buffer a harsh message or emphasize and amplify one that might be lost in the daily noise of life. The next relevant question then is, “What problem do we need to solve?” Once you answer those two questions, you get your tools out. Some of the tools used in design are rhythm, balance, line, dominance, color, weight, proximity, alignment, focus and …the grid. The tools are used to convey the message, solve the problem. But if you don’t know what the problem is, don’t know what the message is?

Well, then, design will be just about making things pretty. Sort of like putting silk on a pig. It might be a really cute pig, but it’s still a pig.

How are you using design?

One question I almost always get is, “Why should I bother doing this, I don’t see any value in it.”

The question frustrates me. I understand that people have demands on their time. I give them a routine to follow and if they follow it, much like following a diet, they will see results. The results are not magical or instantaneous. You’re not going to get an immediate vertical shift in traffic or suddenly become internet famous. So maybe expectations need to be examined.

What do you want to get out out of it?

There is a global conversation going on. If you are not part of that global conversation, you’re going to miss a lot. And if you follow the routine, over time you do see benefits. Your voice has greater impact. You’re able to get direct feedback regarding your products or services. You’re able to discover what’s important to people, and why, if you listen. The power of Twitter isn’t just in talking. It’s in listening. You learn, you get news quickly. There is immense discovery and there can be collaboration and encouragement. Yes.. you can see an increase in website traffic. There’s that too. But will it be quality traffic? Will the people who visit your site because of your efforts be there for the reasons that you hope for? Will your visitors be engaged?

It depends.

Let me put it this way. The five people you listen to and spend time with most will have the most impact on your life. They, above all others, will challenge you…or not. Those people have the power to influence you for good or for ill. If you surround yourself with achievers and positive influences, the impact will be positive and you will grow. The next most influential factor in your life? The books you read. A great book can change your thought life and give you direction, create understanding and train you.

Twitter, though only 140 characters at a time, can combine the essence of both. Of course you have to use it wisely, follow positive people. How you use Twitter will determine what you get from it. Read substantive articles that others tweet. See how other people solve problems and challenges. Get inspired. But you also have to be positive and you have to contribute your own substantive thought. That’s where quality traffic comes from. This is a place where the cream can rise, but you have to be the cream. There is no getting around it. The good news is, just being consistent, polite, friendly and informative on the things you already know can make you cream.

Twitter is a sphere where you can be positively impacted and positively impact others. If you want to use it to promote your business, great. Do that. If you want to use it as a vehicle for the dissemination of your message, that’s fine too. But social media isn’t a magic bullet. It’s a tool.

How you use that tool is up to you. So why bother with Twitter? What’s the value in it?

If you have to answer that question before you’re willing to use it consistently, there may not be any value at all.

1. Get FeedX here Install it. Got that done? Great.
2. Copy the “Atom” folder in assets/snippets/tpl and rename it YouTube
3. Make sure you have the phx plugin installed (look in your assets/plugins folder). If not, get it here.
4. Make a sweet little snippet called “phx:youtubestrip”

and add this code:

$search = array('|(http://[^ ]+)|');
$replace = array('$1');
$output = preg_replace($search, $replace, $output);

return $videoid;
?>

This code, based on phx:twitterstrip, counts the characters past the point of the last slash in the ID field and returns just the actual id of the video. You don’t really need an array I don’t think as there is only one field you are fetching and changing, but I left it as an array just in case I want to grab more fields down the road, as I probably will. It doesn’t hurt anything.

And then I actually have two videos, one shows a player and one shows a preview image. It took a bit of finagling. You need to add a file called thumbnail.tpl to the youtube tpl folder if you want a small thumbnail image, or images that link back to the Youtube channel page (which I did) Within that file just place the placeholder

[+MEDIA|THUMBNAIL.1.URL+]

and then in “first.tpl” (if there isn’t one, create one), my player looks like this:

Click here to download this snippet

looking at this a little closer, the embed code here:

< iframe width="355" height="250" src="http://www.youtube.com/embed/[+ID:youtubestrip+]" frameborder="0" allowfullscreen>

needs to be your chosen width and height… and see the ID? what we are doing is using our sweet little snippet to lift out the video id (which is all you need for the embed) and place it in our code. The :youtubestrip tells phx to run our snippet. My tpl also has a a description and a Facebook share button in there, not a like button…because that is what the client requested.

then the ENTRY tpl looks like this:

< a href="[+LINK.HREF+]" title="[+TITLE+]">< img src="{{MEDIA|GROUP->thumbnail}}” />

(extra spaces added to format as code, remove them to make it work)
That is the piece that had a little thumbnail and a link to its corresponding video on the actual YouTube channel page.
and I have styled my divs of course. So basically I have one player and then one thumbnail on the page and it will display the most recently updated.

Then I am using the following snippet

[!FeedX? &url=`https://gdata.youtube.com/feeds/api/users/username/uploads` &preset=`youtube` &maxElements=`ENTRY(2)` &firstElement=`ENTRY->first`!]

(make username your channel username)

some of the other template files had pesky titles and ul’s and li’s and such but I simply got rid of them as I didn’t need them.

When finished we have this:

YouTube feed in MODX Evolution

Yes, using this method we’ve made a custom YouTube tab that we can actually format ourselves on Facebook, while the actual page is in MODX. IFrames are lovely, aren’t they?

So, there you have it. Custom YouTube feed using FeedX…let me know what you think!

A few quick notes:

– In the Search results, if the links are GREEN, those are sponsored links, do not use them. They are advertisements.

– We want to contact those with 10,000 or less in traffic because likely they will be more open to collaboration and because you will be able to boost their traffic as well, they can still have significant reach and it is a win-win.

– Your Blog list can also serve as a tickler file, you can use it to brainstorm potential future topics. Make sure you poke around the blogs you want to contact and read their comments and get to know them a little. Don’t be a pest or a spammer. Only contact those who will truly benefit from collaboration.

If you don’t know who you are, you can’t say no. If you can’t say no, you end up overextended. If you end up overextended, you get stressed and don’t have time to figure out who you are. If you don’t have time to figure out who you are and you are overextended, then the market and all of your “yeses” define who you are. That’s sort of like driving on a freeway and not changing lanes or taking any exits but being controlled by the other cars around you. You end up not having a destination.

Eventually you run out of gas.

So who are you?

We like Add to Any. I think it gives you the most custom options and templating possibilities. We’re all about template freedom.

http://share.lockerz.com/buttons/customize/

All right, so when you login, you will see the home screen in the manager.

Click “Elements.” then click “Manage Files”

Then under “Files” click “Assets”

and under that you will click “Images”

Nearly all MODX Evo installs have the images folder in this place in their directory structure. It is the folder that works with the built-in image editor. I am assuming that you want to add images to work with this built-in image manager. Most of the time the template images, or images that work with your css and templates will be located under “templates”  in a subdirectory named for the template you are using.  Those are not accessible to the main image editor/browser. So if you want to delete or change a template image then you will need to look there and use this file manager or ftp to delete or replace it.

You can create subdirectories in your images folder using the MODX image library browser in your Rich Text Editor (and we recommend it) to organize your images. In this example we are working with product images, so we will have several subdirectories, including a thumbnail directory.

Say you need to upload all of the thumbnail images. Click on the thumbnail subdirectory link and that opens the thumbnail folder. You can always figure out where you are in the directory structure by looking at the path at the top of the page.

Then you will need to scroll all the way down to the bottom. There you will see “Choose File.”

When you click that, you can browse to your folder on your computer and choose the file you wish to upload. When you do this then it will add the file name to a list at the bottom. It will not upload the files until you click Upload.

You can choose more than one file and when you are finished click “Upload file”

When you are finished, you should see a success message at the top of the page.

I would do the upload in small batches of two or three so you don’t overload the system if you are uploading bigger images (over 100K or over 500 px wide or tall) .  You can experiment and see how many it will handle, it will vary with your server capabilities and your own computer’s bandwidth. If the upload takes a long time or you do not see a success message then you are probably timing out and the image is too large. Size the image down by saving it for web in Photoshop or Photoshop elements, or adjust your maximum upload size in the MODX main configuration area and this should solve the problem.

You may have guessed you can upload doc and pdf files the same way. To put them into your file library that is accessible in your rich text editor, you will upload them to assets/files. Videos are usually placed in assets/media.

Happy MODX’ing.

UX means user experience. It’s not about visual design, though aesthetics and problem-solving are a huge component of it. It isn’t just about usability, though when we think of UX we often get it confused with UI which means user interface. A user interface is the set of controls you use to perform tasks with a complex mechanism. The UI for your car is the steering wheel, dashboard and pedals. The most common UI for a website is the navigation menu. UIs with good usability are easy to understand. They are not confusing, don’t have mystery meat navigation (unlabeled buttons) and generally don’t give someone a headache. A site with good UX will have good UI components that are usable.

But the user experience isn’t all about the usable interface. That’s like saying that a kiss is the act of two people pressing their lips together. It depends on which people. A kiss hello from your mom is a lot different from a wedding kiss between a bride and groom. See, the experience has to do with its context. A description of a kiss doesn’t do it justice, no matter who it is from. The experience matters and is personal.

I think one thing we have to understand when we are going for good UX is… what type of person will be using the website? We need to know them, not just the level of their technical savvy (will they know how to use that toggle?), we also need to understand their hearts: their purpose, their goals, their personalities, their needs.

What are your users expectations? do they like music? are they flamboyant? are they likely to hang out in the same places your friends do? are they nerds? are they conservative? liberal? do they read? Are they busy? what do they need? what tone of voice should the typeface speak in to make them feel comfortable? What annoys them?

“Impossible, no one can universally appeal to the diverse audience we will attract to our amazing online masterpiece”

Really? Because I think most people like Disneyland. Even people who hate Disneyland have, at one point in their lives, liked Disneyland.

There are some things that are so good, they have mass appeal. Meeting your users needs and working to give them a good UX  doesn’t mean you pander to people, try too hard, become something you’re not in an attempt to suck up to the masses or one-up your competition. People can sense when they are being patronized. It means you care, you’re considerate, and you want to meet user needs in a way that will delight them. However, you do this your way so you don’t compromise your brand. Good UX a lot of times means you are the best you that you can possibly be.

You’re not going for just “easy to use interface.” You’re going for “wow, that was really cool.”

The “wow” you’re going for may just come from the content on the page, a la Seth Godin, and not from the way the page looks. In fact, it should come from the content on the page, from the message presented …and not just from the UI or the visual design.

But an amazing UX will have all three. And don’t you want to be extraordinary?

I got in an argument about this with the guys at Hubspot when I first started blogging. They had maintained in their website redesign e-book that you don’t need to spend money on design in order to have a great website. Just get a template, tweak it a little and start writing. I thought then (and still think) that they went a little too far in their statement. But I will give them this, they care about content. A lot of people don’t care about content. Hubspot has lit a torch and carried it forward in their quest to make the web better and show people how to do content well. I think they’ve done a masterful job.

However, in their e-book, the Hubspot-erati were referring to graphic design solely in terms of visual appeal and not in terms of usability, UX, information architecture or even the all-important sales funnel. And if that is so, they are right. Websites with poorly written content, a confusing message and pretty graphics are not worth their bandwidth. The truth is, a lot of web designers are more concerned with just the bling of the design and are not concerned with the website content at all, or with solving problems for the user. This means you end up with a lot of very pretty (and ineffective) websites designed by well-meaning agencies who quite frankly need to get off the web. So I will agree with Hubspot on that. But don’t throw the baby out with the bathwater.

A UX-focused designer will understand the user and the message/goals of the client…and design from there. It’s not just science, though you use science. It’s also art. You don’t just look at metrics, you also use people skills and you kythe and grok and read people and do research and you work to meet people where they are and help them move to the next step, whatever it is.  You make it fun. You delight. If one thing doesn’t work, you pull back and try other things. But most of all, you care.

Good UX development starts with values that you use like a road map, you use those guiding principles to make decisions and decide where to turn in order to reach to your destination. The values and principles are as individual as people are and you decide what they are. There are some that most all of us agree on, but then we don’t always agree on how to implement them or express them. We don’t always agree on the order of importance. That’s okay. It’s a journey.

Okay, so all of that said, allow me to elaborate on our UX values and our own philosophy of UX. I have been totally inspired by the inestimable Whitney Hess in her talk given at An Event Apart. She challenged us to work on our philosophy of UX and come up with a core list that we can use to steer our decisions by. So all right Whitney, here goes:

1. Understand the user

2. Delight matters

3. Don’t make assumptions

4. Present the complex simply.

5. Plan for before, during and after

6. Be appropriate.

7. Be responsible

8. Be transparent

Are you a designer or a developer? How do you work? Are you going for a great user experience and how do you do that? what are your guiding values? We’d love to know what you think of these things. Show us your list. We double dog dare you.

Let’s make the web better.