Live Content Automatically Updating

A live website is something that so many people want today.  No more static sites that never change from one week to the next but live feeds that update every time you add a new post or a new piece of featured content.  I get more and more requests to design and build ‘live’ sites.

Often sites of this type can involve lots of feeds; pulling in the latest posts and features from other pages or sections to a central home page.  In turn attracting visitors to click to view the full content.  Coding is complex as we move away from the out-of-the-box WordPress models.

This is a demonstration site that I built to show a home page working with lots of different items feeding in.  As new items are added, this will automatically update.  Visit site »

 

CSS3 approach to styling web pages

INTRODUCTION

This page is full of CSS3 tricks. Things that we will be able to do with new styling methods.

This doesn’t look like a big deal on the surface but for a developer it is amazing. To be able to create rounded corners without lots of Javascript or hours spend creating images in Photoshop. The same applies to the shading, opacity and multi-column layouts. More about the availability of CSS3 can be viewed here »

CSS3 doesn’t work in all browsers yet, many versions of Internet Explorer being an example but it’s not far off now. So, if you are viewing this in Internet Explorer 8.0 or earlier, simple answer is don’t bother! If you are viewing this in latest versions of Chrome, Safari or Firefox it will display as it should.

GOOGLE FONTS

The headings on this page are created using a Google web font. By using the Google code in the web page everyone is able to view the font, regardless of their browser and the fonts they have on their machine.

CSS3 | BORDER IMAGE

I have a border and it’s an image!

CSS3 | BORDER RADIUS – A ROUNDED CONTAINER

This is a rounded container. The corners can all be different. In this case the top right and bottom left corners are more rounded than the top left and bottom right corners.

CSS3 | BOX SHADOWS | A SHADY CONTAINER

The inner box here has shading and shadows to give the impression that it is slightly raised above the dark box surrounding it. It also has shadowing to give the impression that light is passing over it.

CSS3 | GRADIENTS

Please note that if you are viewing this page in internet explorer then there will be nothing to view here. Maybe try downloading Google Chrome to get a better web experience.

CSS3 | MULTI COLUMN CONTAINER

This is the header

This is probably one of the least impressive things to look at but for a developer it’s monumental. In order to display the newspaper column look, which is much more readable we have always had to set up individual columns and align them on the page. Not too much of a challenge for an experienced developer but this type of layout will be so much easier!

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna.

This Is Another Header

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna.

CSS3 | MULTIPLE BACKGROUNDS OVERLAYING EACH OTHER

CSS3 | OPACITY

.
.
.
.

CSS3 | TEXT SHADOW

Text Shadows

CSS3 | TRANSFORM

Rotate.

Scale.

Skew.

Design of Party Invitation

Graphic design for party invitation

This was a design I did for a housewarming party in Bath.  A completely bespoke graphic design project.

Feedback from Persuasion Engines

“May I say thank you so much for all your help this year; there’s a whole area of my life that I know has been in safe and thoughtful hands.”

Stephen Barr

Fabulous work with image effects

What lies beneath

This image won a competition entitled “What lies beneath”.  A limitless imagination there.  www.worth1000.com/entries/627510/wishing-well/

Liquid Art by Markus Reugels

Liquid Art

This is amazing photography, there are lots more examples on Markus’ Flickr stream.  He even shows how it is all done. http://www.flickr.com/photos/maianer/

WordPress 3.3 is here! These are the benefits…

Easier Uploading

File Type Detection
Instead of needing to click on a specific upload icon based on your file type, now there’s just one. Once your file is uploaded, the appropriate fields will be displayed for entering information based on the file type.

Drag-and-Drop Media Uploader
Adding photos or other files to posts and pages just got easier. Drag files from your desktop and drop them into the uploader. Add one file at a time, or many at once.

More File Formats
7z and rar formats have been added to the list of allowed file types in the uploader.

Dashboard Design

Flyout Menus
Speed up navigating the dashboard and reduce repetitive clicking with new flyout submenus. As you hover over each main menu item in your dashboard navigation, the submenus will magically appear, providing single-click access to any dashboard screen.

Header + Admin Bar = Toolbar
To save space and increase efficiency, the admin bar and the old Dashboard header have been combined into one persistent toolbar. Hovering over the toolbar items will reveal sub-menus when available for quick access.

 

Responsive Design
Certain dashboard screens have been updated to look better at various sizes, including improved iPad/tablet support.

Help Tabs
The Help tabs located in the upper corner of the dashboard screens below your name have improved. Help content is broken into smaller sections for easier access, with links to relevant documentation and the support forums always visible.

New Feature Pointers
When new features are added or changes are made to WordPress you will now know all about it with new feature pointers explaining the change.

Post-update Changelog
From now on when you update WordPress, you’ll be brought to the post-update screen — also accessible any time from the W logo in the corner of the toolbar — to get an overview of what’s changed.

Dashboard Welcome
The dashboard home screen will have a Welcome area that displays when a new WordPress installation is accessed for the first time, prompting the site owner to complete various setup tasks. Once dismissed, this welcome can be accessed via the dashboard home screen options tab.

Content Tools

Better Co-Editing

Have you ever gone to edit a post after someone else has finished with it, only to get an alert that tells you the other person is still editing the post? From now on, you’ll only get that alert if another person is still on the editing screen — no more time lag.

Tumblr Importer
Go to Tools → Import to get the new Tumblr Importer, which maps your Tumblog posts to the matching WordPress post formats. Tip: Choose a theme designed to display post formats to get the greatest benefit from the importer.

For developers

Flexible Permalinks
You have more freedom when choosing a post permalink structure. Skip the date information or add a category slug without a performance penalty.

Post Slugs: Less Funky
Funky characters in post titles (e.g. curly quotes from a word processor) will no longer result in garbled post slugs.

jQuery and jQuery UI
WordPress now includes the entire jQuery UI stack and the latest version of jQuery: 1.7.1.

is_main_query()
This handy method will tell you if a WP_Query object is the main WordPress query or a secondary query.

WP_Screen API
WordPress has a nice new API for working with admin screens. Create rich screens, add help documentation, adapt to screen contexts, and more.

Editor API Overhaul
The new editor API automatically pulls in all the JS and CSS goodness for the editor. It even supports multiple editors on the same page.

Feedback from Wendy O’Hare Skincare

“We would also like to say a special thank you to Tracey Rickard who designed the site; Tracey Rickard Media for all her hard work, skill and trust, ‘…Thank you Tracey x’.”

Wordpress website for Wendy O'Hare Skincare

Advert for Rugby World Mazagine

This is an advert that I created for Sporting Billy and Sporting Gifts.

Sporting Billy & Sporting Gifts Advertisement for Rugby World

High quality sites only at the Google party with a +1 of course

It is no secret that Google+ is Google’s relatively new social media platform or that Google is the biggest search engine in the world.

Will Google be able to knock Facebook off its perch with Google+?  The immediate answer to that is usually “why do we need another social media channel?”  Well I must admit I was pretty much of the same mind until I thought a bit more about the implications of the Google +1 button.

Google +1The Google+1 buttons are appearing everywhere.  You can +1 any website on the net, or perhaps even more pertinent you can +1 any website directly from the search results. Once you have given your +1 vote to a website then this can appear in your Google+ profile, much the same as a ‘Liked’ page appears in your Facebook profile.

The fact that Google has announced that +1s will figure in their search engine algorithm makes this a very powerful USP.  Once people realise that having the +1 button integrated within their site could mean more traffic from Google search, the buttons and the social media platform are going to become very popular indeed.

So, if website owners are going to reap the benefits of joining Google+ will they stay with Facebook long term?  Probably yes because all Internet activity counts in SEO, including Facebook.  However, whilst it is easy to copy and paste articles across platforms, it is important to handle duplicate content across the web with care …

The Google PandaGoogle Panda is the latest implementation by Google to improve the quality of search results. The main focus of the search engine software is to sieve out all of the trash content in the virtual world. Panda is striving to find quality links, working out which sites are genuinely popular and which sites have contrived their incoming links from disreputable directories or mirror content. Incorporating +1 into the search results is the first step towards humanising the SEO process.

Google Webmaster guidelines are even more prevalent now as the new Panda continues on its mission to clean up the net.  Google is doing more than ever to weed out those who misbehave!  A snapshot of what Google says is below, the full guidelines can be viewed here »

  • Content should be original and of genuine interest to your visitors, not written for search engines.  Make people want to like you, +1 you or link to you.
  • Content should not be duplicated across the web – in some cases it is deliberately duplicated across domains in an attempt to manipulate search engine rankings or win more traffic. Deceptive practices like this can result in a poor user experience.
  • There should be an easily accessible, sound navigation structure for all pages – (a Google spider needs to be able to find your site content easily in the same way as your visitors)
  • Content should not be keyword packed

Google never reveal the actual algorithm used to render the search results. Will Google +1 become an even bigger factor in deciding a website’s popularity in the future?  This could certainly give them the means to become a major social media player.  Time will tell …

Recent Posts

LiveSite

Live Content Automatically Updating

A live website is something that so many people want today. No more static sites that never change from one week to the next but Read more »

css3logo

CSS3 approach to styling web pages

This page is full of CSS3 tricks. Things that we will be able to do with new styling methods. Read more »

Graphic design for party invitation

Design of Party Invitation

This was a design I did for a housewarming party in Bath. Read more »

What lies beneath

Fabulous work with image effects

This image won a competition entitled “What lies beneath”. A limitless imagination there. Read more »

Twitter