Welcome to the WordCamp Baltimore Live Blog. Follow the hashtag #wcbalt and me (@andrew_cpht) on twitter, too!
See you at the after party!
Alright, folks, that’s it for WordCamp Baltimore! A great event all around.
@nacin: We’re not going to say WordPress isn’t for blogs anymore.
@nacin: There’s a bit of nostalgia of blogging with WordPress. If anything, we want to make that much easier to do, but make it more extensive for development.
@nacin: I think we can build a singular path that supports bloggers and developers.
@nacin: 2012 is currently available on svn
@nacin: Will the new media uploader help front end developers? The short answer is yes.
@nacin: The biggest thing for is we want to solve the current pain points before we move on to more super user things.
@nacin: One of the coolest things about 3.5 is that we’re making it much, much faster.
@nacin: More and more, you’re going to be able to use the WordPress admin on mobile without needing a mobile app.
@nacin: try to break the new media uploader as much as possible BEFORE we release it.
@nacin: WordPress is definitely not infallible.
@nacin: there will probably be over 200 core contributors to 3.5.
@nacin: if you’re testing trunk, contribute to make.wordpress.org/ui.
@nacin: WordPress has moved from a blogging platform to a CMS, and now to an Application platform.
@nacin: If we can get all of it done, this should be a really cool release for WordPress.
@nacin: There are 81 slides on make.wordpress.org/ui of wireframes of the new media manager.
@nacin: The media you are uploading is just as important as the words you are writing.
@nacin: another big feature is updated media uploading! Whoo!
@nacin: First new feature is the 2012 default theme.
@nacin: Talking a little bit about WordPress 3.5.
Just a few minutes till the closing remarks with @nacin.
Thanks @williamsba, @dremeda, and @perezbox! The security panel is over. Next up is closing remarks by Andrew Nacin @nacin.
@perezbox: The only writable directory your install should be your uploads directory.
@williamsba: You could be the reason your site is hacked (if your computer is infected)
@dremeda: Top tip: make sure you keep all your stuff is updated.
@dremeda: a hack that pops up in one browser (or user agent) may not show up in another browser.
@williamsba: if you’re cleaning up a hacked site, look at ALL of the software on the server, not just WordPress. The same hack can affect multiple software installs.
@perezbox: check out the hacked and malware tags on wordpress forums, and stopbadware.com
@williamsba: the quicker you can clean your site up, the less damage will be done (esp. in terms of SEO)
@williamsba: check out SUCURI’s free scanner, or pay for their automated service.
@williamsba: make sure your environment is secure, especially if you’re on public wifi. Use SFTP, HTTPS, and SSH.
@williamsba: a good plugin to use Limit Logins which blocks password attempts after a certain number.
@perezbox: Only use the user role that you actually need. Only log in as Admin when you need to admin the site.
@perezbox: forgotten password plugin allows you to force reset all passwords on your install.
@perezbox: use an htpasswd/htaccess to white-list your IP on wp-admin.
@perezbox: Do not install every single security plugin you can found. If you can control your access, that’s half the battle.
@perezbox see who the plugin author is, how often they update them.
@williamsba If you can read code, skim through a plugin you’re not sure about. Code IS poetry, so it should look pretty.
@williamsba to do a full clean, remove ALL of the files and reinstall WordPress.
@perezbox: The risks today for WordPress are: end users, themes, and plugins.
@williamsba If the host doesn’t mention security, it may not be a priority for them.
@perezbox: Understand what your hosts security protocols are and how they let you connect to your server.
@dremeda 80% of WP sites we see infected/reinfected are sites that haven’t been updated.
@dremeda: If you’re not good on the technical side, use a WordPress managed host that is good with managing specifically for WP.
@williamsba: if your host isn’t willing to help you out, they’re probably not a good host.
@williamsba If you don’t know how to manage file permissions, talk to your host. They can usually support you with file/folder permissions.
@dremeda: get file permissions as low as possible without breaking your site.
@dremeda: If your host tells you to set a file permission to 777, it’s time to change hosts.
@dremeda: most used password lists are available easily on Google.
@dremeda: PASSWORD and 12345 are still the number 1 and 2 used password on the web.
@dremeda: Hacking is not a WordPress specific problem. WordPress ends up hacked because it is being targeted.
@williamsba: use sucuri to monitor your site so you know when you’re hacked immediately.
@williamsba: a lot of hacks aren’t obvious. You may not even know you’re hacked until you see your site on google.
@perezbox: Top two hacks are credential issues and vulnerable software.
@theandystratton: Malware incidents increase 140 percent each year.
As WordPress gets more mainstream, hackers start coming out of the woodwork.
WordPress runs over 55 million websites.
Security panel moderated by @theandystratton.
Responsive Design panel is over. Next up is the #shecurity panel with Brad Williams @williamsba, Dre Aremeda @dremeda, and Tony Perez @perezbox.
@taupecat: HTML5 is a lot more flexible as to what attributes are required than XHTML. You can set image width/height in CSS rather than in HTML.
@taupecat: display: none is not a crutch.
@taupecat: display: none should absolutely not be used to hide resource intensive elements (like images), but it’s okay for small bits of code when necessary.
@taupecat: If you are setting an image width as a percentage, you have to set the height to auto, or your image will do weird things.
@johnbhartley: If you want to use a grid, try to find one that’s already responsive.
@taupecat: Responsive Design is a 3-dimensional process: width, height, and *change*.
@johnbhartley: It’s really hard to make a non-responsive theme responsive.
@taupecat: Three types of users who sit there resizing their browsers: designers, clients, and developers.
@taupecat: (creating a child theme of 2011).
@taupecat: you can add the meta tag for responsive design using the wp_head tag in functions.php.
@taupecat: There doesn’t need to be a lot going on with media queries.
Another mobile first design is earthhour.fr.
@taupecat: Desktop first: more max-width queries. Mobile first: more min-width queries.
@taupecat: another great design is smashingmagazine.com.
@taupecat: (showing css-tricks.com as a great example of responsive design menus)
@johnbhartley: Your breakpoints should be the width at which your design breaks, or falls apart.
@johnbhartley: In responsive design your breakpoints should not line up with device screen sizes.
@johnbhartley: min-width and max-width allow you to specify styles for different screen widths.
@johnbhartley: respond.js allows media queries in IE 6-8.
@johnbhartley: The Golden Snippet meta tag: viewport, initial-scale=1.0, width=device-width
@johnbhartley: Responsive frameworks: Toast, Zurb, Twitter Bootstrap, 320 and Up.
@johnbhartley: Responsive add-ons (plugins: FitVids, Responsive Slider, Responsive Select Menu, Hammy (based on jQuery Picture.
@johnbhartley: This is not all unicorn farts and rainbows (it takes planning).
@johnbhartley: Responsive Design is not a right. It’s a privilege.
@johnbhartley: Check your analytics to see if mobile users are coming to your site.
@johnbhartley: giving an example of responsive web design using the trash compactor scene from Star Wars. nice.
@bootsz: Session Over. Now it’s snack time!
@bootsz: When dealing with clients, be up front about what you will do and what you won’t do. It will save a lot of headaches.
@bootsz: slides at seanbutze.com/wcbalt
@bootsz: Get involved in the http://make.wordpress.org/ui group if you’re passionate about WordPress usability.
@bootsz: Resource for code examples http://github.com/growthspark/gs-starter-theme
@bootsz: Ruthlessly eliminate features that are not needed or relevant to the client.
@bootsz: Gradually introduce clients to WordPress by limiting access at first.
@bootsz: Again you can add custom meta boxes via php, or by using a plugin like Advanced Custom Fields.
@bootsz: You can make custom meta boxes to add functionality to a post type.
@bootsz: Usually the default meta boxes aren’t relevant to the custom post type, so you need to deregister them.
@bootsz: By default, a custom post type editor looks exactly like a default post editor.
@bootsz: You can write custom post types using WordPress PHP functions or use a plugin like Custom Post Type UI
@bootsz: Custom post types are the key to creating very personalized experiences in WordPress.
@bootsz: default content types are limiting to a site that isn’t designed as a blog.
@bootsz: But what if we’re not building a blog oriented website?
@bootsz: Evaluate which capabilities the client needs on a project by project basis.
@bootsz: Now you have a pretty ideal setup for most clients without providing them with a cluttered menu.
@bootsz: You can use a plugin or theme include to customize the User Roles to add functionality to a limited role (such as editing widgets).
@bootsz: The admin menu (when viewed from the editor role) limits the user to most of the things they actually need to use.
@bootsz: There is a lot of stuff on the Admin menu for someone who is new to WordPress.
@bootsz: WordPress is perfectly capable of suiting clients needs, but developers need to do the work.
@bootsz: Most of the websites we build with WordPress are not blogs, but out of the box WordPress is still primarily a blogging platform.
@bootsz: We as developers usually don’t do enough to adapt WordPress to the clients specific needs.
@bootsz: Ordinary people are intimidated by WordPress
@bootsz: Isn’t WordPress usable already?
Sean Butze @bootsz is now talking about usability in the WordPress admin.
@tweetsfromchris: That’s it for Chris. Next up is Sean Butze (@bootsz) with Improving usability in the WordPress admin.
@tweetsfromchris: Google chrome allows you to spoof user agents to get mobile views. You can also auto-resize the window.
@tweetsfromchris: (Downside of being at a science museum; there are things exploding and kids screaming. And that’s normal)
@tweetsfromchris: Tables SUCK in responsive design.
@tweetsfromchris: HTML5 is alot easier to support than mobile apps.
@tweetsfromchris: Using Media Queries/Responsive design is preferable to a separate mobile site.
@tweetsfromchris: The web is not a fixed medium. There is literally no screen that the web cannot be on now.
@tweetsfromchris: The user coming to your site is coming to read what you have to say.
@tweetsfromchris: Mobile first = content first = user first.
@tweetsfromchris: HTML5 is very powerful and allows you to build apps for most devices without having to develop for different platforms.
@tweetsfromchris: Android mobile can talk to chrome on your computer and allow you to modify your CSS.
@tweetsfromchris: Browserstack.com (also mentioned earlier by @helenhousandi) shows what your site looks like on multiple devices. online
@tweetsfromchris: Tools of the trade: Shadow by Adobe. Allows multiple devices to mirror the site you’re browsing on your desktop.
@tweetsfromchris: Adaptive images: load different images via media queries. You can load a smaller image for mobile devices.
@tweetsfromchris: Icon font services like Pictos and Font Awesome allow you to use scalable fonts for icons.
@tweetsfromchris: WordPress has a built-in wp_is_mobile() for filtering content for mobile browsers.
@tweetsfromchris: Some feature detection is built into HTML5 (like with video tag), CSS3 has browser-specific prefixes like -webkit-.
@tweetsfromchris: CSS processers like LESS or SASS can help you organize your code in separate files, then merge it into one file later on.
@tweetsfromchris: Use media queries for setting different CSS rules for different screen widths.
@tweetsfromchris: Be as precise as possible with numbers (as many decimals as needed) because different browsers round differently.
@tweetsfromchris: Design using the Fluid Grid. For ems: Target/context = Result. For percentages section/site = result.
@tweetsfromchris: Start with a clean design and build upon it.
@tweetsfromchris: Start with the least common denominator (design for mobile first).
@tweetsfromchris: Designing for the USER is designing for the BUSINESS.
@tweetsfromchris: Be precise. Show the user what they expect to see while they’re visiting your site. Who is the user?
@tweetsfromchris: Using display:none, the image or resource still loads and causes delays, but is just not shown.
@tweetsfromchris: Load only what you need. Do you really need jquery on mobile? Also, display:none is not your friend.
@tweetsfromchris: How do you go fast on mobile? Give them smaller or no images,
@tweetsfromchris: 80% of mobile users who have a positive experience on your site will come back to it.
@tweetsfromchris: 17% of cell phone owners do most of their browsing on their phone.
@tweetsfromchris: For 10% of Americans mobile is their only connection to the web. In some countries that number is much higher.
@tweetsfromchris: Nearly 60% a website to load in 3 seconds or less.
@tweetsfromchris: Why should you care about mobile? 71% of global mobile internet users expect website to load as quickly as on the desktop.
@tweetsfromchris: There are a lot of devices out there (and some we don’t even know about yet).
Alright we’re back! Next up is Chris Cochran @tweetsfromchris with It’s a Mobile, Mobile, Mobile, Mobile World.
Alright, that’s it till after lunch!
@robertspangler: If you don’t have it, you need to just buy Gravity Forms.
@robertspangler: Have an arsenal of well-crafted plugins that you trust and that you use a lot.
@robertspangler: Plugins allow you to go outside of what WordPress can normally do.
@robertspangler: WordPress is really good at being flexible and upgradeable (extendable)
@robertspangler: text widgets have a lot of flexibility in terms of the content you can put in them.
@robertspangler: Featured image allows the developer to decide where the image goes (in a header/etc) without the client having to know how it works.
@robertspangler: The first half of this session was theory-based, and now he’s going over some of the technical things WordPress can do like custom menus and custom post types.
@robertspangler: Use WordPress like a toolbox, not your paintbrush. WordPress is the canvas. (some mixed metaphors, but I get it.)
@robertspangler: We can make a div do a lot of crazy crap!
@robertspangler: Understand how WordPress HTML code works (whether it puts things things in lists, etc.)
@robertspangler: Know how HTML tags and CSS fit into a design.
@robertspangler: Know the language (HTML) so you know what HTML/CSS can do. If your design can’t be coded, there’s usually a usability issue anyway.
@robertspangler: Use your freedom to design, but make sure you evaluate the practicality of the design.
@robertspangler: Think about the cost of your design elements.
@robertspangler: You can get into trouble by designing something that the developer cannot (or does not want) to do.
@robertspangler: The point of an about page and showing off previous clients is to build trust.
@robertspangler: You don’t design a house by buying the wood and nails first. It is important to plan first.
@robertspangler: Pause and think about more what the site should do. Start with your problem, not your solution.
@robertspangler: Design your site first, then think about WordPress later. That way your site won’t look like every other WordPress site.
@robertspangler: Sometimes we make things fit into boxes that they shouldn’t really fit in.
@robertspangler: think outside the box? No, set expectations.
@robertspangler: Right now this is more of a remedial drawing course. But there’s a point.
Next up: Designing for WordPress without WordPress by @robertspangler (the theme to the Wonder Years aka A little help from my friends) playing in the background.
Thats it for @helenhousandi! Great session!
@helenhousandi: web fonts tend to optimize for the web, so generally don’t affect page load TOO much.
@helenhousandi: advantage of using google fonts: a lot of users will have them cached already.
@helenhousandi: browserstack.com allows you to see what a design looks like on multiple platforms.
@helenhousandi: A lot of Mac users (i.e., designers/developers) never think about the PC.
@helenhousandi: Bootstrap is much more of a complete design rather than a foundation.
@helenhousandi: The photoshop etiquette Manifesto for Web Designers (photoshopetiquette.com)
@helenhousandi: consider plugins that insert stuff before/after content.
@helenhousandi: threaded comments with gravatars, paginations, galleries and images with captions, post formats, sticky posts
Common wordpress theme components: entry meta (author, date, categories, tags). often forgotten in the design phase.
@helenhousandi: understand template hierarchy (http://codex.wordpress.org/Template_Hierarchy)
@helenhousandi: Common Theme Templates: Search, 404, Page templates.
@helenhousandi: Common WordPress templates: home/front page, single posts/pages/attachments, archives (category, tag, date, author)
@helenhousandi: “I’m the best end user ever because I’m a lazy developer.”
@helenhousandi: Test menus, both assigned and unassigned. Also, create content! That will help you understand how you want to design your site.
@helenhousandi: Get to know what sidebars/widget areas are and who they work.
@helenhousandi: Use the monster widget to see all of the widgets that come with WordPress (so you can style them).
@helenhousandi: Use theme unit test data to make sure you include styles for all of the elements that could be entered into a site.
@helenhousandi: Get to know WordPress; Have a test install, check out the default themes, learn about how it works.
@helenhousandi: Now the WordPress part of it. (yay!)
@helenhousandi: Myriad Pro is not a web-safe font! (nor are fonts installed with software like Adobe.)
@helenhousandi: Some form elements, really, really, really, don’t like being styled.
@helenhousandi: columns and hyphenating are possible in some recent browsers, but not consistently.
@helenhousandi: what is NOT possible (or recommended): columns for text, hyphenating, consistent form styling.
@helenhousandi: What is possible: rounded corners, gradients, box shadows, text shadow.
@helenhousandi: Learn about what is and is not possible on the web.
@helenhousandi: The more CSS we can use, the better the design will be because it renders better on the screen (and faster too!)
@helenhousandi: slice your images or at least create a slicing guide for your design so the developer won’t have to guess.
@helenhousandi: Choose a responsive CSS grid system like Zurb Foundation, Skeleton, or 1140 CSS Grid. (or at least understand what they are).
@helenhousandi: make sure you include the bold/italic fonts, otherwise Helen will cry when she sees fake-bold or fake-italic.
@helenhousandi: Google Web Fonts and Typekit are good resources for web fonts.
@helenhousandi: Use the default san-serif font, or embed web fonts on the web.
@helenhousandi: Arial on the mac doesn’t look awesome, and Helvetica on the PC is just awful.
@helenhousandi: Understand (and accept) that browsers and operating systems differ in the way they display your site.
@helenhousandi: Consider HiDPI (aka Retina) when designing images.
@helenhousandi: Don’t stretch text. It’s not good design, but on the web it’s not even possible.
@helenhousandi: There are no half-pixels (excepting HiDPI). Always give numbers in whole pixels.
@helenhousandi: On a touch device, you don’t get hover states.
@helenhousandi: think about the various interaction states: hover, focus, and active (and touch!)
@helenhousandi: The screen is not a page.
@helenhousandi: Stylized form elements are difficult to achieve across multiple browsers. Better to use the browser default.
@helenhousandi: “Forms on the web for everybody are kind of a pain.”
@helenhousandi: “On the web it’s better to define line-height as a proportion.”
@helenhousandi: Typography includes font faces, variants (italics/bold), and line height!
@helenhousandi: Also good for production guide: image sizes, iconography, buttons, and forms.
@helenhousandi: Use a Style and Production guide including colors (hex codes and gradients), measurements, typography, etc.
@helenhousandi: Naming your layers properly helps developers when naming files and css classes and ids.
@helenhousandi: Control your layers and name them properly.
#LayerVault can work with photoshop files.
If you use Mac OS X Lion or higher, you can use the builtin versioning.
DropBox and BaseCamp both have a rudimentary built-in version control system
@helenhousandi: Version control tracks changes, who made them, and why they made them
@helenhousandi: Use version control to ensure your developer uses the right files.
@helenhousandi: Think about questions that developers always ask you.
Great music being used to introduce the speakers. @theandystratton: Helen is “a designer…who is a developer.”
(gotta remember to fix this plugin to sanitize the quotes. I cannot use apostrophes right now).
I’ll be in the developer/designer track all day, so you can also follow @TechGirlTweets, who is in the user track right now.
Next up (in 10 minutes) @helenhousandi talking about helping a developer faithfully realize your design.
@karks88: use user access plugins to keep your client from messing up their site.
@karks88: Keep a cheatsheet of all of the code that you use for development. http://karks.com/baltimore/
WP DB Manager: automatically back up your database and email it to yourself.
Smart WYSIWYG Blocks of Content: a visual editor enabled text widget.
Be careful with Search & Replace-it’s incredibly easy to kill your site with it.
Search & Replace: globally search and replace items in your database. (great for moving servers, etc.)
SB Child List shortcode lists child pages or parent page of a given page.
List Category Posts using a short code. Great way to do custom archive pages.
Going over time-saving plugins: First one is CMS Dashboard, which simplifies the dashboard for users.
#startbox looks like a cool framework and it’s free, which is nice.
Right now @karks88 is talking about using frameworks, including #genesis and #startbox.
Starting a little late. I’m in @karks88′s talk on being a more efficient freelancer.