17.35

See you at the after party!

17.35

Alright, folks, that’s it for WordCamp Baltimore! A great event all around.

17.33

@nacin: We’re not going to say WordPress isn’t for blogs anymore.

17.32

@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.

17.31

@nacin: I think we can build a singular path that supports bloggers and developers.

17.30

@nacin: 2012 is currently available on svn

17.29

@nacin: Will the new media uploader help front end developers? The short answer is yes.

17.29

@nacin: The biggest thing for is we want to solve the current pain points before we move on to more super user things.

17.27

@nacin: One of the coolest things about 3.5 is that we’re making it much, much faster.

17.27

@nacin: More and more, you’re going to be able to use the WordPress admin on mobile without needing a mobile app.

17.24

@nacin: try to break the new media uploader as much as possible BEFORE we release it.

17.24

@nacin: WordPress is definitely not infallible.

17.22

@nacin: there will probably be over 200 core contributors to 3.5.

17.21

@nacin: if you’re testing trunk, contribute to make.wordpress.org/ui.

17.21

@nacin: WordPress has moved from a blogging platform to a CMS, and now to an Application platform.

17.19

@nacin: If we can get all of it done, this should be a really cool release for WordPress.

17.18

@nacin: There are 81 slides on make.wordpress.org/ui of wireframes of the new media manager.

17.18

@nacin: The media you are uploading is just as important as the words you are writing.

17.17

@nacin: another big feature is updated media uploading! Whoo!

17.16

@nacin: First new feature is the 2012 default theme.

17.15

@nacin: Talking a little bit about WordPress 3.5.

17.11

Just a few minutes till the closing remarks with @nacin.

16.56

Thanks @williamsba, @dremeda, and @perezbox! The security panel is over. Next up is closing remarks by Andrew Nacin @nacin.

16.54

@perezbox: The only writable directory your install should be your uploads directory.

16.53

@williamsba: You could be the reason your site is hacked (if your computer is infected)

16.53

@dremeda: Top tip: make sure you keep all your stuff is updated.

16.52

@dremeda: a hack that pops up in one browser (or user agent) may not show up in another browser.

16.50

@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.

16.48

@perezbox: check out the hacked and malware tags on wordpress forums, and stopbadware.com

16.45

@williamsba: the quicker you can clean your site up, the less damage will be done (esp. in terms of SEO)

16.45

@williamsba: check out SUCURI’s free scanner, or pay for their automated service.

16.43

@williamsba: make sure your environment is secure, especially if you’re on public wifi. Use SFTP, HTTPS, and SSH.

16.41

@williamsba: a good plugin to use Limit Logins which blocks password attempts after a certain number.

16.41

@perezbox: Only use the user role that you actually need. Only log in as Admin when you need to admin the site.

16.40

@perezbox: forgotten password plugin allows you to force reset all passwords on your install.

16.39

@perezbox: use an htpasswd/htaccess to white-list your IP on wp-admin.

16.39

@perezbox: Do not install every single security plugin you can found. If you can control your access, that’s half the battle.

16.38

@perezbox see who the plugin author is, how often they update them.

16.37

@williamsba If you can read code, skim through a plugin you’re not sure about. Code IS poetry, so it should look pretty.

16.36

@williamsba to do a full clean, remove ALL of the files and reinstall WordPress.

16.33

@perezbox: The risks today for WordPress are: end users, themes, and plugins.

16.29

@williamsba If the host doesn’t mention security, it may not be a priority for them.

16.28

@perezbox: Understand what your hosts security protocols are and how they let you connect to your server.

16.27

@dremeda 80% of WP sites we see infected/reinfected are sites that haven’t been updated.

16.26

@dremeda: If you’re not good on the technical side, use a WordPress managed host that is good with managing specifically for WP.

16.25

@williamsba: if your host isn’t willing to help you out, they’re probably not a good host.

16.24

@williamsba If you don’t know how to manage file permissions, talk to your host. They can usually support you with file/folder permissions.

16.24

@dremeda: get file permissions as low as possible without breaking your site.

16.23

@dremeda: If your host tells you to set a file permission to 777, it’s time to change hosts.

16.23

@dremeda: most used password lists are available easily on Google.

16.22

@dremeda: PASSWORD and 12345 are still the number 1 and 2 used password on the web.

16.22

@dremeda: Hacking is not a WordPress specific problem. WordPress ends up hacked because it is being targeted.

16.21

@williamsba: use sucuri to monitor your site so you know when you’re hacked immediately.

16.20

@williamsba: a lot of hacks aren’t obvious. You may not even know you’re hacked until you see your site on google.

16.19

@perezbox: Top two hacks are credential issues and vulnerable software.

16.15

@theandystratton: Malware incidents increase 140 percent each year.

16.14

As WordPress gets more mainstream, hackers start coming out of the woodwork.

16.14

WordPress runs over 55 million websites.

16.14

Security panel moderated by @theandystratton.

16.12

Responsive Design panel is over. Next up is the #shecurity panel with Brad Williams @williamsba, Dre Aremeda @dremeda, and Tony Perez @perezbox.

16.04

@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.

16.03

@taupecat: display: none is not a crutch.

16.03

@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.

16.00

@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.

15.55

@johnbhartley: If you want to use a grid, try to find one that’s already responsive.

15.52

@taupecat: Responsive Design is a 3-dimensional process: width, height, and *change*.

15.51

@johnbhartley: It’s really hard to make a non-responsive theme responsive.

15.48

@taupecat: Three types of users who sit there resizing their browsers: designers, clients, and developers.

15.47

@taupecat: be judicious about javascript you fire on window resize.

15.43

@taupecat: (creating a child theme of 2011).

15.42

@taupecat: you can add the meta tag for responsive design using the wp_head tag in functions.php.

15.42

@taupecat: There doesn’t need to be a lot going on with media queries.

15.40

Another mobile first design is earthhour.fr.

15.38

@taupecat: Desktop first: more max-width queries. Mobile first: more min-width queries.

15.38

@taupecat: another great design is smashingmagazine.com.

15.37

@taupecat: (showing css-tricks.com as a great example of responsive design menus)

15.30

@johnbhartley: Your breakpoints should be the width at which your design breaks, or falls apart.

15.30

@johnbhartley: In responsive design your breakpoints should not line up with device screen sizes.

15.29

@johnbhartley: min-width and max-width allow you to specify styles for different screen widths.

15.28

@johnbhartley: respond.js allows media queries in IE 6-8.

15.27

@johnbhartley: The Golden Snippet meta tag: viewport, initial-scale=1.0, width=device-width

15.26

@johnbhartley: Responsive frameworks: Toast, Zurb, Twitter Bootstrap, 320 and Up.

15.25

@johnbhartley: Responsive add-ons (plugins: FitVids, Responsive Slider, Responsive Select Menu, Hammy (based on jQuery Picture.

15.23

@johnbhartley: This is not all unicorn farts and rainbows (it takes planning).

15.23

@johnbhartley: Responsive Design is not a right. It’s a privilege.

15.22

@johnbhartley: Check your analytics to see if mobile users are coming to your site.

15.22

@johnbhartley: giving an example of responsive web design using the trash compactor scene from Star Wars. nice.

15.20

14.50

@bootsz: Session Over. Now it’s snack time!

14.50

@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.

14.38

@bootsz: slides at seanbutze.com/wcbalt

14.37

@bootsz: Get involved in the http://make.wordpress.org/ui group if you’re passionate about WordPress usability.

14.36

@bootsz: Resource for code examples http://github.com/growthspark/gs-starter-theme

14.35

@bootsz: Ruthlessly eliminate features that are not needed or relevant to the client.

14.33

@bootsz: Gradually introduce clients to WordPress by limiting access at first.

14.28

@bootsz: Again you can add custom meta boxes via php, or by using a plugin like Advanced Custom Fields.

14.27

@bootsz: You can make custom meta boxes to add functionality to a post type.

14.24

@bootsz: Usually the default meta boxes aren’t relevant to the custom post type, so you need to deregister them.

14.23

@bootsz: By default, a custom post type editor looks exactly like a default post editor.

14.22

@bootsz: You can write custom post types using WordPress PHP functions or use a plugin like Custom Post Type UI

14.19

@bootsz: Custom post types are the key to creating very personalized experiences in WordPress.

14.18

@bootsz: default content types are limiting to a site that isn’t designed as a blog.

14.18

@bootsz: But what if we’re not building a blog oriented website?

14.17

@bootsz: Evaluate which capabilities the client needs on a project by project basis.

14.17

@bootsz: Now you have a pretty ideal setup for most clients without providing them with a cluttered menu.

14.16

@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).

14.14

@bootsz: The admin menu (when viewed from the editor role) limits the user to most of the things they actually need to use.

14.12

@bootsz: There is a lot of stuff on the Admin menu for someone who is new to WordPress.

14.11

@bootsz: WordPress is perfectly capable of suiting clients needs, but developers need to do the work.

14.08

@bootsz: Most of the websites we build with WordPress are not blogs, but out of the box WordPress is still primarily a blogging platform.

14.08

@bootsz: We as developers usually don’t do enough to adapt WordPress to the clients specific needs.

14.06

@bootsz: Ordinary people are intimidated by WordPress

14.05

@bootsz: Isn’t WordPress usable already?

14.04

Sean Butze @bootsz is now talking about usability in the WordPress admin.

13.39

@tweetsfromchris: That’s it for Chris. Next up is Sean Butze (@bootsz) with Improving usability in the WordPress admin.

13.34

@tweetsfromchris: Google chrome allows you to spoof user agents to get mobile views. You can also auto-resize the window.

13.33

@tweetsfromchris: (Downside of being at a science museum; there are things exploding and kids screaming. And that’s normal)

13.33

@tweetsfromchris: There are javascript libraries that can help with tables and responsive design, but it’s a difficult job.

13.32

@tweetsfromchris: Tables SUCK in responsive design.

13.31

@tweetsfromchris: HTML5 is alot easier to support than mobile apps.

13.29

@tweetsfromchris: Using Media Queries/Responsive design is preferable to a separate mobile site.

13.27

@tweetsfromchris: The web is not a fixed medium. There is literally no screen that the web cannot be on now.

13.27

@tweetsfromchris: The user coming to your site is coming to read what you have to say.

13.26

@tweetsfromchris: Mobile first = content first = user first.

13.26

@tweetsfromchris: HTML5 is very powerful and allows you to build apps for most devices without having to develop for different platforms.

13.24

@tweetsfromchris: Android mobile can talk to chrome on your computer and allow you to modify your CSS.

13.24

@tweetsfromchris: Browserstack.com (also mentioned earlier by @helenhousandi) shows what your site looks like on multiple devices. online

13.23

@tweetsfromchris: Mondernizr uses javascript to detect what CSS and HTML5 features the browser can handle.

13.22

@tweetsfromchris: Tools of the trade: Shadow by Adobe. Allows multiple devices to mirror the site you’re browsing on your desktop.

13.22

@tweetsfromchris: You can also load bigger images on desktops using javascript. (for HiDPI for example)

13.21

@tweetsfromchris: Adaptive images: load different images via media queries. You can load a smaller image for mobile devices.

13.20

@tweetsfromchris: Icon font services like Pictos and Font Awesome allow you to use scalable fonts for icons.

13.19

@tweetsfromchris: Adaptive media: most modern browsers support SVG (and those that don’t, can have support added by javascript)

13.18

@tweetsfromchris: WordPress has a built-in wp_is_mobile() for filtering content for mobile browsers.

13.17

@tweetsfromchris: Some feature detection is built into HTML5 (like with video tag), CSS3 has browser-specific prefixes like -webkit-.

13.16

@tweetsfromchris: CSS processers like LESS or SASS can help you organize your code in separate files, then merge it into one file later on.

13.16

@tweetsfromchris: Use media queries for setting different CSS rules for different screen widths.

13.14

@tweetsfromchris: Be as precise as possible with numbers (as many decimals as needed) because different browsers round differently.

13.13

@tweetsfromchris: Design using the Fluid Grid. For ems: Target/context = Result. For percentages section/site = result.

13.12

@tweetsfromchris: Start with a clean design and build upon it.

13.11

@tweetsfromchris: Start with the least common denominator (design for mobile first).

13.10

@tweetsfromchris: Designing for the USER is designing for the BUSINESS.

13.10

@tweetsfromchris: Be precise. Show the user what they expect to see while they’re visiting your site. Who is the user?

13.09

@tweetsfromchris: Using display:none, the image or resource still loads and causes delays, but is just not shown.

13.08

@tweetsfromchris: Load only what you need. Do you really need jquery on mobile? Also, display:none is not your friend.

13.08

@tweetsfromchris: How do you go fast on mobile? Give them smaller or no images,

13.07

@tweetsfromchris: 80% of mobile users who have a positive experience on your site will come back to it.

13.07

@tweetsfromchris: 17% of cell phone owners do most of their browsing on their phone.

13.06

@tweetsfromchris: For 10% of Americans mobile is their only connection to the web. In some countries that number is much higher.

13.06

@tweetsfromchris: Nearly 60% a website to load in 3 seconds or less.

13.05

@tweetsfromchris: Why should you care about mobile? 71% of global mobile internet users expect website to load as quickly as on the desktop.

13.04

@tweetsfromchris: There are a lot of devices out there (and some we don’t even know about yet).

13.02

Alright we’re back! Next up is Chris Cochran @tweetsfromchris with It’s a Mobile, Mobile, Mobile, Mobile World.

11.56

Alright, that’s it till after lunch!

11.46

@robertspangler: If you don’t have it, you need to just buy Gravity Forms.

11.46

@robertspangler: Have an arsenal of well-crafted plugins that you trust and that you use a lot.

11.44

@robertspangler: Plugins allow you to go outside of what WordPress can normally do.

11.44

@robertspangler: WordPress is really good at being flexible and upgradeable (extendable)

11.43

@robertspangler: text widgets have a lot of flexibility in terms of the content you can put in them.

11.41

@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.

11.40

@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.

11.33

@robertspangler: Use WordPress like a toolbox, not your paintbrush. WordPress is the canvas. (some mixed metaphors, but I get it.)

11.32

@robertspangler: We can make a div do a lot of crazy crap!

11.31

@robertspangler: Understand how WordPress HTML code works (whether it puts things things in lists, etc.)

11.29

@robertspangler: Know how HTML tags and CSS fit into a design.

11.28

@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.

11.27

@robertspangler: Use your freedom to design, but make sure you evaluate the practicality of the design.

11.26

@robertspangler: Think about the cost of your design elements.

11.25

@robertspangler: You can get into trouble by designing something that the developer cannot (or does not want) to do.

11.21

@robertspangler: The point of an about page and showing off previous clients is to build trust.

11.20

@robertspangler: You don’t design a house by buying the wood and nails first. It is important to plan first.

11.18

@robertspangler: Pause and think about more what the site should do. Start with your problem, not your solution.

11.16

@robertspangler: Design your site first, then think about WordPress later. That way your site won’t look like every other WordPress site.

11.15

@robertspangler: Sometimes we make things fit into boxes that they shouldn’t really fit in.

11.15

@robertspangler: think outside the box? No, set expectations.

11.13

@robertspangler: Right now this is more of a remedial drawing course. But there’s a point.

11.09

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.

11.03

Thats it for @helenhousandi! Great session!

11.03

@helenhousandi: web fonts tend to optimize for the web, so generally don’t affect page load TOO much.

11.01

@helenhousandi: advantage of using google fonts: a lot of users will have them cached already.

11.00

@helenhousandi: browserstack.com allows you to see what a design looks like on multiple platforms.

10.59

@helenhousandi: A lot of Mac users (i.e., designers/developers) never think about the PC.

10.58

@helenhousandi: Bootstrap is much more of a complete design rather than a foundation.

10.54

@helenhousandi: The photoshop etiquette Manifesto for Web Designers (photoshopetiquette.com)

10.53

@helenhousandi: consider plugins that insert stuff before/after content.

10.50

@helenhousandi: threaded comments with gravatars, paginations, galleries and images with captions, post formats, sticky posts

10.48

Common wordpress theme components: entry meta (author, date, categories, tags). often forgotten in the design phase.

10.47

@helenhousandi: understand template hierarchy (http://codex.wordpress.org/Template_Hierarchy)

10.45

@helenhousandi: Common Theme Templates: Search, 404, Page templates.

10.44

@helenhousandi: Common WordPress templates: home/front page, single posts/pages/attachments, archives (category, tag, date, author)

10.43

@helenhousandi: “I’m the best end user ever because I’m a lazy developer.”

10.43

@helenhousandi: Test menus, both assigned and unassigned. Also, create content! That will help you understand how you want to design your site.

10.41

@helenhousandi: Get to know what sidebars/widget areas are and who they work.

10.41

@helenhousandi: Use the monster widget to see all of the widgets that come with WordPress (so you can style them).

10.40

@helenhousandi: Use theme unit test data to make sure you include styles for all of the elements that could be entered into a site.

10.38

@helenhousandi: Get to know WordPress; Have a test install, check out the default themes, learn about how it works.

10.37

@helenhousandi: Now the WordPress part of it. (yay!)

10.37

@helenhousandi: Myriad Pro is not a web-safe font! (nor are fonts installed with software like Adobe.)

10.36

@helenhousandi: Some form elements, really, really, really, don’t like being styled.

10.35

@helenhousandi: columns and hyphenating are possible in some recent browsers, but not consistently.

10.33

@helenhousandi: what is NOT possible (or recommended): columns for text, hyphenating, consistent form styling.

10.33

@helenhousandi: What is possible: rounded corners, gradients, box shadows, text shadow.

10.32

@helenhousandi: Learn about what is and is not possible on the web.

10.32

@helenhousandi: The more CSS we can use, the better the design will be because it renders better on the screen (and faster too!)

10.31

@helenhousandi: slice your images or at least create a slicing guide for your design so the developer won’t have to guess.

10.30

@helenhousandi: Choose a responsive CSS grid system like Zurb Foundation, Skeleton, or 1140 CSS Grid. (or at least understand what they are).

10.27

@helenhousandi: make sure you include the bold/italic fonts, otherwise Helen will cry when she sees fake-bold or fake-italic.

10.27

@helenhousandi: Google Web Fonts and Typekit are good resources for web fonts.

10.26

@helenhousandi: Use the default san-serif font, or embed web fonts on the web.

10.26

@helenhousandi: Arial on the mac doesn’t look awesome, and Helvetica on the PC is just awful.

10.25

@helenhousandi: Understand (and accept) that browsers and operating systems differ in the way they display your site.

10.23

@helenhousandi: Consider HiDPI (aka Retina) when designing images.

10.23

@helenhousandi: Don’t stretch text. It’s not good design, but on the web it’s not even possible.

10.23

@helenhousandi: There are no half-pixels (excepting HiDPI). Always give numbers in whole pixels.

10.19

@helenhousandi: On a touch device, you don’t get hover states.

10.18

@helenhousandi: think about the various interaction states: hover, focus, and active (and touch!)

10.17

@helenhousandi: The screen is not a page.

10.16

@helenhousandi: Stylized form elements are difficult to achieve across multiple browsers. Better to use the browser default.

10.13

@helenhousandi: “Forms on the web for everybody are kind of a pain.”

10.12

@helenhousandi: “On the web it’s better to define line-height as a proportion.”

10.12

@helenhousandi: Typography includes font faces, variants (italics/bold), and line height!

10.11

@helenhousandi: Also good for production guide: image sizes, iconography, buttons, and forms.

10.11

@helenhousandi: Use a Style and Production guide including colors (hex codes and gradients), measurements, typography, etc.

10.10

@helenhousandi: Naming your layers properly helps developers when naming files and css classes and ids.

10.09

@helenhousandi: Control your layers and name them properly.

10.08

#LayerVault can work with photoshop files.

10.07

If you use Mac OS X Lion or higher, you can use the builtin versioning.

10.06

DropBox and BaseCamp both have a rudimentary built-in version control system

10.05

@helenhousandi: Version control tracks changes, who made them, and why they made them

10.04

@helenhousandi: Use version control to ensure your developer uses the right files.

10.03

@helenhousandi: Think about questions that developers always ask you.

09.59

Great music being used to introduce the speakers. @theandystratton: Helen is “a designer…who is a developer.”

09.58

(gotta remember to fix this plugin to sanitize the quotes. I cannot use apostrophes right now).

09.57

I’ll be in the developer/designer track all day, so you can also follow @TechGirlTweets, who is in the user track right now.

09.54

Next up (in 10 minutes) @helenhousandi talking about helping a developer faithfully realize your design.

09.24

@karks88: use user access plugins to keep your client from messing up their site.

09.19

@karks88: Keep a cheatsheet of all of the code that you use for development. http://karks.com/baltimore/

09.17

WP DB Manager: automatically back up your database and email it to yourself.

09.17

Smart WYSIWYG Blocks of Content: a visual editor enabled text widget.

09.16

09.16

Be careful with Search & Replace-it’s incredibly easy to kill your site with it.

09.16

Search & Replace: globally search and replace items in your database. (great for moving servers, etc.)

09.15

SB Child List shortcode lists child pages or parent page of a given page.

09.14

Raw HTML snippets: lets you put any html/javascript anywhere you want using a shortcode.

09.14

List Category Posts using a short code. Great way to do custom archive pages.

09.13

Going over time-saving plugins: First one is CMS Dashboard, which simplifies the dashboard for users.

09.11

#startbox looks like a cool framework and it’s free, which is nice.

09.09

Right now @karks88 is talking about using frameworks, including #genesis and #startbox.

09.08

Starting a little late. I’m in @karks88′s talk on being a more efficient freelancer.