From time-to-time we like to highlight new Internet-related technology offerings hitting the market.
As of today, BT have launched a new mobile broadband solution that enables home Internet consumers to take advantage of mobile broadband Internet and mobile telephony whilst on the move.
What’s different about BT Anywhere?
With BT Anywhere, consumer broadband users who sign-up to the Anywhere package will not only receive the BT Home Hub, but will also receive the brand new BT ToGo phone worth £150.
The BT ToGo HTC S620 or S710 phone is a Windows Mobile based smartphone with capabilities similar to a BlackBerry handset. With a BT ToGo phone you can check your emails, surf the Internet and make calls when you’re out and about.
The BT ToGo smartphone features an easy-to-use screen that shows the status of the phone at quick glance.
The phone has a 1.3 megapixel camera built-in for taking pictures at any time with easy backup to BT Digital Vault.
The BT ToGo handset also lets you log-on to thousands of WiFi hotspots for even faster email and Internet access.
According to John Petter, Consumer Managing Director at BT, “Broadband Anywhere customers get the total broadband experience - BT’s top-of-the-range broadband service at home, and a free BT ToGo smartphone for when out and about or on the move.”
What does BT’s mobile broadband solution cost?
From £23.99 per month (for the first three months, £29.99 thereafter). Consumers can also purchase extra text and call add-ons to suit their individual call plan needs.
Now you can take mobile broadband anywhere!
To find out more please see BT’s press release for this product available here.
The following article highlights a list of useful jQuery resources for web designers and developers.
Using JavaScript frameworks like jQuery doesn’t have to be difficult, and there are resources available on the internet that make using jQuery even easier.
Web-based jQuery cheat sheet that highlights the structure and layout for creating jQuery code.
2. CSS Switcher (demo)
Style sheet switcheroo. Step-by-step guide to producing mutliple stylesheets for your website allowing you to incorporate different designs or font sizes. The script sets a cookie for the user so that their settings are saved whilst they navigate your website.
3. Rounded Corners (demo)
Something so simple has proved quite difficult to implement without using lots of bloated code and CSS. With jQuery it’s easy to create rounded corners. This tutorial takes you through the process.
4. Form Validation (demo)
This easy-to-use form validation script uses jQuery for submitting web contact forms on your website.
5. jQuery Portlets (demo)
Create drag & drop blocks of text that can be arranged in a flexible manner using jQuery Portlets. The site contains a useful tutorial explaining the process.
6. Date Picker (demo)
Choosing dates is an integral part of many websites. Using jQuery the pop-up calendar method can be achieved with the minimum of fuss. A selection of demos highlight the possibilities when using the script.
Edit in-line text simply by clicking on the text and replacing the text using Jeditable.
Add rich interface components to your websites with Interface Elements.
Add functionality to data grids such as resizing of columns, paging, sorting, row and column styling with Ingrid.
A jQuery compatible lightbox plugin that gives users a smooth transition for viewing website images.
With the increasing trend for frameworks, including frameworks like Ruby on Rails and JavaScript frameworks such as Prototype and jQuery - we have also seen the advent of CSS frameworks.
Yahoo where the first on the band wagon with the release of YUI Grids CSS which offers an easy to use interface that doesn’t need to be downloaded onto your computer.
You simply use drop down input boxes to choose how many columns and rows you want in your layout, then view the code, copy and paste into your own project.
Google also offer a CSS framework called Blueprint. This program needs to be downloaded onto your computer. There is a tutorial and sample website built with Blueprint to have a look at. The beauty of Blueprint is the code produced validates to W3C standards.
Another CSS framework is WYMstyle which again needs to be downloaded. This open-source project enables designers to speed up the development process whilst offering a modular solution to CSS creation.
Another solution for CSS creation is Elements CSS framework. This framework needs to be downlaoded as with many of the other framewroks.
From personal experience I have used the YUI CSS Grids framework, simply because it doesn’t need to be downloaded. It can be used from the webpage. Then the code can be pasted into your own project.
As a web designer, from a practical point of view a CSS framework can certainly save some time - but I personally prefer producing my CSS from scratch. The advantage of manually coding a website is the ability to get a ‘feel’ for the code, and thus solve issues along the way. Mechanically produced code simply can’t achieve that same ‘feel’.
My view is using a CSS framework is fine if you are in a desperate hurry to get a design out there, but from an everyday point of view I prefer to create my own template CSS files which can serve practically the same purpose, and have the advantage of fitting within my design style.
For beginners I feel learning the basics in notepad is the best solution, but for those who are a bit more impatient and want to get stuck in straight away, a CSS framework may well offer that solution.
There has been discussion as to whether CSS framework layouts are over-’divified’, but this thought seems to bring up an equal amount of opinions on either side of the fence. As a simple solution, that validates, a CSS framework seems to do exactly what it’s asked to do.
Using a JavaScript framework such as jQuery enables you to add interactivity and increased functionality to your website.
You don’t have to be a programming whiz to be able to use some of the features on jQuery. As you familiarise yourself with the code, you will probably find adjusting code to suit your needs quite straight-forward.
Below are 10 useful tutorials that enable you to easily add jQuery effects to your website.
1. jQuery Tutorials for Designers - An excellent set of simple tutorials to execute simple jQuery code.
2. jQuery Slider Gallery - A useful tutorial giving step-by-step instructions on producing a JavaScript gallery.
3. 15 Days of jQuery - Lots of easy to follow examples and tutorials covering basic up to advanced jQuery techniques.
4. TutorialBlog - A selection of 8 jQuery tutorials with easy to follow demo’s.
5. Learning jQuery - One of the best tutorial sites for beginners, covering some advanced techniques in a simple way. Definitely worth adding to your RSS reader.
6. Specky Boy - A list of 65 tutorials, guides and other jQuery resources. Well worth a browse.
7. Nodstrum - Search box auto-completer tutorial.
8. jQuery in 15 minutes - Video tutorial for beginners.
9. Rounded Corners - jQuery rounded box corners tutorial.
10. MarkItUp! - jQuery plugin that allows you to change any textarea into a markup editor.
Getting inspiration for new projects and layouts can be difficult. However, there are several high-quality sites dedicated to the graphics, code, colours, fonts that can make your website stand out from the crowd.
Smashing Magazine provides links to wordpress themes, web design tips and tricks and graphics.
PSDTuts is an excellent website rpoviding step-by-step tutorials on using photoshop. Tricks and tips for begineers and more advanced Photoshop users.
WuFoo Form templates and form-validation made-easy. Includes templates for accepting payments with PayPal and Google Checkout.
Weblog Tools Collection is a resource for finding high-quality Wordpress themes.
Webcreme quite literally showcases the cream-of-the-crop in web design.
Stylegala is another website that showcases high-quality web design. An excellent resource for finding inspiration.
CSS Mania is a showcase of cutting-edge CSS-compliant web design.
CSS Vault is another excellent CSS-compliant web site showcase.
CSS Play provides a whole-host of ready to use CSS scripts for navigation, CSS image maps and advanced opacity techniques for recent browsers.
A List Apart provide tutorials on many areas of web design, from basic right through to advanced techniques. The site covers graphics, CSS, HTML, JavaScript techniques and typography.
One way to keep up-to-date with these sites is to subscribe to their RSS feeds, that way you’ll know when all the latest tutorials and articles are published.
By using CSS, a web developer can give users a useful and professional way to print-out pages from their website.
By using CSS media selectors, modern browsers can pick-up a different stylesheet for handheld devices, screen readers and print-layouts.
Now we will look at producing a Print CSS file (the CSS could be placed in the head of the page, however, it is good practise to use external CSS files, therefore we will look at external CSS for this article).
In the head of the HTML page, insert the following line to call the print.css file when called for by the browser. For more information on using @import rather than “link rel=” click here:
<style type=”text/css” media=”print”>@import url(”http://www.yourdomain.com/print.css”);</style>
Analyse your website pages, if you are using images and background images you will likely want these to be hidden when printing a page. Make a list of all the elements that are unnecessary for printing purposes. This can include navigation links, logos, advertisement blocks etc.
Using notepad or another text editor we can produce a print.css file designed to make our site print-friendly. Firstly, we can work out some of the universal CSS, such as making the page background white, the text black and give underline links across the site to make them stand-out on paper.
/*** Wild card allows us to define style attributes for any elements on the page, in this case we are making the page background white, and hiding any background images. ***/
* {
background-color:#fff !important;
background-image:none !important
}
/*** We can define the font to be used by all the text on the page, this allows us to choose fonts that render well for print. ***/
body {
font-family: arial, sans-serif;
font-size:12pt;
color:#000
}
Now we need to define our style attributes for our headings and links. If like myself you use a variety of link styling, you will want to remove this styling and stick with a universal style that looks good for print.
/*** When styling for print define font sizes in points rather than pixels or em’s as with the headings below. It is good practise to include a default size within body as shown in the above code. ***/
h1 {
font-size:20pt
}
h2 {
font-size:18pt
}
h3 {
font-size:16pt
}
/*** By including a different colour for visited links, print-outs will show the user which pages they have already visited. This can be changed according to personal preference, however this adheres to common practise.***/
a:link, a:active, a:visited,
a:hover, a.main:link, a.main:active,
a.main:visited, a.main:hover {
text-decoration:underline
}
a:link, a:active, a:hover,
a.main:link, a.main:active,
a.main:hover {
color:#00f
}
a:visited, a.main:visited {
color:purple
}
Now we need to decide which elements to hide from the page when the print.css file is loaded. We have already hidden background images, and defined the page background as white. Now we need to hide any unnecessary navigational div’s, ul’s etc.
/*** Hide the top navigation and footer navigation. Change the names of the classes/IDs to the names you have chosen for your navigational div’s. Include other navigational elements that should not be shown. By removing them with display:none rather than display:hidden, they space around the objects is removed making printed pages fill the space correctly.***/
.top-navigation {
display:none
}
.footer-navigation {
display:none
}
Hide unnecessary images as this is simply a waste of ink for users, and they will appreciate not wasting it on colourful logos and images.
.img {
display:none
}
An additional CSS attribute that can be added to the file for better link display follows. Internet Explorer 6 doesn’t support this, however newer versions of FF, Opera and Safari will display the extended URL:
a:link:after, a:visited:after {
content:” (”attr(href)”)”
}
Using the above CSS, links will look like the following on the printed page:
more info (http://www.anotherdomain.com/details/) rather than simply more info. This will be useful for some purposes, but unfortunately it can look bloated when there are a lot of links in a paragraph. Test before implementing.
UPDATE: The above CSS coding doesn’t make use of CSS shorthand, to keep CSS file sizes to a minimum see a previous post on the site called Squeeze Your CSS Files Into Shape.
