Ayatana overlay scrollbars: something truly Natty A wit said of Google Wave “if your project depends on reinventing scrollbars, you are doing something wrong.” But occasionally, just occasionally, one gets to do exactly that. Under the Ayatana banner, we’ve been on a mission to make the desktop have less chrome and more content. The goal is to help people immerse themselves in their stuff, without being burdened with large amounts of widgetry which isn’t relevant to the thing they are trying to concentrate on. And when it comes to widgetry, there are few things left which take up more space than scrollbars. For example, I spend plenty of time in a full screen terminal, and it’s lovely to see how clean that experience is on Natty today: …but that scrollbar on the right seems heavy and outdated. Of course, since the desktop isn’t often a touch device, we need to think through pointer interactions. Overlay Scrollbars in Unity – implementation from Canonical Design on Vimeo. Overlay Scrollbars in Unity from Canonical Design on Vimeo.
10 Essential WordPress Plugins You Should Be Using There’s good reason why WordPress is the most popular blogging platform. It’s easy to use and has tons of great features. But what’s really made this open source software excel is its passionate community. Yes, WordPress has lots of features built in, but it doesn’t have everything. There are many WordPress plugins out there, but in this article we’re focusing on the most essential. All in One SEO Pack All in One SEO Pack optimizes your WordPress blog for search engines. Advanced Canonical URLsFine tune Page Navigational Links Built-in API so other plugins/themes can access and extend functionalityONLY plugin to provide SEO Integration for WP e-Commerce sitesNonce SecuritySupport for CMS-style WordPress installationsAutomatically optimizes your titles for search engines WP Super Cache WP Super Cache generates static html files from your dynamic WordPress blog. Google XML Sitemaps Akismet WP-DB-Backup WP-DB-Backup allows you easily to backup your core WordPress database tables. WP-PageNavi
Everything you always wanted to know about touch icons “Touch icons” are the favicons of mobile devices and tablets. Adding them to your web page is easy, and I’m sure you already know how this works using HTML: It’s a shame Apple didn’t just implement the standard <link rel=icon> and chose to come up with a more verbose proprietary link relation instead. Chrome v31+ for Android does support this syntax, though! Use it as follows: If no such HTML is found, Chrome for Android falls back to the Apple touch icons instead. Apple iOS has supported touch icons since iOS 1.1.3. For web pages that don’t specify a custom touch icon, a thumbnail screenshot of the page is used instead. Fancy effects iOS automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen (as it does with application icons). Rounded corners Drop shadow Reflective shine As of iOS 2.0, you can prevent the addition of these effects by using the precomposed keyword: I’d recommend to always use precomposed icons. Look ma, no HTML!
35 Security Plugins to Make Your Wordpress Bulletproof WordPress is the most popular blogging platform today. It’s being used by thousands of people all around the world. But because of the popularity, it’s getting more attention by hackers and spammers too. For simple users,who don’t code a lot, plugins is the best way to secure your blog. Secure Your Login 1. Semisecure Login Reimagined increases the security of the login process by using a combination of public and secret-key encryption to encrypt the password on the client-side when a user logs in. 2. This plugin allows you to create custom URLs for logging in, logging out, administration and registering for your WordPress blog. 3. Login LockDown records the IP address and timestamp of every failed login attempt. 4. Whenever you try to login into your website, you can use this plugin to transmit your password encrypted. Admin Area 1. Admin SSL secures login page, admin area, posts, pages – whatever you want – using Private or Shared SSL. Database 1. 2. 3. 4. 5. 6. myEASYbackup Spam 1. 2.
Better Check Boxes with jQuery and CSS Martin Angelov In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable. The first step is to lay down the structure of the underlying HTML document. We will need a form with checkboxes which we will later be replacing with their enhanced jQuery versions. index.html <! The main container element – the #page div, holds our form. Notice the HTML5 data attributes, specified on some of the labels. And here is the markup of our replacement checkboxes: <span class="tzCheckBox checked"><span class="tzCBContent">ON</span><span class="tzCBPart"></span></span> When our plugin is called, it will loop through the checkboxes, and insert the HTML code you can see above after each one, while at the same time hiding the original. Checkbox Replacements Explained Now lets move on to the styling. jQuery Conclusion
The 15 Best WordPress Plugins to Use in 2011 One of the reasons that I’m so madly in love with WordPress is the thousands of plugins available. It doesn’t matter what you want to accomplish on your blog, there is probably a WordPress plugin that will allow you to do it. This list will provide you with 15 of the best WordPress plugins available today. Each of these WordPress plugins are used at Site Sketch 101 and I personally recommend each of them to you. The 15 Best WordPress Plugins to Use in 2013 W3 Total Cache - This is one of the best WordPress plugins for two reasons. Group Discussion WordPress plugins are amazing little creations. Which do you consider to be the best WordPress plugins that you use on your site and how many plugins do you use at your site?
Android User Interface Design: Working With Fragments The new Fragment API for Android, introduced in Android 3.0, allows for easier dynamic user interfaces. In this tutorial, learn how to convert a two-screen ListView to WebView workflow into a single screen workflow designed for large screens, such as those found on tablets. Subsequent Changes to Techniques & Software Certain aspects of applications or techniques used in this tutorial have changed since it was originally published. Android SDK: Using Fragments The pacing of this tutorial is going to be faster than some of our beginner tutorials; you may have to review some of the other Android tutorials on this site or even in the Android SDK reference if you are unfamiliar with any of the basic Android concepts and classes discussed in this tutorial. Introducing Fragments Before we get started, let's define what a Fragment is, at a high level. Step 0: Getting Started This tutorial assumes you will start where our ListView tutorial left off. Step 1: Redesigning the Screens Conclusion
Tweet Blender Widget in the sidebar blending tweets for @tweetblender user, #tweetblender hashtag, and tweets from @knovitchenko user with #tweetblender hashtags in them Tweets archive page. Created automatically and tweets are inserted into content automatically; however, you can edit title, tags, and text of the page using regular admin features Widget settings for Tweet Blender widget. This widget can blend tweets for users (e.g. @knovitchenko), hashtages (e.g. #tweetblender), lists (e.g. Admin: Cache Manager addon (note: paid module)
Why Keyboard Navigation is so Awesome One of my favorite recent trends in web design is keyboard navigation. Used correctly, it can greatly enhance the experience of a website. Using the arrow keys on sites like Thinking For A Living and Designspiration make the consumption of large amounts of content quicker, easier and more engaging. Google have also recently implemented keyboard shortcuts into their search results, allowing users to quickly browse through instant previews and find what they are looking for. I’ve also just finished development of a WordPress theme – Keybrdr, pictured above – that allows you to use sliding keyboard navigation on your own blog, website or portfolio. So, what’s all the fuss about? For me, it’s all about engagement. There’s something about pressing a physical button and having a website actually react, rather than passively scrolling, that just feels nicer. It’s part of what makes the iPad such a captivating device – being able to manipulate what you see on screen with your fingers.
Edit Flow Edit Flow empowers you to collaborate with your editorial team inside WordPress. We've made it modular so you can customize it to your needs: Calendar - A convenient month-by-month look at your content.Custom Statuses - Define the key stages to your workflow.Editorial Comments - Threaded commenting in the admin for private discussion between writers and editors.Editorial Metadata - Keep track of the important details.Notifications - Receive timely updates on the content you're following.Story Budget - View your upcoming content budget.User Groups - Keep your users organized by department or function. More details for each feature, screenshots and documentation can be found on our website. We'd love to hear from you! For support questions, feedback and ideas, please use the WordPress.org forums, which we look at often.
The User Experience And Psychology Of Colour There is a lot of psychology in colour, and while I don’t claim to be an expert, every now and then I come across something that seems to be rather counterintuitive. I suppose there are some cultural influences on colour as well, and people need to take these sorts of things into account when designing sites , but there also seem to be some ideas that cross over cultural lines. Today I want to take a quick look at the colours that I would assume we’d all connect with a certain response – say the colour of success, the colour of failure, and what colours you expect to see in form fields when you are doing things right or wrong. What colours come to mind when you think of a ‘ Success ‘ message? What colours come to mind when you think of doing something wrong? I’ve set up a very quick, very simple test to have a quick look at this topic. Once you’ve done the test feel free to leave a comment at the end of this post sharing your thoughts on colours and design. Why Colours? The Sites Gmail:
Curing the Navigation-itis Syndrome More and more content is being published everyday and site owners need to find ways to categorize all this content. And with more content and categories comes greater navigation problems. Sometimes navigation becomes a problem when there are simply too many options. Thus, it’s of great importance to cure the navigation-itis syndrome and make website navigation user-friendly and easy to navigate. This article offers tips on how to approach navigation design. But first, here are the tips… Tips on How to Approach Navigation Design When we started working on this article, Jon (SpyreStudios founder) and I exchanged some ideas, and came up with a basic set of rules as to where the navigation could/should be placed, how it should look, work and behave: 1. One navigation menu is often enough. 2. Make it obvious what the choices are using clear and easy-to-understand text. 3. A navigation menu should look like a navigation menu. 4. 5. Never put more than 10 or 12 items in a drop-down menu. 6. 7. 8.
Just use a (native HTML) button Many User interface widgets can be developed using HTML, CSS and JavaScript, in some cases developers build custom versions of native HTML controls because they cannot achieve the exact look and feel or behaviour they desire with a native control. Where ever possible it is recommended that native HTML controls be used over custom controls as their accessibility support is likely to be more robust and it’s much less work. However, if you do have a need to develop a custom control there are a number of steps you will have to take to ensure it is accessible. A standard button (input type=”button”) code: Example requirements for creating an accessible custom control Note: The following is a demonstration of the steps to create an accessible custom button. a custom button is created using an image.a custom control be used instead of a native HTML control (unless accessibility support is not implemented for a particular control.)event attributes are added inline. Starting with an image 1. Code:
On negative hovers 18 May, 2011 I’ve been mentioning moaning about something called negative hovers on Twitter for ages now, so it’s about time I wrote a quick post on them. At their most basic a negative hover is a link whose appearance is subtracted from on hover rather than added to. This might mean they go from: Normal Dark colour Underlined A background On :hover Paler colour Not underlined No background Or any combination of the above. It is in my (and lots of other people’s) opinion that these are a bad thing. Spot the odd one out Hovering any of the links in the list or the paragraph removes their underline or background which puts them on the back seat, surrounded by the overpowering underlines/backgrounds of the other links surrounding it. Hover any link on this page and see how hard it is to quickly see which one is hovered. Now compare that with this page. Imagine a user has tabbed to those link. Underlines are obtrusive Underlines are just plain ugly. Intuition The answer? Positive hovers, of course! Issues