Author Archives: CWSites

How To Win Awards And Influence Readers In 439 Days And 668 Posts

Speaker: Wade Kwon
Twitter: @WadeOnTweets
Original Post: http://ihaveclarity.com/2013-wordcamp-atlanta-1/

Professional writer, editor, journalist, speaker, and blogger, Wade Kwon, was the first presenter on this WordCamp Atlanta Track. His blog, http://wadeonbirmingham.com, is a chronicle of all the things he finds interesting about Birmingham and Alabama. His latest offering, http://magiccitypost.com, covers news about passionate people who make a difference in Birmingham and has won multiple awards. Wade also is the founder of Birmingham Blogging Academy.

Wade talked about developing blog content. He said when developing a blog it is important to have an objective or direction for your work and not necessarily a step-by-step plan. Content flows from that direction, and Wade said, “You should cover everything on topic for that objective.” He said that sometimes a blog he thought would be popular was not; while, some blogs that he thought would have no audience, were his most popular work product. That’s why Wade encourages bloggers to experiment as they write.

In my view, one of Wade’s most impressive feats is bringing diversity to Birmingham journalism through his blogs. For example, he introduced ethnic restaurant reviews at a time when all thirty-two of the commonly listed restaurants in Birmingham were Southern eateries. This is just one example of how Wade’s commitment to diversity is reflected in his content.

Since WordCamp Atlanta, I’ve been following Wade on Twitter (@WadeOnTweets). It’s no wonder Poynter Institute said that Wade is one of the thirty-five most influential people in social media. Wade’s tweets are informative, funny, and show why he is one of the South’s best bloggers.

Using WordPress as a Rapid Prototyping Engine

Speaker: Drew Morris
Twitter: @drewry
Slides: WordPress for Rapid Prototyping (pdf)

Here’s a link to download the latest version of Piklist that would have all the stuff in it that was demoed. They can download it here:

downloads.wordpress.org/plugin/piklist.zip

This is a very early release meant to be used in a Dev environment, if you encounter any bugs/have suggestions please post it on piklist.com/support.

The Art of Quality

Speaker: Reid Peifer
Original Post: Sidways8

The subtitle of this talk is “More Awesome. Less Suck.” for those that want to know.

A little history on the speaker and his company.

The speaker is the author of The Events Calendar plugin, found here.

When they got started with the plugin they started looking at their competitors. There are free plugins, your peers and a 15 year old kid living in his parents basement. So, how do they compete? They offer quality, support and longevity. That is what helps to set them apart from all the rest.

They realized that they need to compete on quality.

Notes on Quality

So what does quality mean? It can mean beautiful, stable, simple, and extensible.

Quality isn’t a state of being. It starts before you write your first line of code and continues long after you get paid for what you do.

Process Promotes Quality

Their process:

  1. Spec – Write out what the thing you are going to build does. What problem will it solve? Who will use it?
  2. Wireframe – Mock up what you want to build. There are probably 50 ways to solve the problem you are building something to solve, and your first idea is probably not the best.
  3. Prototype – This is a wireframe in code. This helps to find the “gotchas” that didn’t get caught during wireframing. They use UX 4.
  4. UX Test – This can be as simple as asking someone you know to test it and using join.me to see how the person testing goes through your app. This can be really simple.
  5. Visual Design
  6. Development
  7. Documentation – You must document your work. Document for both developers and users.
  8. QA – Time to test on as many devices as possible. Test everything, log everything, then go and fix the problems. chiliproject.org, redmine.org, basecamp.com
  9. Security Audit – Its a good idea to find a security expert and pay them to look at your code.
  10. Performance Audit – Stop developing for a minute and actually look at what you have done.
  11. Beta – Ask people to check out your product. You can ask people from Meetups or through Twitter or whatever.
  12. QA
  13. Release

Keep in mind that once you ship your product to the public, that is the day that support starts.

WordPress Navigation in Responsive Design

Speaker: Erick Arbe
Twitter: @erickarbe
Presentation Slides: shrd.by/RyAW0x

“Poorly executed navigation can spell disaster for user experience” – Gene Crawford

What is RWD? – Where can I learn about it?

How your content strategy plays into RWD & navigation

  • What do I want my users to see on mobile
  • Should I show a “lite” version of my site?
  • But aren’t users within different context when viewing my site on their phone?
  • Retro-fitting an existing website to be responsive can be difficult…especially one with a large menu

“Use mobile as an excuse to revisit navigation” – Brad Frost

Manipulate wordpress for a better responsive nav

  • Target your navigation through better css classes
  • use multiple menus if necessary
  • Use # in custom links for top level navigation so users on mobile devices click for a drop down, not to go to that page

think touch

  • optimal sizes for touch elements
  • average human finger pad is 10-14mm
  • apple suggests a 44×44 points (basically, 44px) touch target size (11.6mm)
  • windows suggest a 9x9mm touch target size
  • nokia suggests a 7×7 touch target size

Navigation Patterns

simple padding method

  • very easy to implement
  • users know where your nav is
  • no JS required

drawbacks

  • won’t work with sub-nav
  • can look akward at certain points

grid / percentage based

  • easy to touch – buttons are great size
  • looks terrific & scales nicely
  • no js required

drawbacks

  • can’t really work with sub-navigation (unless you hide sub-nav)

multi-toggle/accordian

  • accordian style menu
  • great solution for large menus
  • provides good user experience

drawbacks

  • usually requires JS (doesn’t need it)
  • can push page content way down

footer nav

  • great concept – content first
  • pretty easy to implement
  • works across all browsers
  • “give em’ content, not menus”

drawbacks

  • provides an akward jump to footer – especially on long pages
  • usually need to maintain two sets of navigation

select nav

  • can be super easy to implement
  • easy to retro-fit an existing site
  • works well with large menus
  • uses native ui controls

drawbacks

  • not incredibly sexy (tough to style)
  • usability is just ok
  • requires js

off-canvas/page slide

  • facebook style off-canvas menu
  • very slick when used with annimation
  • terrific ux

drawbacks

  • can’t be used with a huge menu

Secure All the Things!

Speaker: Doug Campbell
Original Post: Sideways8

I’m in the developers room at WordCamp ATL 2013 and listening to talk about security. Here are a few notes.

My favorite point so far is the speakers point that WordPress is usually not the weak point when a website is hacked. Its usually a plugin, javascript library, several or some other means of entry.

Keep in mind, shared hosting also means shared security. So, when you are on shared hosting the 100+ sites on that server can impact how secure your site is.

How do Hackers get in? Known exploits, brute force password hacking, network scanners, wifi vulnerabilities (be careful at coffee shops poeple!), automated tools, rootkits.

What do you do to keep your site safe? 3 Words. Update. Update. Update. In other words, keep your stuff up to date! Update the core, Update plugins, Update Themes.

Some good plugins and tools to think about using:

  • Hotfix Plugin
  • WP Security Scanner
  • Login Lockdown
  • BulletProof Security
  • Scuri.net

Delete plugins and themes that you are not using, even if it is disabled.

What do you do when your site is hacked:

Now every PHP file on your site is suspect. So you need to nuke the site and start over. Download WordPress core and re-build the site. Same with your plugins and same with your themes.

Reinstall your database from backups. If a database has been hacked, then cleaning up your files will only help temporarily The hacker will just get back in and mess stuff up again.

About Site backups:

What do I need to have backed up?

  • Database – your content is your most valuable thing.
  • Uploaded media
  • Custom themes and plugins
  • wp-config.php
  • keep a list of your installed third party plugins

Make sure you have a history of backups. If your site has been hacked and then backed up you have just backed up your hacked site.

Other Good Plugins and whatnot:

  • Backup Buddy
  • VaultPress
  • WordPress backup to dropbox
  • WordFence

Other Notes:

Make sure to have secure passwords.

Make your passwords long. A longer password of just simple dictionary words is actually harder for a hacker to crack, for example “correct horse battery staple” is better than “Tr0ub4dor &3″ because it is longer and therefore harder for a computer to guess with a brute force attack.

How To Make Six Figures In Web Design

Speaker: James Dalman
Twitter: @jamesdalman
Presenter Slides: http://jamesdalman.com/wordcampatl/

Focus on strengths – It’s very rare that you can be good at design and development.
Don’t try to become the jack of all trades.
Build your confidence – If you don’t have confidence in yourself, how do you expect your clients to be confident in you? Sometimes people will sign-up because you believe in yourself.
Invest in relationships – Invest in your clients, if you truly care then you’ll do great work.
Invest in other designers/developers, it’s important to give back to the next generation.
Find great clients – Respond to your emails, respond to your phone calls.
Sell true value – Don’t charge hourly, charge per project. Give them great value and they won’t care about the price.
Price for profit – Make money on your services.
Do Awesome work – Just because you aren’t the greatest designer/developer doesn’t mean you shouldn’t try your hardest. Always thrive to do better.
Final thoughts – Act on your ideas or they’ll never get done. Strive to be successful, but keep in mind that money isn’t the most important thing. Just get out there and do it!

Speed Things Up With Transients


Speaker: Cliff Seal
Twitter: @cliffseal
Presentation Slides: logos-creative.com/wcatl

What is the transients API

  • simple way to store cached data in the database temporarily by giving it a name and timeframe after which it will expire
  • like options API, but with expiration
  • uses fast memory (if configured)
  • uses database otherwise

What can you do with it?

  • external APIs – tweets, friends, scrobbles
  • cache expensive queries – tag cloud, ratings, custom queries

set_transient

  • $transient
    • (string) a unique identifiedr for your cached data
    • 45 characters or less in length
    • For multi-site transients, 40 characters or less in length
  • $value
    • (array|object) Data to save, either a regular variable or an array/object
    • Handles serialization for you
  • $expiration
    • (integer) number of seconds to keep the data before refreshing
    • built in wordpress time functions
  • get_transient($transient);
    • if the transient does not exist, or has expired, returns false
    • an integer value of zero/empty or could be the stored data
    • should not be used to hold plain boolean values; array or integers instead
  • delete_transient($transient);
  • multi-site
    • set_site_transient
    • get_site_transient
    • delete_site_transient
  • warnings
    • everything works on request
    • expired != deleted, unless requested
    • unrequested, undeleted transients stay until you remove them explicitly
  • scalar
    • accepts scalar values (integer, float, string or boolean) & non-scalar serializable values (arrays, some objects)
    • SimpleXMLElement will FREAK OUT, so convert it to a string or array of objects (i.e. simplexml_load_string)
  • infinite
    • transients set without an expiration time are autoloaded
    • if you don’t need it on every page, set an expiration (even if it’s a year)
    • consider the Options API for non-transient data
  • caching
    • in some shared hosting environments, object caching can be slower than using the database; check your host’s recommended settings
    • always use the Transients API to access transients; don’t assume they’re in the database (or vice versa)
  • 3 useful tools
    • TLC Transients – supports soft-expiration, background updating
    • Debug Bar Transients – adds panel to debug bar with transient info
    • Artiss Transient Cleaner – Deletes expired transients and optimizes table
  • Lots of code examples, be sure to checkout the presenter slides!

What You Should Know About Responsive Web Design

Speaker: Matt Haff
Twitter: @CWSites
Presentation Slides: Download PDF
Original Post: What You Should Know About Responsive Web Design

What is Responsive Web Design?

… an evolutionary milestone in the development of web and interaction design as a practice and as an industry.

Jeffery Zeldman

“[The web] should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.”

Tim Berners-Lee

“If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else. Web design is responsive design, Responsive Web Design is web design, done right.”

Andy Clarke

Doing It Right

  • Accessibility
  • Web Standards
  • User Interaction
  • Meet the user where they are – mobile or stationary
  • Allow for consumption of content
  • Keep in mind there is no silver bullet

What To Tell Your Boss

  • SEO – Google has specifically said that responsive design “is Google’s recommended configuration.”
  • Easier to Maintain – you only write content once and it is published across every platform, not to mention it’s future friendly
  • Content Consumption – make it easier for the customer to get to the content that they’re looking for.

Design With The User In Mind

Reading Experience

  • What is the user trying to accomplish?
  • Content should fit the screen
  • Change the navigation to make it easier for the user
  • Don’t strip content, the same information should be accessible across all devices, just change how they access it

“Mobile users will do anything & everything that desktop users will do provided it’s presented in a usable way. Assuming people on mobile “won’t do that” is a losing proposition. Don’t penalize users with missing content & features just because they aren’t on a full screen.”

Brad Frost

“Design is thinking about content and how to put it together. you need to focus on the whole. layout does not equal design.”

Luke Wrobleski

User Experience

  • Is what you’re doing common practice or do different devices have different user experiences?
  • Attention to details – size of links for touch
  • Is it necessary? Everything should have a purpose.
  • What is “above the fold” on different devices.
  • Cursor vs. Touch – some blackberries still use cursors.

Navigation

  • Commonly accepted main navigation is a slide-down menu
  • Must be accessible, intuitive, common practice
  • Does it work on the smallest screen?
  • Don’t make it so long that a user is forced to scroll.

The Way It Was Meant To Be

  • RWD = WDDR
  • HTML & CSS has always been responsive.
  • UX is about meeting the needs of the user.
  • Creating websites that adjust to different screens and devices is just the beginning.

Sources

Stay Hungry My Friends!

Testing & Troubleshooting WordPress Plugins and Themes

Speaker: Michael Novotny
Twitter: @mnovotny

Safeguards

  • jQuery & other default scripts that are included in wordpress
  • Conditionals – limit your scripts to only load on pages that are shown at that time, you’ll run into less script conflicts

Testing

  • Data – wptest.io importable library of tests for WordPress, imports a bunch of different content types into wordpress to test out multiple examples
  • Setup – adjust wordpress settings to show every process that’s running
  • Plugins
    • Debug Bar (base plugin)
    • Log deprecated Notices – log of what is now deprecated in different versions of wordpress
    • Theme-Check – runs through your blog and gives you warnings and alerts for things you should fix/change
    • Theme Mentor – above and beyond the Theme Checker plugin and makes sure that your plugin is not trying to deregister jquery, etc.
    • RTL Tester – puts your theme or plugin into the perspective of reading right to left (how the rest of the world works)
    • Slim Jetpack – jetpack without having to connect to wordpress.com to start using it. Assumes everything off, so you only turn on what you actually need.
    • Browser cache – when you’re tired of bashing your head against the wall.

Troubleshooting

  • Plugin vs. Theme vs. Core vs. Server/Configuration/PHP issue
  • Chrome Developer Tools
    • Launch Chrome Developer Tools
    • Right Click > Inspect Element
    • Access to live editable CSS, Source code, Console
  • Cross browser & device testing
    • Viewport Resizer – simulates actual sizes and devices.
    • Browser Stack – service for testing different OS, Browsers and devices

Level-Up Your WordPress Development Skills

Speaker: 
Tom McFarlin
Twitter: @tommcfarlin

  • The wordpress codex – “The Bible for WordPress”
    • the wordpress manual written for… bloggers, designers and developers
    • go here first not Google!
    • how to use it
      • search for what you’re looking for
      • reading how to do it “the WordPress way”
      • implement your solution
  • the WordPress API – application programers interface…still just as meaningless.
    • APIs are a way to make something happen
    • They allow us to make WordPress do stuff
    • Functions that make development easier
    • how to find them
      • bookmark the codex
      • identify what you’re trying to do
      • find the associated apis
      • read, practice, implement
    • how to use them
      • the function’s description
      • the arguments it accepts
      • what the function returns
    • many types
      • WordPress hooks, plugin API, widgets API, settings API, and lots more!!!
      • WordPress hooks
        • actions – something has happened in WordPress
        • filters – function that hands you content that’s about to be rendered
      • Plugin API
        • uses WordPress hooks
      • Widget API
        • has a boilerplate that will be used every time you write a widget
      • Settings API
        • If you want to add a new user settings element in the admin panel.
    • coding standards
      • how code should be written for wordpress in core, plugins, themes, etc.
      • all code is GPL – let’s make it look good
      • expectations for us and others – your code effects others
      • Create a cohesive experience
    • Finding your niche
      • know your market – the intersection of what you love doing and what you’re best at doing
      • Themes
        • If you’re into design and front-end development (and maybe backend)
        • If you’re more into presentation than development
      • Plugins
        • server-side development
        • application-like functionality
        • extending WordPress
      • Blogging
        • education
        • writing
        • documentation
        • sharing knowledge, information or seeding discussion
    • educating yourself – you’re never done
      • several releases per year
      • new blogs, technologies & practices emerge
      • someone is more capable than you
    • practical tips
      • follow those aligned with your niche
        • plugins
        • poststatus
        • envato
        • smashing magazine – wordpress channel
        • wordpress codex
        • make.wordpress.org
    • read the comprehensive blogs
    • design, code, or blog frquently… share what you’re learning!
    • don’t stop!
  • just because someone already has a plugin that doesn’t do that, doesn’t mean you shouldn’t write a similar plugin. The world doesn’t work like that!