Archive for CSS

Use CSS to Style Columns

So why would you want to style your list items as columns? Well, good question! Let me just give you a few examples: If you like me are designing a layout for a WordPress blog that has a LOT of categories, you might not want that list to go way off your page. Other blogs might have the same problem with their blogroll, your blogroll grow over time and at some point it will get longer than you might like and split it up in two columns.

But the same technique that is used in this example can also be applied to navigation. You can use this method to create a horizontal navigation bar, and if you have many links, you can have the links align nicely underneath each other.

OK, you probably want to get going, it’s very simple and easy. Actually we are only really using a few basic CSS properties and I will go over them in detail in this article.

Just an aside here before you start coding your CSS; a good practice before you start coding is to reset all the known default browser style. These differ a lot from IE6/7 to Firefox to Opera, Safari etc. Eric Meyer has taken the time to develop a stylesheet that will do just that for you, just grab a copy of the file, and use the ‘@import’ command at the begging of your CSS stylesheet to import the file.

Let’s start out with our markup then, a simple list you can get here. It’s just a simple list of the categories on this site.

  1. First thing we want to do is set a width of our container and centre it. You don’t have to if you are doing this in your sidebar, just set the width.
  2. #categories {
    width: 980px;
    margin: 10px auto 0;
    }

  3. Next thing is to set the list-item elements to actually make the colums. We float each single list item that will make every category ‘jump’ up to the right of its preceder. We will also give it a width of 136px (this is essentially the width of the coloumn), and push the columns a bit apart by giving them a right matgin of 3px.
  4. #categories li {
    float: left;
    width: 136px;
    margin-right: 3px;
    }

Well that’s basically it, we now have a set of columns, but to make them visually appear better we will do some extra styling.

  1. Give the line a height of 1.7em
  2. #categories ul {
    line-height: 1.7em;
    padding:0 0 0 5px;
    }

  3. Make the font a bit smaller, capitalize the words and make it bold.
  4. #categories li {
    font-size:11px;
    text-transform: capitalize;
    font-weight: bold;
    }

  5. Finally style the links and give them a hover style.
  6. #categories li a {
    color: #000;
    text-decoration: none;
    }
    #categories li a:hover {
    color: #999;
    text-decoration: none;
    }

You can suit the final styling to your individual needs; you can also make the columns wider or narrower if that’s what you want. If you are making it in a sidebar you will probably only want to have 2 columns, if you are styling a navigation bar, you might want to have more.

If you are interested you can download the full stylesheet and compare it to your own.

/Kasper – on Twitter and Delicious

Making My First WordPress Theme

Being a student with interests in both Online Journalism and Web Design, blogging is obviously something that I find interesting. I’m currently planning for my assignment where I intend to make some kind of WordPress Theme for some kind of website, maybe this? Who knows…

Having never made a WordPress Theme before, this will probably be a somewhat interesting project. I have stumbled upon a few people that I would like to talk to before starting out. And I will definately need all the help I can get from around the web and the WordPress comunnity.

Since this project is web related I think I will focus my theme mostly on advanced CSS, browser compatibillity, usabillity and valid code obviously.

Hopefully I will be able to pick up some skills and share my findings and frustrations as I go along, maybe I will even be able to share a few tips and tricks.

/Kasper

Further Ideas for development

The skills that I have developed and practiced throughout this module have been beneficial to me in that I now have them to use in future projects, and I genuinely feel confident with them. 

Firstly my initial idea for personal development will be to continue with trying to resolve the problem surrounding the use of PHP in my project. 

Secondly, for the purpose of this assignment it was not necessary to build all pages to the website; however these are what I will now look to build and develop, so that the menu links such as ‘About me,’ actually have some content to link to and display.  

In terms of developing my CSS skills further, this could include making print-friendly versions of my web pages to go with my portfolio site as a brief example, but overall I think the more practice I have with CSS the better my chances are of becoming quicker at designing on the whole. As for PHP there is a large amount to develop with, and my original project idea of a Facebook application will be another main focus of mine. PHP is where the future of web design is, and as a growing web designer this is the direction I too need to be taking.                  

New Employable Skills

CSS is seen as a fundamental part of web design; however is an area that I personally admit to have been quite lazy with since learning the field. This is the main reason why I now wanted to develop my knowledge within the area, because at such an important point in my academic studies I knew that it was vital to know how to deploy these key skills confidently into practice, given that my third year project is to build a website and that will take such elements into account. What’s more, they are basic knowledge and skills that are almost certainly required when seeking employment within this sector, Employers will not only be looking for someone who can create unique designs, but will also depend on that person to have such skills that will make the work they produce more accessible, as this is an important issue for web companies. CSS skills also engage the designer more so with usability, for instance the placement of content is thought out more logically with CSS, and hence makes the designer more aware of how content appears and impacts on a user’s general site experience. The main reason people want websites is to attract the attention of users, and a user’s attention is only held with good design – something which CSS clearly promotes. 

Not only have I tried to improve my CSS knowledge and skills, but I have also used some PHP coding in my project. PHP itself is a technology which I have only recently been introduced to, and was the basis for my original project proposal which unfortunately became overrun with problems, and these were deemed too challenging for the short space of time with which this project had to be completed within. The use of PHP in my project is to pass PHP variables with a URL. This means that with my CSS designs, a user would be able to change the style/design of the webpage dynamically, i.e. change/load the new style into the webpage itself by clicking on a link.

In order to learn and develop this technique I first worked with a tutorial, and later also sought advice from the module lecturer. Unfortunately however, I have not yet been able to get this feature to work 100% correctly, and have been trying several methods, that I have been testing on my own personal webspace (http://www.katiebutler.co.uk) over the past week to resolve the apparent problem – so far with little success. Despite this my understanding of the technique has developed from virtually nothing to an adequate level, therefore with more practice and guidance I may eventually be able to get this element to work how it should. In doing so, I will have gained further skills to present to and hopefully impress potential employers or even clients with, especially those who may want to utilise my web services in the future.

CSS and issues of Accessibility

CSS essentially encourages web designers to create more accessible web pages and hence more accessible websites overall – due to the nature of their functioning. CSS as I have outlined in some of my previous blog research, gives designers more control over their HTML pages, for instance they become more flexible, and elements of design can be changed relatively easily to suit a user’s requirements.    Having done some Internet research into accessibility beforehand, I can now identify how my web pages and CSS designs have been made accessible. 

  1. Each page conforms to general usability guidelines, i.e. such as making links distinctive through colour, underlining etc
  2. Each page is cross-browser compatible, and so looks almost identical in IE and Mozilla Firefox etc (http://www.browsershots.org/)
  3. Each page has been optimised to a certain extent (meta tags) so that search engines would be able to prioritise the site more easily.
  4. CSS has allowed me to control content via ‘DIVS’ which effectively separate content, yet still present it in user-friendly ways.
  5. The use of CSS also means that an alternative font will be displayed with regards to all text, if the current one is not installed on a user’s computer.

 In my designs I have also used a wide colour range, and it is always useful to check these colours with VisCheck.com to guarantee that people who are visually impaired (i.e colour blind) can still see some form of colour at least, ensuring then that they are not missing out on any important information as a result of this, for example the page’s links. This is a quick task that I have used before in previous projects and is another valid way to enhance accessibility. (See Appendix 1 for results of this testing)

Whats new in the industry?

This is some solid advice given by the website Webdesign.about (http://webdesign.about.com/od/jobs/a/aa081307.htm)  The industry does move at a phenomenal rate, and while PHP is in at the moment, in a few months it may not be. Coding abilities thewebsite says you should know in order to gain a job are, HTML, CSS and Javascript. HTML and CSS are the founding backbone to the webdesign industry, and it really is not worth learning other coding languages until these are learnt. (Other codes still rely on these for the graphical design and layout of the websites.) Javascript on the other hand was an odd choice. However her validation is a good one: 

“I can’t tell you how often I’ve been asked to write a quick validation script or rollover image. Knowing enough JavaScript to whip these out has helped me to improve simple Web sites while we waited for the more complicated server behaviors to be built.”

 This next quote from the website is very important to understand, as the industry moves so quickly coding languages need to develop, and developers need to adapt.  

 “Don’t focus on any one programming language. Chances are, by the time you finish school, that language will be “out” and something completely different will be “in”. Companies follow fads just as much as any other industry, and Web programmers need to be aware of what’s hot and not. You’re better off learning how to learn programming languages and then scanning the jobs 6 months or so before you are going to start working to find out what language you should focus on to get hired. Some good bets right now are: ASP, JSP, and Ruby. PHP is popular with smaller companies, but has a lot of security issues. “

 As mentioned, because PHP is open sources, it may have a lot of security issues, however, it is always being developed, and therefore in the future it will not. It is mentioned as one of the top coding languages to learn later in the extract, and with its evidence of its functionality and security in web sites like Facebook.com it is not really an issue I am worrying about. PHP is a strong plus point when looking at an individuals CV. 

When interviewing David Kelly (Izonedesign.co.uk, dK web and new media and Stormconsultancy.com) web developer and managing director of the companies listed above, he mentions that PHP was one of his top priorities to learn after learning the fundamental HTML, CSS and Javascript. His first experiment was with a Blogging website back in 2000, which was when blogging became a huge trend within the industry. Since then he has used the language for almost every delevopment (with the combination of CSS and HTML) however simple or complicated the website.  

When I went to ask him a few questions about a project I needed help with in the first year of university, he was instantly trying to make me learn PHP combined with HTML, as he believed it was simpler to develop website templates with the <?include> tag then with a HTML template. In this way, he mentions, the coding script is arranged in various folders and files and therefore is a lot harder to copy it from the Internet (with the view source command). He mentions that it is very difficult to decide what will come next in PHP as developers are constantly trying to create something new with the open sourcing. However he does mention, “right now Web2.0 and customisable websites are all the rage” and that websites like facebook and myspace and gripped the nation with our need for companionship. Again the problem being, how long will this trend last? 

(http://www.readwriteweb.com/archives/london_mashup_web30.php) This article is really important in looking at web designs future as a whole. In a recent conference MASHUP (FEB 07) in London, they discussed,

 What’s next, Web3.0? – The coming semantic web”.

HCard and Hcalendar looking at a new bookmarking system for users for example http://www.worldcupkickoff.com  which allows users to ability to bookmark their teams games in the world cup in their own calendar application. It only works so far in third party browsers however soon it will be installed into firefox 3. Sidewinder allows web coding to be used in a normal desktop instead of browsers. A little bit odd and kind of irrelevant X-port (or X-forms) is my like XHTML 2.0 and is designed to be the next generation of HTML/ XHTML forms. 

Content Labels which will change the way in which search engines in the future will operate. Content Labels are much like Meta tags however differ in the sense that in order to get them verified it needs to be sent off to a company (for a small fee) in which they can judge if the tags are correct or not, therefore placing them higher or lower in search engine results. http://www.readwriteweb.com/archives/search_20_what_is_next.php 

According to this blog (December 06) whats new in the web industry is the Snap Feature (http://snap.com) allowing websites (links) to be viewed as thumbnails therefore hopefully speeding up the time it takes to view sites. Works through the coding AJAX. Can be viewed on websites like wordpress to view small images of websites from just links.

Alternatively Searchmash (http://searchmash.com) owned by google, it searches the web however much like snap, it offers an image, blog, video and wikipedia results to the right of the screen. Due to Ajax there is no slowdown. It also makes it much easier to browse the search results when you need 

 “more information, simply click on more  information, simply click on “More web results” and new results appear at the bottom – enabling you to continue scrolling down on the same page, instead of opening a new page. SearchMash also allows you to give feedback about the results; this may be a sign of the introduction of power of masses into Google Search. “

 

Azeem Ahmad – Final Project Proposal (Detailed)

Project Outline –

Many internet users travel to various news websites to digest daily occurrences around the world. Most often have e-mail subscriptions (no matter how dated the service may be), and it is often tedious having to trawl through several websites to find the news the user is looking for.

A lot of people are now taking advantage of RSS, or Really Simple Syndication – a method of linking through a ‘feed’ that can provide up to 15 or more links (in this case, news stories) at once. This is a good new media technology, but it has room to be developed more. Subscribing to an RSS feed is anonymous, hence eliminating the need for e-mail news subscriptions, but placing several feed boxes on a browsers toolbar can seriously overload the screen with unnecessary information.

For my project I aim to manipulate four popular news websites, BBC News, Sky News, The Guardian, and The Mirror, and converging them into one feed so that online news users only need to subscribe to one feed.

I plan to do this by creating a one big feed, essentially a mash-up of the four feeds mentioned above. I will also attempt to categorise the links inside of the feed by genre so that browsing through the single feed is easier. Also, by categorising, I am also able to promote this product as an RSS 2.0 feed, rather than simply an RSS feed, thus enhancing potential attention from interested parties.

Market Research –

One very successful website that does this is http://imooty.eu, a news aggregator for the whole of Europe. Imooty allows users to pick and choose which particular publications they want to see an RSS breakdown (of top headlines) on the users ‘my imooty’ page – a clever individualisation for the website. Such personalisation of the site will keep viewers and readers coming back to the site for more, and more regularly, as all of the news they wish to digest is on one page. Imooty also has options to view the news for the rest of Europe, and is a very successful website.

Upon viewing the page source code for imooty, it is clear to see that the technical side of the website is heavily reliant on javascript coding, and embedding CSS into RSS coding, both of which are advanced coding procedures. For my project I simply intend to create a single feed which is a mash-up of four feeds, rather than creating a whole website.

I intend to create my product by obtaining and re-writing the RSS feed codes from the four sites mentioned, including date, category and GUID (Globally Unique Identifier) tags – so that any copyright issues are avoided. A simple breakdown of how one link in one section of the whole feed will look something like this:

<xml type="text/xsl">
 
<rss xml: version="2.0">
  <channel>
        <item>
      <title>Saudi king chides UK on terrorism</title>  
      <description>Saudi Arabia's King Abdullah accuses Britain of doing too little to fight international terrorism.</description>  
      <link>http://news.bbc.co.uk/go/rss/-/1/hi/uk/7066867.stm</link>  
      <guid isPermaLink="false">http://news.bbc.co.uk/1/hi/uk/7066867.stm</guid>  
      <pubDate>Mon, 29 Oct 2007 11:21:57 GMT</pubDate>  
      <category>UK</category>  
      
    </item>  

As seen from the box above, the link is the first story from the BBC News front page, taken at 1237 on Monday 29th October 2007. The date is relevant as the feed constantly is self-updating.

Included in the sample feed is the formatting of the code, in this case, XSL (Extensible Stylesheet Language) – this method eliminates the need to include CSS into the code. As with every RSS feed, the ‘version’ and ‘channel’ tags remain present, so too do the ‘item’ and ‘description’ tags.

However, the features that make this an RSS 2.0 feed, are the other tags. In this case, because the BBC is the original creator of the page (containing the story), there is no need for a GUID, hence the ‘false’ answer to the tag – the link simply points to the page that it is describing.

 

Also included is the publication date, and the category. These two categories are often overlooked when people create RSS feeds, but are now becoming increasingly relevant as the latest versions of Microsoft Internet Explorer and Mozilla Firefox now include standard options into their browsers that tell users when RSS feeds are present on a page, and also allow users to browse directly through a feed by category.

 

Conclusion –

 

To sum up, my product will be a single RSS feed that is an amalgamation of four mini RSS feeds from BBC News, The Guardian, The Mirror, and Sky News. I will also be including features that will make this a Web 2.0 technology, such as:

·         The publication dates of the feeds, so that they are self updating

·         A GUID – so that the feed that I have created is unique

·         Category tags, so browsing through the feed is easy

·         XSL encoding, so that the need for CSS is eliminated.