Webmasters

UNC-Chapel Hill's Web Community

April Meetup – Daily Tar Heel

Sooner or later most of us will likely face the demanding undertaking of a major website redesign. To help you prepare for this the Webmasters group is providing an informal presentation and discussion focused on what all is involved in the redesign process.

Daniel Pshock, the webmaster of The Daily Tar Heel website (http://www.dailytarheel.com) and an integral part of the ~2-year long redesign project, will be walking us through their team’s process, design decisions, and insights the DTH picked up along the way. His talk will also include his experiences working with developers remotely, a bit on how the launch went, and what the plans are now that it’s live.  Following Daniel’s presentation there will be a chance for you all to ask questions and/or share how your own redesign process/experience relates (or doesn’t) with the DTH process.

Whether you are a ‘communicator’, design professional, web manager, or developer, you will find something of interest in this topic be that in the development and results, or in the design and decision making process. So, come join us on Thursday, April 24th at 2:00 PM!

Please note that this presentation will be held on a different day/time than our usual first Thursday. Details below:

Location:  Grad Student Center  (http://gradschool.unc.edu/student/gsc/)
Date: Thursday, April 24th
Time: 2:00P.M. – 3:30P.M

Using CSS For Attribute Selectors

An important part of creating a web page or site is crafting a good user experience. One thing I see too often is a missed opportunity for ease of use – no styling of attributes (or worse, no attribute use at all).

Styling attribute selectors can be done in your .css file, which means you can set it up once and then never worry about it again (or until your next re-design, anyway…).

By using the rel attribute on an HTML link, we’re giving it a way for the CSS to identify it. Take the following list of links, for example. Without any styling applied, it will look (more or less) like this:

Now, you can see that if it weren’t for the wording, you’d never be able to tell what the intent of the link is, and that is bad in terms of user experience.

So let’s see what happens when we use CSS and style these rel attributes!
1. Let’s remove the default bullet elements:

ul, ol {
list-style: none;
}

2. Then, let’s give our list elements some room to breathe.

  ul { display: block;}
li { padding: 5px 0; }

3. Then we’ll remove default styling for the links and put in the styles we want to have.

  a {
text-decoration: none;
font-weight: bold;
}
a:link {color: #1C5c89;}
a:visited {color: #21238E;}
a:hover {color: #1A8D59;}

4. Now comes the fun part. For internal links, we’ll give it a dotted underline:

  a[rel="internal"] {
border-bottom: 1px dotted #1A8D59;
}

5. Next, we’ll use the :after pseudo-element to help identify what kind of icon should be associated with each rel attribute. Note: If I don’t know what the baseline ems are for the site I’m working on, I’ll put my padding in px; but when you’re writing your own CSS, you’ll want to use ems or % instead of px!

  a[rel="external"]:after {
content: url("link to my external icon");
padding-left: 5px;
}
a[rel="redirect"]:after {
content: url("link to my redirect icon");
padding-left: 5px;
}
a[rel="email"]:after{
content: url("link to my email icon");
padding-left: 5px;
}
a[rel="pdf"]:after{
content: url("link to my pdf icon");
padding-left: 5px;
}
a[rel="doc"]:after{
content: url("link to my doc icon");
padding-left: 5px;
}

Here’s a screenshot of what the same list looks like after these css rules are applied:

styled-links-css

Much different! Once you’ve established the style for your site, your users will be much happier, since they will get a visual idea of your intent immediately.

 

You can also see this demonstrated on codepen and try it out for yourself:  http://codepen.io/melsumner/pen/igAFb

Anne McCarthy’s WordCamp Notes

  • Power Content for Publishers
  • Branching out with Multisite and BuddyPress
  • Drag and Drop Session

Power Content for Publishers

Hal Goodtree-CaryCitizen @hal990

Headlines

  • most important thing to write
  • 3 types: clear, clever, mysterious→CLEAR ist he only one that works
  • use your keyword within headline
  • recommended 40 characters: 12 too short, 70 too long

Voice

  • 3 types
    • 3rd person: newspaper, “he, she, it”
    • 1st person: bloggers, “I”
    • 2nd person: music, advertising, “you”
  • stick with 1st person if you are a blogger

Pictures

  • Pick a pic plugin: “Lets you pick a Creative Commons picture from Flickr and use it anywhere you want on your WordPress installation.”
  • “gateway into your story”
  • every post deserves one good pictures

Keywords

  • single word or phrase
  • use in headlines (H1), subheads (H2-H6)
  • in body: 1%-4% usage (example: 300 words > 3 words @ 1% and 12 words @ 4%)
  • helps search engines take you seriously
  • dont go past 4%
  • edit alt tags for images to include keywords

Plugins

Syndication

  • pushing content to other places (twitter, facebook, etc)
  • for other platforms other than twitter: worth it to write out an individual post
    • get better response
    • Tweka: repeats tweets at intervals

SEO

  • keywords
  • plugins
  • make friends with google webmaster tools
    • get verified
    • sitemap.xml: not what user looks at, what SEO looks at
    • helps google index your site

Branching out with Multisite and BuddyPress

Melodie Laylor

What is Multisite?

  • network of sites from single install of WordPress
  • it’s a mode in WP enabled via a code snippet

What is it good for?

  • blog network
  • multiple sites by a single owner: consolidates maintenance
  • businesses/organizations with multiple chapters under parent umbrella

What is WP Multisite not?

  • web hosting: if you do use it like this need to be transparent to the client

Considerations with multisite

  • single database for network
  • shared user base (all users in all subsites are listed at primary site)
  • shared themes
  • shared plugins
  • owner of site is Super Admin
  • allow users to register own site and manage users
  • subsites can have their own unique domains via domain mapping plugins

Caveat

  • subsites can’t install own plugins and themes
  • subsites can’t edit themes without custom css plugin
  • edit theme @ network level and the changes affect all sites
  • plugins have to be network enabled
  • exporting from multisite to stand alone WordPress site less straight forward
    • can’t migrate themes and plugins, can migrate content
    • BackUp Buddy is supposed to export from multisite
  • OVERALL: greater responsibility for Super Admin

BuddyPress

  • plugin that adds social network to WordPress
  • build virtual community
  • NOT the next Facebook–> small scale community

Buddy Press Features and Functions

  • member profiles
  • activity streams
  • extended profiles
  • friend connections
  • notifications
  • private and public messages
  • group capabilities
  • forum (bbpress)
  • does not require multisite, but often go together
  • works with almost all WordPress themes now
  • does not work if WordPress is installed in its own directory

BP Caveat

  • main: BP extended profiles and user profile metadata not linked
  • user content/documentation limited

Drag and Drop Session

Minimax (Page Layout Builder in Plugin directory)

  • adds a “MinMax tab” to text editor (edits occur on the page)
  • Responsive
  • seems to be boxes with widgets added
  • edits do not occur in the text editor/on the page
    • multistep: create the page template, set the page template
  • quote: “responsive almost in a bad way”

Widgetize Pages Light

  • quote: “Not as user friendly”
  • paste shortcode into page
  • seems to use div classes to place content (it was hard to see the screen and HTML)
  • edits occur in text editor/on page
    • “Page Builder” tab added to Text and Visual editor tabs.
  • more control over the layout width and spacing (shows percentages)
  • get additional widgets with plugin
  • add widgets to boxes
→ asked about how custom CSS interacts with the plugins and the only concern seemed to be that the responsive design could break if not done properly. Happy to put some faces to names!

WordCamp Raleigh 2013

November 23rd & 24th

Check out the WordCamp Raleigh site for more general information about sessions, presenters, and attendees.

Anne McCarthy’s WordCamp Notes

  • Power Content for Publishers
  • Branching out with Multisite and BuddyPress
  • Drag and Drop Session

Nicolette Degroot’s WordCamp Blog Posts

  • Developing Custom Themes for Clients
  • Pushing WordPress Further with Advanced Custom Fields
  • Using WordPress to Power Music Sites
  • Sliders: The Good, The Bad and The Technical

Jim Campbell’s WordCamp Bookreport

  • WordPress and Embedded Computing
  • Pushing WordPress Further with Advanced Custom Fields
  • Extending Your WordPress Toolbelt with WP-CLI

Responsive Web Design – Educause 2013

From Educause 2013 (Oct 15)

“As students, faculty, and staff increasingly access campus information through mobile devices, the need to ensure that the desired information and services are easily and effectively accessed grows. Responsive web design provides an approach that makes content available on a variety of devices. This half-day session will review the basic tenets of responsive web design, including addressing topics such as user experience and best practices, the evolution of HTML5 and CSS3, and accessibility.

« Older posts

© 2014 Webmasters

Theme by Anders NorenUp ↑