Google Calendar and CSS

February 24th, 2012

A recent client requested a calendar she could use on her website to display events, immediately my thoughts turned to Google calendar. After creating and embedding the Google calendar in an iframe I noticed the style didn’t quite fit with the rest of the site, it looked ok but just didn’t follow suit.

 

I was surprised to find that adding CSS rules to the parent document didn’t work, even when adding an !important directive to each rule. The reason for this became obvious and actually two-fold;

 

1. The host document and the document in the iframe are completely separate. This seems an obvious statement to make but quite easy to overlook none the less.

 

2. The document in the iframe is on a separate domain (google.com in fact) which of course means that most browsers will block any attempt made from another domain to modify content within that document.

Full article here: http://iamhigham.com/2011/01/customising-an-embedded-google-calendar

Posted in CSS, google | No Comments »

Where to start? SEO Tools for everyone

April 1st, 2011

If you know anything about SEO (Search Engine Optimization), it is this: it takes a lot of time and effort to do it the ‘right’ way.

There are shortcuts, sure – but these are frowned upon and on occasion Google will actually dump you from their engines. So, how does one do the minimum to get a website indexed and boost traffic? The Internet is your friend. There are volumes of content regarding SEO practices, and how Google keeps redefining search criteria.

The basic steps for a solid web presence:

1) Find a good web designer who understands standards-based design and development. Getting your website done in XHTML/CSS or in HTML5 is the foundation to everything that follows regarding SEO. Make sure all your images have ‘alt’ tags, make sure your code is validated, make sure users are not confused by your navigation – you get the idea…

2) Word of mouth. Sometimes people forget that this form of promotion exists, but it’s true. Always start with the simplest promotional techniques. Some might say this is more like SEM (Search Engine Marketing).

3) Start a Facebook and/or Twitter account. They’re free. Take advantage of added exposure. Set up a Facebook ads campaign.

4) Set up a Google account – use Analytics and use Ad Words as a booster shot for your site. Depending on your target audience, you can start many campaigns to drive traffic to your site.

5) Steps 2, 3 and 4 really deal more with SEM, but it doesn’t hurt to use the free social media available to promote your site. Like I said in step 1, the foundation of your website is critical to the future success of your website. That’s why, in essence, I’m asking you to repeat step 1.

6) Start a blog. Search engines love content that is new, evolving and does not stagnate. WordPress is excellent.

7) Get these tools for your Firefox browser http://tools.seobook.com/. I recommend these tools highly. An extremely useful set of tools, it is also a gateway to learning more about SEO, and it will help you keep tabs on and stay current with SEO trends and news.

The SEO Tools keyword tracker is an excellent and simple method for your website. For people or companies with multiple domains, this provides an user friendly interface to track your sites and rank (based on a keyword) in Google, Yahoo! and Bing. Export your reports to CSV and convert to Excel spreadsheets. At worst, you will gain insight into the ever changing world of SEO.

As a simple rule of thumb, your website content is king (or queen). Always make sure you have good content. Search engines love it.

Posted in General | No Comments »

It is Getting Personal – Head Images in Website Designs

October 26th, 2010

If you decide to show your head to the people, this is a great time for it. A lot of web designers show their heads to their visitors and therefore make their websites more personal. Also, adding a head image is a good way to build an emotional connection with site visitors.

View full article here: http://www.webtemplatesblog.com/archives/2010/09/28/it-is-getting-more-personal-head-images-in-website-designs/

Posted in head images, Web Design, Websites | No Comments »

HTML5 Empowers The Web Designing Experience!

October 26th, 2010

Introduction

Html5 is considered to be the updated version of Standard HTML. Currently it is in designing phase. Moreover Html5 is the next generation of web markup language created in the era of web applications. Html5 is the advance version of HTML with more incredible features to enhance web designers experience.

What is Html5 is All About?

Basically Html5 uses specific script, which reduces the effects of Rich Internet Applications such as Flash Player and JavaFx.

Highlighted Elements Used in Html5

Consider the following features of Html5:

1. New Doc Type

There is no need to type the traditional xHtml Doc type in Html5:

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Only you need to type is:

<!DOCTYPE html>

Full article here: http://www.cyberdesignz.com/blog/website-design/html5-empowers-the-web-designing-experience/

Posted in HTML5, Web Design, web designer | No Comments »

7 strategic content tips to help your website grow

October 25th, 2010

Content strategy. It’s a buzz word in online marketing, but one that deserves attention. If you have no direction or strategy for your content, then your site is doomed from the get-go. Unfortunately, even in 2010 the web is still full of stagnating brochure sites that are unlikely to reach their full potential from both a traffic, and user experience perspective. The web has grown up, and it’s time to make content much better than that.

Content strategy allows you to achieve business goals by laying out an actionable plan of how to develop, market and maintain content which goes on your site. There are a number of things worth thinking about when you are sitting down to start a new project, and hopefully this article summarises some content tips which can help your website really grow.

Full article here: http://blog.webdistortion.com/2010/10/20/7-strategic-content-tips-to-help-your-website-grow/

Posted in content, Promotion, strategy | No Comments »

5 Useful jQuery Snippets for your Website

September 2nd, 2010


jQuery is a popular JavaScript library which is used by many developers and applications. While using jQuery you need to write less code, writing functions is less complex and there are a lot of plugins you can use for free in your web application. Even if you code everything by yourself, you need only a few rows of code to create nice and powerful features for your website

Few entire entry here: http://www.programmervn.com/2010/08/5-useful-jquery-snippets-for-your.html

Posted in jquery | No Comments »

No One Nos: Learning to Say No to Bad Ideas

August 3rd, 2010

You can’t create what clients need when you’re too busy saying yes to everything they want. As a user experience designer, it’s your job to say no to bad ideas and pointless practices. But getting to no is never easy. Proven techniques that can turn vocal negatives into positive experiences for you, the client, and most importantly, the end-user include citing best practices and simple but powerful business cases; proving your point with numbers; shifting focus from what to who; using the “positive no”; and, when necessary, pricing yourself out.

Source Article is here:

http://www.alistapart.com/articles/no-one-nos-learning-to-say-no-to-bad-ideas/

Posted in Process, Business, Project Management and Workflow | No Comments »

Custom HTML5 video player with CSS3 and jQuery

July 29th, 2010

Custom HTML5 video player with CSS3 and jQuery. Learn how to build an easily customizable HTML5 video player, including packaging it as a simple jQuery plugin.

Building a custom HTML5 video player with CSS3 and jQuery

By Cristian-Ionut Colceriu · 28 Jul, 2010

Published in: opacity, html5, css3, jquery, video, Transitions

Introduction

The HTML5 <video> element is already supported by most modern browsers, and even IE has support announced for version 9. There are many advantages of having video embedded natively in the browser (covered in the article Introduction to HTML5 video by Bruce Lawson), so many developers are trying to use it as soon as possible. There are a couple of barriers to this that remain, most notably the problem of which codecs are supported in each browser, with a disagreement between Opera/Firefox and IE/Safari. That might not be a problem for much longer though, with Google recently releasing the VP8 codec, and the WebM project coming into existence. Opera, Firefox, Chrome and IE9 all have support in final builds, developer builds, or at least support announced for this format, and Flash will be able to play VP8. This means that we will soon be able to create a single version of the video that will play in the <video> element in most browsers, and the Flash Player in those that don’t support WebM natively.

The other major barrier to consider is building up a custom HTML5 <video> player — this is where a Flash-only solution currently has an advantage, with the powerful Flash IDE providing an easy interface with which to create a customized video player component. IF we want to write a customised player for the HTML5 <video> element we need to handcode all the HTML5, CSS3, JavaScript, and any other open standards we want to use to build a player!

Full article can be viewed here: http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/

Posted in News and Announcements | No Comments »

The mobile web optimization guide

July 29th, 2010

The mobile web optimization guide. Provides an overview of three different strategies to make your websites work across all devices.

Mobile-friendly: The mobile web optimization guide

By Bruce Lawson · 28 Jul, 2010

Published in: media queries, mobile, viewport

Introduction

If I had a Euro for everyone who asks me at conferences how they can “mobilise” their web site, I’d be extraordinarily rich as well as breathtakingly handsome.

It’s easy to see why people wish to make their sites “mobile friendly”; Gartner research suggests that by 2013, mobile phones will overtake PCs as the most common Web access device worldwide. And don’t forget other visits from devices such as games consoles like Nintendo Wii, DSi, web-enabled TVs, in-car browsers and the like.

Many customers are already using mobile devices as their main method of Web access, particularly in emerging markets — the July 2009 Statistical Report on Internet Development in China states that “”the proportion of [people] accessing the Internet by mobile increased enormously from 39.5% in late 2008 to 46% in June 2009″, while the proportion of using desktops and laptops decreased”. That translates to 150 million people. In the developed world, many have a mobile device as their secondary method of accessing the Web while they’re out and about.

It’s a truism that on the Web, there is always someone offering the same service as you are. And if you’re not catering for the mobile user, you can be sure that your competitors are. In the current harsh economic climate, sending customers into the arms of the competition doesn’t succeed as a business strategy.

This article provides an overview of three different strategies to make your websites work across all devices. We’ll call them “mobile-aware” websites, as they’re not specifically for mobile sites, but they will work on mobile, as well as across different alternative browsing devices. These strategies are not mutually exclusive; you can mix and match as your project, budget and sanity allows.

View entire article here:  http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/

Posted in News and Announcements | No Comments »

Understanding border-image

July 22nd, 2010

Understanding border-image. Learn how the border-image shorthand property works in today’s browsers.

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today’s browsers.

View full article here: http://css-tricks.com/understanding-border-image/

Posted in News and Announcements | No Comments »

« Older Entries