Flutter, the “ultimate wordpress CMS” updated
Flutter, the “ultimate wordpress CMS” updated
|
|
You use Wordpress as a CMS right? And you probably love it, after all what is not to love? It is simple, easy to install, has a huge community base, thousands of plugins and themes… and 2.7’s interface is simply… stunning.
Wordpress is not perfect as a CMS however, and can you blame it? It was designed to be a blogging platform. They must have done something right if Wordpress started as a blogging platform that simply works so well as a CMS.
This could all be part of the past now that Flutter has arrived. Wordpress could easily be a fully extendable CMS with one of the best blogging platforms integrated into it. So many of the minor pitfalls wordpress previously had as a CMS are now gone.
Flutter is not a new plug in by any means. Released around wordpress 2.5, it has had time to pick up a little bit of steam. It seams it never really caught on because despite it’s useful benefits it was confusing and difficult to install and maintain. To wordpresses recent credit, it didn’t solve some of the more confusing “blog focused interface” that 2.5 and 2.6 still had.
However now coupled with 2.7 and a new release of flutter you can now create an amazing full fledged CMS capable of almost anything you can think of.
More About Flutter
Flutter was designed to combat two major issues that Wordpress has when being used to administer and power web sites rather than blogs. Dealing with content that was more than just self formated text and photos, and an easy way to edit complex pages.
Custom Content Types
A typical example could be pages for the biographies of individuals. These pages likely have a specific format that all of them should adhere to. Name, Title, Skills, etc… Previously with Wordpress you would create a blank page for each and have to try your best not to accidentally mess up the format. Of course you could try using the custom fields, but try explaining those to a client with out having their eyes glass over.
Now days you had better count on the fact that websites are going to be complicated enough where the simple homepage / innerpage templates are not going to be substantial. Websites will have different content types, a home listing, biography, portfolio page, etc… Flutter allows you to create custom write panels for different types of content. The write panels can have text fields, radio buttons, pictures, drop downs, etc… allowing the user to create a page exactly how they want it with out hassel or vast technical knowledge.
Edit in Place
The other example might be managing and editing pages that have both unique sidebar content and primary content. Before you would have to create a page for the sidebar, use a custom template to include that post into the sidebar before finally trying to teach a client how it all works. Very complicated right? Well it doesn’t have to be.
Flutter also lets you specifcy editable regions of a page, like the main content, title, or sidebar. Using a bit of AJAX magic useres who are logged in can navigate to the page they wish to edit through the front end, click an edit button, and begin to edit that section with out even leaving the page.
This makes the CMS almost transparent. Your typical client is more familiar with the web from a users perspective, and this allows them to edit and manage pages the way they are most comfortable.
Slightly Complicated
While the usage and learning curve of flutter has improved, you should still expect to spend an ample amount of time your first attempt at using this plugin. The documentation while available, is sparce at best (not that you can really blame the developers, who are giving the plugin for free.)
The learning curve is well worth it. You can easily expect to save more time than you spend in reduced phone calls and e-mails regarding how to perform specific functions, tasks, or edits in Wordpress.
Similar Posts
- Keep it updated. Publish it later. Keeping it updated can be a laborious, arduous task. In order to do something like this I highly recommend writing 2-3 articles at a time and publishing them later at another date.
- Use Shortcodes. Shortcodes can save you a lot of time and provide you with text and bbedit type shortcuts. Using text like: [shortcode]. It replaces the need with formatting text and easily allows you to insert a template or snippet.
- Editing offline? Use Google Gears to kick your writing abilities offline. While using Google Gears Turbo can write, edit things locally then sync them later.
- Write posts via email: This is something people tend to forget about only because its such an unutilized feature. But with the ubiquity of smartphones it makes sense to write posts via email. (Thanks to @dmassad for the tip.)
- Do you have an iPhone? Wordpress.org is creating an iPhone application just for the iPhone to keep your blog updated
- Update Wordpress by Text Message using Twitter Updater
- iPhone themes for Wordpress: WP Touch , iWPTouch
- Importing and Export Feature – Keep your posts backed up on your server as well as multiple different places.
- Use the Backup Plugin to automatically
- Devlounge explores the pros and cons and possibilities of using Wordpress as a CMS. What to consider if you’re using Wordpress as a CM
- Rewriting Wordpress Functions: WeFunction Explores the idea of using wordpress’ add_meta_box as a means of creating seperate custom fields. I warn you it doesn’t look very easy. The tutorial is very well documented though.
- Flutter is very promising plugin that allows awesome features such as editing in place as well as allowing many different post types. Also covered and reviewed here.
- Darren Hoyt discusses the client-web developer/designer problems with making Wordpress a CMS
- How to “plan and think of Wordpress as a CMS”
- CMS Plugins: Looking for plugins to make Wordpress a cms? Make sure you check out My Page Order , pageMash , Page Management Dropdown , PageRestrict, etc. (Source: Mashable)
- 10 Best Twitter tools for Wordpress.
- Find out who tweeted or retweeted your post using the Tweetback Plugin
- Use a Parent-Child Theme to rapidly jump-start theme development
- Import Sample Content to help develop and refine your themes typography
- Why reinvent the wheel when you can use a blank theme: found here , here , and a whole list of them here
- Documents
- Client files
- Copy
- Proofs
- Staged/Development area (folder for a “clone of the site” where you can make changes and get sign off)
- Downloads
- reset.css
- main.css
- structure.css
- typography.css
- print.css
- helpers.css
- More consistant rendering due to reusing ideal CSS techniques
- Easier editing and maintenance as you can better recall what names mean
- The start of code that can be saved and reused every time
- A class that floats an image left / right and gives it some margin
- The structure for an unordered list navigation
- The structure for a form
- external link, pdf and download icons
- clearfix
- png fix
- Typeography baselines and hierarchies
- etc…
- Font sizing (all normal text is 12px, featured text is 14px bold)
- Margin’s (normal margin is 10px between elements, margin between two content blocks is 40px, etc…)
- All navigation tabs will have 15px height and 13px font
- etc…
- E-mail invoices to clients
- Save client data
- Payment processing options such as Authorize.net, Paypal, etc…
- Archived invoices
- Secure connection for viewing invoices
- Associate an image with each contact.
- Assign each contact to a company… or don’t.
- Create a note history for each contact.
- Clickable email and website links.
- Google map contacts address.
- Dial a phone number (works on cell phones with internet browsers).
- Fully hcard / vcard compatible.
- Track clients
- Track projects by client
- Track tasks by project
- Track time per task with dynamic timer like Harvest
- Making a post about them every once in a while
- Having a top commenters widget
- Use gravitars
- Giving the top commenters a dofollow link
- Giving top commenters profile/link on the home page
- Giving top commenters a special design when they do comment, do occasional giveaways, etc…
- Use the dofollow plugin, so high quality commenters can get some SEO value from contributing.
- You plan to bombard the user with fancy effects. It will cause the viewer to suffer from migraines.
- Your website can live without it
- Your target audience consists of elderly or disabled people.
- You are working on a login page. AJAX will essentially renders password managers useless.
- You need specific pages or content to be bookmarkable.
- Your users need to use the browser’s back button or history feature.
- You plan to use it on a web based application.
- You plan to add support for non JavaScript-enabled browsers.
- Your target audience consists of tech savvy users.
- You are creating a tool or a widget that will be used on another site.
- You need to conserve bandwidth - AJAX allows you to refresh specific content without having to load the entire page.
- Certain tasks will be finished much faster with AJAX.
20 Expert Wordpress Tips for Pro-Developers
Wordpress has been growing sensationally as the tool to use for Blogging. We’ve compiled a list of things that are good practice and you must do if you are a pro wordpress blogger or developer.
Writing/Blogging Workflow
Mobile Design
Backing Up Data
Wordpress with CMS Superpowers
Because of Wordpress’ very attractive backend. Using Wordpress seems like a very promising move. The following will make it happen:
Twitter Implementation
Wordpress Custom Theme Development
Wordpress 2.7 Released, Initial Impressions
For those who haven’t noticed, wordpress 2.7 has officially been released. While I have played around with the release candidates I am always eager to see the full release of new software, so I have already installed the update onto this site to get some initial impressions.
Obviously this is a big interface change from previous versions, and while many have hailed wordpress for having a simple and easy to use interface I never have fully agreed. Sure it is easier than some of the other CMS and blogging platforms out there, but it always had a lot to be desired in my opinion.
The Dashboard
The reorganization of the dashboard improves it’s functionality ten fold. With a quick post bar, easily to scan stats about your blog, and the news no longer takes up 75% of the page. Where previously I would instantly skip over the information on the dashboard as it was not easy to gain value or I had to hunt for what I was looking for— I now find myself glancing at the little bits before making my next action.
The New Menu
Despite some nice aesthetic improvements, the primary change that has improved the user experience is the navigation. Some of their initial menu and design decisions make sense considering the platform was originally built to be a blogging platform, and has evolved into what it is today (more of a framework). The new version really is an evolution of the platform itself to better fit the flexibility that it has adopted.
Better Labeling
While the previous versions of wordpress had fairly good labeling, the labeling of navigational elements has improved significantly. What was “Design” is now “Appearance,” and “Manage” has been forgone for a simple “Edit.”
Much Better Organization
The organization of the navigational structure has been improved leaps and bounds. Now that wordpress is used as a CMS more often pages and posts have been separated, which should make clients lives a lot easier. Both categories have logical sub categories of edit, add new, categories, etc. Media has been separated into it’s own section, no longer do you have to hunt for it in the ambiguous “manage” tab.
The administration navigation has been vastly improved, now in an area you can actually spot it seems much easier to use. A nice touch is the addition of the “tools” section, which will serve as an excellent spot for plug in settings and controls. Previously it seemed authors stuck plug in controls in any section, where this will be a bit more convenient and logical.
The New Editing Interface
The editing interface of both posts and pages has been vastly improved. Again this looks as if the changes were made to improve the capability of Wordpress as a CMS. Previous versions of wordpress had what I called “option soup.” Where boxes of all sorts of options simply appeared… well… everywhere. Sure with plug ins you could turn off a lot of the options that didn’t seem to matter, but it was a hassle and certainly didn’t make wordpress easier on clients that were not tech savy.
The layout and labeling of the editor interface is much more intuitive. The more complicated items such as custom fields are located below the fold where most users can safely ignore them, and logical workflow boxes are placed where they should. For example excerpt is under the post, where tags and categories are to the right.
On the pages editor you have a handy “Page Attribute” section that allows you to select the page parent, template, and order.
Additionally in both editors you have easy options to turn on / off any section that seems unnecessary.
The Bad
The only area I have had significant trouble with is the image uploading interface. When I used the flash loader I seemed to be able to select files but not upload them, weird? Inserting the image into the post was a bit hidden, having to “show the image” and see the details in order to find the insert image is a bit clunky. Let’s face it, being able to put pictures into a site/blog is extremely important to most clients. This being as difficult as it was is not insignificant.
Overall…
Overall the upgrade is a huge improvement, especially looking from a clients perspective. The main areas I would love to see improvement is some ability to create custom write panels with out doing hacking, and easier linking interface (if you want to link to another page on your site you have to copy and paste it? come on now!) and better navigation control capabilities.
I am sure that in future releases these will be improved and wordpress will continue to excel as a framework.
Hello world!
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!8 methods to bring your front end coding to rockstar levels
There are a lot of good front end developers out their right now. If you fancy yourself as a front end editor then you really should be looking at how you can differentiate yourself from the rest. Yes there are lots of “good” front end developers, but there are not a whole lot of excellent front end developers.
1. Improve Your Semantic Names
If you work in a team or ever revisit your code and need to update it then you should think about the quality of your class and ID names. It is not uncommon for developers to use class names like “box”, “wrapper”, or “container.” While you may think that these naming conventions or “semanitc enough” none of them describe the content that is inside them. Instead consider using HTML5 spec’s such as “content-sub”, “section”, “content-aside” or “content-sup.”
You and your team will have a much easier time sorting through code that describes the content than trying to remember the details of “box.”
Read more about semantic naming from Andy Clarke and A List Apart.
2. Improve the Organization of Your Files
I think it is reasonable safe to assume that most developers have at least started to organize their files by type (ie: a folder for images, css, javascript, etc…). You can go a step further and improve the organization even more, particularly any folder that is going to have a lot of files (such as Images in particular and CSS as a secondary.)
I find it best to create sub folders with in images and separate images based on design structure, buttons, headlines, photos, etc…
There are plenty of other folders you may want to create to keep the updating and growth of a site easy and efficient, including:
The Elements CSS Framework does a great job of organizing files based on the normal client/provider workflow.
3. Use Commenting in Your XHTML
Any time you end up developing complex layouts you are bound to use a lot of <div>s in your markup. This can be particularly confusing to go back and edit as it becomes hard to figure out which div is being closed where. You may see three </div>s all in a row.
To combat this simply add some coments at each </div> (or any other closing element if you find that it will be helpful) to let you know what element was just closed.
<div id="header" class="section">
<div id="header-logo">
<h1>HTMLiZER</h1>
</div><!--/#header-logo-->
</div><!--/#header-->
If you find it useful you can take it one step further and comment the primary area you would be editing (such as the main content area, sidebar, etc…)
4. Segment Your CSS
For small 4 - 5 page brochure sites your CSS will be pretty manageable even if you don’t spend the time and effort you should into organizing and commenting. Once you start developing web applications or large sites with a vast array of design “modules” you should make sure that you organize your CSS in way that is easy to manage.
I recommend splitting your css into logical different files for better organization, such as:
This way you don’t have to sort through all of the typography styling to find the area where you defined the size of the header. Likewise if you want to adjust the headings it is pretty simple to find it through a small typography.css file rather than a huge file that has everything.
5. Create a TOC With Comments in Your CSS
Every CSS file you plan on editing and extending over time should have a table of contents at the begining and a headline seperator at every section. This will allow you to easily jump to a section using “find” rather than scrolling for that one area that had the CSS you are hoping to modify.
EX
/***********
TOC:
=1: Header
=2: Content
=3: Footer
=4: Navigation
=5: Portfolio
****************/
/* ********* =1: HEADER *********** */
#header { … }
6. Compress and Combine Your CSS files
Even though it is easier to work on a site when you segment and organize your css into several different file names, it actually causes your site to load slower. The more calls the browser has to make to the server for additional files the slower it will load.
Before deploying your css files you should combine and compress them. Compressing them removes any uncessary whitespace, comments, etc… that is unnecissary when the site is live.
There are several handy tools to do this including this online version.
7. Create your own framework (or improve on another one)
As you get more experience under your belt you will find that you use the same methods and naming conventions over and over. This is helpful for several reasons and it should be encouraged. It has lots of benefits including:
Chances are that you end up rewriting the same type of code over and over again, simply because you don’t have it stored somewhere. Some examples may be:
Rather than reusing these bits of codes write modules into your own CSS framework (or you could imrpove on another one). This way you can streamline the development process so it takes less time and improve the consistancy of your work.
8. Develop your CSS to be modular or “object oriented”
You could assign every bit of code an unique ID or adjust the margins and padding per instance. Lots of coders do this to try and get the CSS as close to the designers comp as possible. However this is inefficient in development time and file size. Establish a set rule for differnt types of content and how they should be styled, this should include basic things such as:
This way you don’t have to rewrite the code for every new item added to the site. Additionally it will keep the site feeling consistant and well balanced visually. If all elements and every page follows the same rhythm it will feel more unified as a whole.
Some call this object oriented css, it is worth looking into for rockstar like front end coding.
Plugins That Make Wordpress Into A Company Intranet
Wordpress has become a great platform for a wide range of website needs. Originally designed for blogging it is now a common package for full fledged content management systems and even complete web based applications.
Now we even have great opportunities to use Wordpress as an internal communication and back office tool. With these assortments of plug-ins we can use our favorite open source software to improve our businesses, efficiency and offer more solutions to our clients.
Billing
If you are a freelancer or a small company you know how much time can be sucked up by managing your billing. This is a bit of a shame because the billing part of the job should be the most fun, it’s how you get paid! There are a lot of available paid solutions for billing, but they are all hosted on different websites and applications and are not as nice and neatly integrated as doing it through Wordpress. Luckily we have WP-Invoice, a full invoice creation and tracking system that integrates with Wordpress directly.
It features:
Download WP-Invoice
Contact Relationship Management
As your business grows the amount of clients, leads and strategic partners you have will also grow. It is time to throw out the Rolodex, get rid of your piles of business cards, there are better ways to manage your contacts. The newest solution would be using a Contact Relationship Management system or CRM. There are a wide range of different CRM solutions available (salesforce.com, highrise, etc…) however Wordpress can function as one with the simple installation of a plug-in!
WP-CRM features:
Download WP-CRM
Project Management
Still using a pen and paper to manage your projects? You might as well be using a sundial to check the time! Using software to manage and track your projects is a lot easier and more sophisticated. While there are plenty of good commercial solutions available, why not integrate it into Wordpress? That way it is easy to use, customizable and open source. With the simple installation of a plug-in you can:
Download WP-Project
Office Communication
Sometimes proper and adequate communication is the most important and most difficult aspects of running a larger company. There are all sorts of tools that attempt to correct and fix this problem, some of them more effective than others. The Wordpress team themselves encountered this issue and sought to find a solution that integrated into their beautiful piece of software. Hence Prologue was born - a twitter like tool that can run off of your web server.
Download Prologue
Newsletter & Notifications
Need to send news and updates to your employees? Maybe you want to do some e-mail marketing for your company? Rather than pay monthly or per e-mail using an overpriced and underachieving e-mail marketing solution just integrate it with Wordpress. There is a simple, effective and easy to use newsletter tool that will do everything you need and more.
Download the Newsletter Plugin
Calendar
Keep track of all the events and important milestones going on with your business by using a simple and easy to use calendar system. There are a handful of Wordpress plug-ins that let you create and manage calendars, I have had the best luck with WP-Calendar. If you want to get very fancy you could also have a members only calendar so that only employees and those with a login can see it.
Download the Calendar Plugin
Engaging Readers, Design Your Way to More Blog Comments
You have probably read the studies that claim on average, 1% of online users actually contribute and create content on a given website. The rest are perfectly happy reading your posts, forming their own opinions, and moving on to the next blog with out ever actually leaving any sort of feedback. This makes sense of course, we don’t always have time to leave our thoughts on blogs, or many times it doesn’t even seem worth the effort. After all you have to formalize your thoughts, actually write them out, review, edit, post, and then monitor for responses.
It actually is a lot more involved than we probably realize.
It is also a lot more important to get this type of reader interaction than we probably realize. The amount of interaction generated through a blog is an easy indicator of it’s success. Not only for the blog owner, but also to other readers. Consider looking at two blogs with similar content, one with an average of 10 - 20 responses where the other only has 1 - 3.
I hate to say it, but most people would subscribe to the blog that is generating more interest and response, even if the content was of similar quality.
How Design Can Encourage More Blog Commenting
When people blog about “design” in regards to websites many times they are primarily referring to the asthetic quality of a site. While the aesthetic quality of a site can have a large impact on how many people put in the effort to comment on a blog, I want to approach the situation at a higher level.
Consider that the definition of design is “to assign in thought or intention; purpose.”
Design is not just making pretty visuals, but to craft your site with specific thought, intention and purpose. So the question then becomes, how can we build the site with the intention of encouraging users to leave comments.
Create an Incentive or Reward
The primary reason anyone is going to leave a comment on a blog is they believe that their will be some pay off that is worth their time to formulate their response, edit it, etc… In most cases it is because they have a feeling about the content to the point where they feel the need to get their thoughts off of their chest, or maybe the author is well known enough where the idea of talking with them would be the reward.
However not all blog posts will have content compelling enough, or an author well known enough to create the incentive and reward with those elements alone.
Highlight Your Commenters
Smart marketers have found that the higher that you can appeal on Maslow’s hierarchy of needs, the better success you will have reaching your audience. By highlighting those who really participate you are appealing to the need of “esteem.”
You could do this by:
Give Your Commenters a Bonus
I have seen great response to giving the top commenters some sort of bonus. Widgets that keep track of who has commented the most make this an easy endeavor to track and monitor.
Some of the more common methods could be:
Use Design and Visuals to Engage Users
While I have talked about “design” in terms of designing an experience or functionality, I haven’t addressed the actual visuals of a design and how it can improve the amount of user interaction.
If you pay enough attention to the design and visuals of your comments, you can catch the attention of users and encourage them to leave a comment.
Make Your Comment Area Eye Catching and Interesting
As a users gets closer to the bottom of an article or post, you can bet that they have either scrolled past or lost focus of most of the visual elements on the page. This presents an excellent opportunity to draw their eye to the comment area by just adding a little bit of flair, tension, or contrast to develop some visual interest.
Want to really get some attention? Consider using custom designed form fields (not too custom as to hinder user experience).
Be Suggestive
Suggest that a user leave a comment where ever you can! At the start of the comments create a link to add a comment. You could even go so far as adding a “reply” button/link at every comment in the list.
Additionally this will make it easy to comment, as users won’t have to hunt for the add comment link.
Highlight the Commenters
People leave comments because they want people to read their opinion (even if it is just the author). Make sure that the users name/link has enough visual emphasis. This will help establish that the commenter will get the recognition that they are seaking.
Again, use Gravitars. Users who have gone so far as creating a gravitar will appreciate being able to show their branding on another blog and are more likely to comment because of it.
Any Experiences or Tips?
These are some of the best methods I have come across, if you have any experiences, tips, or other ideas on how to encourage more users to participate through the design of your blog/website feel free to leave a comment with your thoughts.
divspace | Tutorial " CSS Box Types
CSS Box Types. There are two types of boxes, block and inline. … pages articles engines box badge google website ads search color font ad css …Designer Menu Maker from ISDN*tek
Easily make dropdown or flyout button menus for web pages. … The menu code relies on a CSS stylesheet, which you can manually edit to create …Create a Scrolling Menu with CSS and jQuery
… to do vertical scroll for UL of text items (in custom CSS combo). Got any … Create a Scrolling Menu with CSS and jQuery. Latest tweets for wordpress …6 Reasons Not To Use AJAX … And 6 Reasons Why You Should
Having to go through tons of sumbmissions for the CSS Vault Gallery over the past few years, I have noticed a definite increase in the amount of sites that use AJAX or some form of JavaScript. There seems to be a trend where even simple 5-page websites use JavaScript to some extent, in an attempt to generate additional interest on the viewer. Sometimes they are entirely unnecessary, and there are cases when the presence of AJAX only serves to annoy or encumber the user.
AJAX technology must then be used only when necessary. I have come up with a list of reasons for this purpose.
DO NOT USE AJAX when …
DO USE AJAX when …