Uncategorized

WordPress for Non-Technical People

Let’s say your new WordPress site has been set up, and you know how to login. Something called the “Dashboard” is on the screen. _Now what?_

This is an introduction to a few of the basics to using WordPress.

h3. Write a New Post

_(This article is written for WordPress 2.5 and similar later versions.)_

!/images/108.png! The first thing you notice is a big orange bar that says *”Right Now,”* and has buttons for “Write a New Page” and *”Write a New Post”.*

That last one sounds good, so click it: *”Write a New Post”.*

!/images/109.png! Now there’s a “Title” box (that one seems self-explanatory), and a “Post” box (and some other stuff down below). Type a title in the obvious place, and then let’s consider this “Post” box, with its associated tool buttons.

First, to the right of the label “Post” are two tabs: “Visual” and “HTML”. Eventually, you’ll want to use the HTML setting, so your code is as good as your prose.

!/images/112.png! For now, confirm that “Visual” is selected, and start typing your post.

h3. Formatting Buttons

There are several presentational buttons, in a row along the top of the “Post” box. You can select some text, then click these to make it bold, italic, etc. (Again, this produces HTML code that is pretty messy, so you’ll want to leave this “Visual” setting behind someday.)

!/images/111.png! Three of these formatting buttons, I just don’t recommend for non-technical people: Insert Image, Insert More Tag, and Show/Hide Kitchen Sink. So if you want to insert an image, instead use the “Add Media” buttons just above the main formatting buttons:

h3. Add Media

!/images/110.png! With these buttons, you can add an image, video, audio, or other media.

*Add an Image:* To add an image into your post, place the cursor about where you want the image to be. Click “Add an Image” (not the button with the picture of a tree, rather the button next to “Add media”).

Remember, do _not_ use the “Insert/edit image” because it’s a bit more geeky, and assumes the image is already uploaded to the internet (rather than on your computer).

!/images/114.png! A pop-up thing will … pop up. (Technically, this is called a “modal window.” Now you can impress people at parties with your technical knowledge.)

To select an image on your computer, click “Browse…” and select it from the right folder (“My Pictures,” for example). After clicking Okay or Open, click “Upload.” Then, you may wish to edit the title, caption or description. And you may wish to delete the “Link URL.” Next, select an “Alignment” and “Size,” and click “Insert into Post.”

*Add Video* and *Add Audio* use similar methods.

*Add Media* is also similar, but can be used to upload a PDF document. If you do upload a PDF, make sure to keep the link address that is automatically generated, since that is the link to the PDF document.

h3. Categories

Depending on which Theme you select for your WordPress site, most of the options below the main post won’t be relevant yet.

!/images/113.png! The one that’s probably important is “Categories” (or perhaps “Tags”), because your designer may have used them to dictate on which Page this post should go. For example, a post with category “Blog” will go on your blog page, and a post with category “Articles” will go on your articles page, etc.

When you’re done with your post, click “Publish” and take a look at your site. If all looks well, hooray!

If not, just go to the “Manage” tab (and the “Posts” sub-tab), and click the post to edit it.

h3. Next Steps

Future articles may cover other aspects of maintaining your WordPress site. Till then, enjoy publishing your content.

Standard
Uncategorized

Barcamp, FOWA, SXSW, oh my!

These are the best of times for South Florida web development, or at least they seem so far.

I’m all “agog”:http://www.merriam-webster.com/dictionary/agog over upcoming events, conferences and meet-ups:

First, I’m going to attend the “FOWA(Future of Web Apps)”:http://futureofwebapps.com/ conference in Miami on Thursday & Friday of this week. The venue is the “Arsht Center for the Performing Arts”:http://www.carnivalcenter.org/.

!/images/107.png(Barcamp Miami logo)!:http://barcampmiami.org/
Then, I’m participating at “Barcamp Miami”:http://barcampmiami.org/.

p{clear:left}. !/images/106.gif(SXSWi logo)!:http://2008.sxswi.com/
And next week, “SXSWi(South By Southwest interactive)”:http://2008.sxsw.com/interactive/!

Standard
Uncategorized

Biola University Redesigned (Part 2)

h2. Part 2 of 2

“Part 1”:/article/biola-undergrad-1 was published last week.

* _MM:_

You describe your role as “web developer and information architect” including “ColdFusion, Javascript, HTML templates….” Can you discuss the project management process, and your IA(Information Architecture) choices? Did you use any personas or wireframes?

* _DL:_

Organizing the content can often be tricky, and there’s been a number of different structures over the last several years. We knew we needed to clean things up, and we wanted to group the content together more overall. In the collegiate world, there are a lot of phrases that maybe aren’t the best but are commonplace and expected, so we did a lot of research to see what kind of liberties we could get away with. We ended up with two wireframes, and conducted some focus groups and user testing to see what was most successful.

* _MM:_

Tell us about “Biola red.”

* _DL:_

Pantone #185. “Biola’s”:http://biola.edu/ colors are red and white, so our web sites need to feature that color in some capacity. Usually it’s just in the mark, but on the “Undergrad site”:http://biola.edu/undergrad/ it’s used more prominently.

* _MM:_

One of “Godbit’s”:http://godbit.com/ premiere interviewers, “Yannick Lyn Fatt”:http://www.godsporch.net/, had some questions for you on the “forum”:http://godbit.com/forum/:

bq. what was the inspiration for the design (also the print design since the website was based on that)? I’m guessing the fact that the University is in SoCal had something to do with it (correct me if I’m wrong) but the design is certainly unusual for a school website.

* _DL:_

Here’s Jessica Nelson on that:

bq.. The general concept behind the design was the idea of conversation. We wanted the students and parents to feel like the university was inviting them in to Biola’s culture. The morphing that occurs in a lot of the illustrations comes from the idea that Biola is a university whose faith is integrated into every major – and that the campus on the whole is very integrated. We wanted to communicate the community that exists here, and the crossover between majors

Over the course of the project we had a total of 5 people work on this. My Creative Director, two designers, an illustrator and myself. So each person brought something new to the table. Being located in Orange County really helped, we are always inspired by the surf culture. We wanted to have fun, and we figured that if we were having a blast—then the students that would visit the site and receive the view-book would have a lot of fun leafing through the book. Four out of the five that worked on it are alumni, so we had an easy time of figuring out how to communicate the environment these students would find themselves in. I’d say the inspiration came from our memories of what it was like to go there.

Everything had to do with Biola’s location. Every element we designed was done for the kids in SoCal—or the ones who wanted to be. We added such ridiculous detail so that they would continue to come back for more. I remember having to convince my Creative Director that roller-skating was in, and that by the time this thing launched college age kids would be skating in flocks on the weekend.

p. * _YL:_

bq. Also what was the message/feeling that you wanted people to get from the design of the website. Did the principal and other administrators give you and your team free reign over the design? Did they play a role in giving you ideas for the design?

* _DL:_

I’ll let Brian Miller, who was the project manager for the entire Biola Undergrad campaign, answer that one:

bq.. When students visit our website or read our ads or print materials we want them to experience a high level of quality, professionalism and clear communication that leaves the distinct impression that Biola is a university focused on its mission to equip men and women to impact the world for the Lord Jesus Christ. The design style itself is not intended to be the focus, but rather the backdrop to the message we want to communicate. We believe the design and layout will serve to draw people in and set a background tone that enhances a curious student’s experience with Biola as they explore.

Biola administration has been very supportive of our endeavors to create quality marketing materials. They have empowered us to make decisions that are in the best interest of the university and we are very thankful for that.

p. !/images/100.jpg(Biola undergrad redesign – photo illustration)!

* _MM:_

Your “blog”:http://breadcrumbs.davejlowe.com/archive/80/project-launch-biola-undergrad mentioned the lack of “an elegant ColdFusion solution”, that you “needed something new”:

bq. following the MVC(Model View Controller)/MTV(Model Template View) as much as I could (it’s the “Django”:http://www.djangoproject.com/ influence on me) and the custom tag I designed merely includes two files. The first is something like a Django view except of course it doesn’t determine which template will be called; it just sets up some variables that the template will have access to. The second is the base template that the content page is extending.

So, is that a custom CMS(content management system), or what exactly in the backend?

* _DL:_

It’s not a full-fledged CMS because most of the content sit in html files on the server and are browsed to directly. That’s why it’s only marginally similar to Django templates. Pieces of content are managed by a ColdFusion solution I designed (a “personalization system” for lack of a better name). All the links in the footer and the counselor greetings and photos are from that system. Of course that makes it complicated when some of your content is in the file system and some is in a database. But when you’re dealing with a server that doesn’t have regex URL handling… well you do what you can.

* _MM:_

The “personalization system” sounds interesting, as a way of personalizing the site based on each person’s activity. You say “It’s currently only being used in a few places; one of the unfortunate realities is no one has a lot of time to sit and think about what’s possible.” Any thoughts on how it works and whether it can that be automated?

* _DL:_

It’s based on the information the visitor gives us as well as basic visit patterns, and on the concept of “goals” that the admissions staff wants each visitor to accomplish (which could be completing a form or just visiting a specific page). The value, or presence or absence, of any one of these bits of data can be leveraged to influence pretty much anything on the site.

For example, every feature on the home page could be adjusted to advertise events or content that is most likely appropriate from where you’re at in your research and interest in Biola. Or, every single student quote could be from students that are from a similar economic or cultural background. There’s a lot of potential. Ultimately, I think the system will need to be implemented in something like Django in order for that potential to be realized. Splitting up content between database and file system is a hindrance.

* _MM:_

Any specific challenges bringing the print design of the campaign to the web?

* _DL:_

One of the tougher challenges was keeping file size down. The many graphics and textures made that very difficult. In the end, it’s still a pretty hefty download but it could have been worse.

* _MM:_

I noticed the default blue+underline links; is that for accessibility purposes?

* _DL:_

One of our highest priorities was to make the information easy to find. The creative elements and illustrations are very important, but we wanted the content itself to be clean and readable, and links to be obvious. I think that’s why we didn’t stray far from the default blue.

* _MM:_

Elastic layout, very nice.

* _DL:_

Thanks! That was a feature I was very interested in adding. I created an earlier version of the core layout CSS(Cascading Style Sheet), and it used em-based dimensions so that the layout would enlarge or diminish based on the font size you had set. We quickly realized that sort of approach wasn’t best for our core audience, and Tim worked on implementing the elastic layout you see now. It’s one of my favorite elements, especially the banners at the tops of the main pages that adjust to the size change.

* _MM:_

Searching the site for “web design” yields zero results. Does Biola teach web design/development, and do they teach web standards?

* _DL:_

Unfortunately you’ve stumbled across a weakness there: it’s not a full-text search, just keyword-based and we’re missing a few keywords. Biola does in fact have an excellent art major BFA(Bachelor of Fine Arts) and a design emphasis. While traditionally much more print-oriented, the web courses are getting better.

A friend of mine has started teaching the classes and he’s very standards-aware and teaches CSS and valid XHTML. I had the opportunity to guest lecture last year, and will be involved again this year so I’m really looking forward to that. The interest in web design is growing, and I’m really hoping more students come into the program with the passion to learn and excel. Look for great things to come from Biola-trained web designers!

* _MM:_

Any recommendations for new web designers? How did you learn, and how should new web designers learn?

* _DL:_

The desire to learn is most important. Get your hands dirty. Learn how to write semantically-meaningful markup (you need good source material). Start playing around with as much CSS as you can. Don’t know what a specific property does? Find out! And get inspired by scouring the web for great designs. Figure out how they did what they did. Then start adding to your arsenal with things like DOM(Document Object Model) scripting and frameworks. The more you know about the bigger picture of web development, the better a designer you’ll be. Oh, and attend “Biola”:http://biola.edu/undergrad/. 😀

* _MM:_

Thanks again.

* _DL:_

Thank you, Michael, it’s been a pleasure. 🙂

_This article is © Montgomery 2007. Some rights released with a_ Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.

_Also published at_ “Godbit”:http://godbit.com/article/dave-lowe-2.

Standard
Uncategorized

Biola University: Redesigned Undergrad Website

p(notice). “Dave Lowe”:http://davejlowe.com/ is a web developer at “Biola University”:http://biola.edu/, and was responsible for the redesign of their “undergraduate website”:http://biola.edu/undergrad/, which received some awards and sparked some discussion in the “forum”:http://godbit.com/forum/ at “Godbit”:http://godbit.com/. I recently had a chance to interview him, and obtain more information from his team about the redesign.


p(notice). *Note:* _Part 1 of 2._ Part 2 will be published next week.

* _Michael Montgomery:_

You work for Biola’s IMC(Integrated Marketing Communications) Design Studio as the web developer for the Web Group. How (and when) did you start in the field, and with “Biola University”:http://biola.edu/?

* _Dave Lowe:_

I created my first web site (if I recall correctly, it was on Geocities) in my freshman year of college back in 1996. At first it was just some movie quotes, and then I utilized it for book lists and Amazon affiliate links. A few years later I started working with ColdFusion through a student job I had in the Information Technology department. During my senior year, a good friend who was working for Admissions as their web guy decided to move out of state and recommended me for the position.

Web design was very interesting to me because it combined what I was studying (art) with my background in programming. And frankly, I was about to graduate and had no clue what I was going to do next so it was a very welcome opportunity. That was back in 2000, and I’ve been working here ever since.

For the first 5 years I worked for Enrollment Management, outside of the more centralized marketing and IT groups, but managing and developing some of the most important university sites. A year and a half ago, my position was transferred into Integrated Marketing Communications (a move I advocated and am grateful for, because it’s the right place for this position to be situated).

* _MM:_

What would you be doing otherwise, and what were you doing before?

* _DL:_

I’d definitely be working on the web, no escaping that. Before this, of course, I was attending college (at “Biola”:http://biola.edu/).

!/images/98.jpg(Biola undergrad redesign – photo illustration)!

* _MM:_

Share a little about your faith?

* _DL:_

I grew up in a Christian home and in a very privileged area (Santa Barbara). In junior high, I went through a dark period (who didn’t, right?) and for the first time realized the emptiness of life apart from God. My youth pastor at the time was a passionate believer and the way he lived his life was a powerful example of God’s redemptive work and love for us. Still, I wouldn’t say I really had a true personal and living faith until I started attending “Biola”:http://biola.edu/ and grappling with truth and community. That’s when I knew I not only needed God’s grace, but wanted to follow Him with all that I am.

At this point in my life, I’m finding myself more and more often just being amazed by God. I’ve been reading through the Old Testament a lot more over the last three to four years, and, man!, that has been an awesome catalyst of growth. I was always bored by the OT(Old Testament) when I was a kid, or wondering what the point was and just wanting to read the New Testament. I was missing a ton! It’s incredible, exhilarating, and mind-boggling how God so clearly illustrates his ultimate plan of sacrificing his Son for our sake throughout history. I know few things more strongly than this, that I will never cease to learn from the Bible, no matter how long I’m on this earth.

* _MM:_

What are the benefits and challenges of working as an in-house developer? At a university? At a Christian university?

* _DL:_

Good question. There are some great obvious pluses: consistent paycheck, great work benefits (vacation time, 401k, medical and dental), stability and peace of mind. But it’s much more than that. I work in an incredible department filled with people that make me happy to come to work every day. Working at a university means that I work pretty much on the same site, or network of sites, all the time which can be a little repetitive. But there’s also a broad range of content and audiences too, so it keeps things interesting and challenging.

IMC(Integrated Marketing Communications) has the rare blessing (within the university world) of having the marketing responsibility for the entire organization. On the downside, that means a lot can go wrong and there’s the potential for clients to become disgruntled because they have to work with us. But the importance of consistent branding and experience can’t be overstated.

And finally, this is a strong, evangelical Christian university, so working here is in part a ministry and a constant motivating factor for me to do my best work. “Biola’s”:http://biola.edu/ mission is equipping men and women in mind and character to impact the world for the Lord Jesus Christ, not to sell more products or increase share prices. That’s huge.

The main challenges … well I have to be honest, because it’s a university, there’s always going to be the possibility of a lesser standard of quality. It doesn’t have to be like that, but the environment makes it a little easier for it to happen. Just look at how my career here began: for the first two or three years I was making it up as I went along, basically learning on the job.

When I started reading the blogs of guys like “Jeremy Keith”:http://adactio.com/, “Dan Cederholm”:http://www.simplebits.com/ and “Andy Budd”:http://andybudd.com/, my eyes were opened to a whole new world. I decided to get serious and learn how to excel at my craft (even if it meant re-learning everything I thought I knew). My boss at the time didn’t know anything about what I did, or how I should be doing it better. I think that’s commonplace in an organization that’s not commercially-driven.

The other huge challenge is not having full control over what we’re responsible for (the website). IT has historically controlled “the computer” which started out being just one or a few computers and now is the standard computer setup for faculty & staff, and the servers, including the web servers. IT doesn’t really understand what the web is all about, and still views this whole internet thing in terms of “applications” (which all too often means something as simple as a contact form) and “look and feel.” So we’re locked out of some pretty critical areas. It’s understandable and it’s a process, but it can still be extremely frustrating.

* _MM:_

Describe your biggest work accomplishment, and failure?

* _DL:_

I’ll go with the redesign of Biola Undergrad for my biggest work accomplishment. It was a complete redesign and I’m very proud of the final product. It was the first site we’d done that was built on web standards. It’s not perfect but I like to think it’s pretty darn close, all things considered.

It also helped us establish some other standards, like form markup and behavior. It’s a close call though because we just relaunched the main “biola.edu”:http://biola.edu/, and we’re going to be converting the entire site over the next year. So that’s going to be a pretty big thing if we succeed.

_Biggest failure:_ I spent a lot of time a number of years ago trying to build a slew of content management tools for my division and beyond. It was well-intentioned but doomed to failure. Some are still in use, but I think I could have used my time better (especially if it meant I learned about web standards earlier).

!/images/99.jpg(Biola undergrad redesign – Academics – photo illustration)!

* _MM:_

The new redesign of the “Biola University undergraduate”:http://biola.edu/undergrad/ site is quite a bold departure from prior designs, and other university sites in general. Your “blog post”:http://breadcrumbs.davejlowe.com/archive/80/project-launch-biola-undergrad said, “I’m also pretty certain that there isn’t another university web site like this out there.” You could say that again.

* _DL:_

I’m pretty certain there isn’t another university web site like this out there!

I’ll take a minute here to credit the people behind it. So much of this is due to the work of the outside designers who came up with the print design, one of whom is “Jessica Nelson”:http://biola.edu/ (who now works for us at Biola), as well as my creative director, “Brian Miller”:http://biola.edu/, who led the project. “Tim Beardshear”:http://biola.edu/ is the web designer who translated the design onto the web, so I can’t say enough about his work. And finally, the clients for the project, “Josh Smith”:http://biola.edu/ and “Andre Stephens”:http://biola.edu/ in Undergrad Admissions. These are some of the people I’m proud and lucky to work with.

* _MM:_

The site earned several awards, including the front pages of “Stylegala”:http://www.stylegala.com/news/200706/1318.htm and “CSS Remix”:http://cssremix.com/showcase/biola-undergrad. Any other awards?

* _DL:_

We’ve gotten a lot of mentions across the web, which has been really neat to see. “Vitamin”:http://www.thinkvitamin.com/ mentioned the site in their “best sites of the week” recently too. The print campaign has received “CASE(Council for Advancement and Support of Education)”:http://www.case.org/ and “Admissions Marketing Report”:http://www.hmrpublicationsgroup.com/Admissions_Marketing_Report/amr_awards_competition.html awards.

* _MM:_

How did the unique illustration style come about, and how was it shepherded through the university’s stakeholders? Why did it take two years? Anything you would do differently?

* _DL:_

Our marketing and admissions teams conducted a full year of research, including surveys, interviews and focus groups, to get valuable insight into design preferences, content presentation, etc. One of the styles presented during the focus groups was this photo illustration style, and it quickly became a clear preference for the students. The production phase then took another year for the print and the web site (with the exception that I had started working on what would become the personalization system during that first year).

* _MM:_

What success criteria were selected, and what were/are the results?

* _DL:_

The number of inquiries and enrollees is the largest indicator of success. We’re seeing an 11% jump in the inquiry pool, and expecting 5% growth for the incoming freshman class this fall—which points to a successful campaign. Prior to being featured on CSS showcases around the web, we were also seeing very low bounce rates on the “Undergrad home page”:http://biola.edu/undergrad/ —between 8% and 18%.

* _MM:_

The site’s code is lean and clean, with a strict doctype and semantic markup—nice job. I enjoyed reading about how you insisted on web standards, “even if they didn’t completely understand what the big deal was.”

* _DL:_

Thanks! Now web standards and accessibility is the norm in our office.

p(notice). *Note:* _Part 1 of 2._ Part 2 will be published next week.

_This article is © Montgomery 2007. Some rights released with a_ Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.

_Also published at_ “Godbit”:http://godbit.com/article/dave-lowe-1.

Standard