Cheesetoast » tables http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.13 Is Responsive Web Design Important? http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/ http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/#comments Wed, 23 May 2012 16:32:44 +0000 http://www.cheesetoast.co.uk/?p=380 There’s a huge buzz around responsive web design at the moment. As I mentioned in my previous article, mobile web browsing is expected to overtake desktop browsing within a few years. Now designers are using responsive design to ensure their sites adapt to different devices. But is it worth jumping onto the responsive bandwagon? Is responsive design an important step in the evolution of web design or is it just a gimmick? Continue reading

The post Is Responsive Web Design Important? appeared first on Cheesetoast.

]]>
There’s a huge buzz around responsive web design at the moment. As I mentioned in my previous article, mobile web browsing is expected to overtake desktop browsing within a few years. Now designers are using responsive design to ensure their sites adapt to different devices. But is it worth jumping onto the responsive bandwagon? Is responsive design an important step in the evolution of web design or is it just a gimmick?

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” Jeffrey Veen

Responsive design makes use of flexible grids and CSS media queries to make a website that responds to varying resolutions. Although fluid layouts have been around for over a decade now, responsive design takes things a step further. Not only is it used to change the basic structure of a page but it can also be very useful for re-scaling images, text, and video.

Ironically, HTML has always been responsive. It was only when CSS popularized fixed widths that layouts became less flexible. Now CSS media queries aim to solve the problem of rigid layouts. To learn more about the subject I recommend you read this article from Smashing Magazine.

Usability Benefits

The whole point of responsive design is to improve the user experience through flexibility. The page adapts to the screen size to better suit the way the user interacts with it. Although smart phones have the ability to zoom, either by multi-touch ‘pinching’ or the double-tap, it’s not without problems. This is especially apparent when filling out forms, the process of which can be cumbersome and frustrating.

Here are some of the benefits of adopting a responsive design:

Future Proofing
As mentioned earlier, mobile browsing is set to overtake desktop browsing. To accommodate mobile users it’s important to design for smaller screens and touch based interaction. While some experts recommend developing a separate mobile-optimized site, a responsive approach is usually much less time consuming and less expensive.
Reduce Download Times
To improve download times on mobile devices designers can be use ‘adaptive images’ whereby image files can be optimized for mobile devices. Unfortunately this technique hasn’t been perfected yet, as it requires javascript that isn’t quite semantic. Luckily, those working on the issue have formed the Responsive Images Community Group (RICG) to “facilitate conversations with standards bodies and browser representatives”.
Creativity
The great thing about responsive design is that it urges designers to put more thought into what’s really important on the page. Unnecessary clutter can be scrapped and navigation elements can be made larger for mobile devices with touch screen interfaces.
Responsive Presentation
To improve usability on a site, it’s important to consider not only the device, but the user requirements and the context of use. Mobile users tend to spend less time browsing a site so it’s important to implement simple navigation and quicker conversion funnels. Responsive layout allows designers to optimize presentation for mobile users.

“Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order.” Katrien De Graeve

Not For Everyone

Although there are obvious benefits to using a responsive layout, it’s definitely not for everyone.

Aesthetics
Some designers, who put a lot of work into creating expansive, artistic layouts might not want to sacrifice their canvas for a narrower window where navigation takes center stage. Although responsive design can be used to improve UX, it can dramatically alter the visual appeal of the site. The balance between aesthetics and usability is a subject rife with debate.
Tables
It’s not just aesthetics that conflicts with responsive layouts. Tables are notoriously difficult to display well on smaller screens. Although there are some very elegant solutions to the problem, they don’t work across all browsers yet.
Time/Money
Going all-out to design for phones, tablets, desktop monitors and uber desktop monitors essentially involves designing 4 separate layouts. If you’re one of those people or organizations where time = money, this can be a major concern.

Conclusion

Although responsive design isn’t suitable for all websites, it’s definitely something to consider due to the relative ease at which it can be setup and benefits it can offer. It’s important for designers to keep up with the latest technology and responsive design is a great way to accommodate for the shift in browsing devices.

A lot of people seem to be concerned that through responsive design mobile browsers are given a stripped down version of the site. I agree that is most cases this should not be the case; mobile users shouldn’t be excluded from content. However, designers are given the opportunity to optimize the user experience by customizing aspects such as navigation, and this should be embraced.

Responsive web design is cheaper and less time consuming than developing a separate mobile-optimized website and with loads of great responsive WordPress themes out there it doesn’t take much to get setup.

Here are just a few examples of great wordpress themes that offer responsive layout:

If you have any thoughts about this post I’d love to hear about them!

Update: For an interesting discussion on Responsive Layout you can read and comment on the article “5 Reasons Why Responsive Design is Not Worth It“.

The post Is Responsive Web Design Important? appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/feed/ 2
Why Tables for Layout Are Unprofessional http://www.cheesetoast.co.uk/no-tables-for-layout/ http://www.cheesetoast.co.uk/no-tables-for-layout/#comments Sun, 18 Jul 2010 14:01:40 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=37 I was recently asked to write some HTML for a e-mail newsletter and I was forced to recall what it was like to design layout using tables (bleh!). Of course there are still some designers out there who argue that using tables for layout is just fine and that harking on about divs and the semantic web is overreacting. Admittedly, it's very quick and easy to come up the desired structure using a GUI like Dreamweaver, but it's just not good practice.
I've compiled a list of reasons why tables should NOT be used for layout. Continue reading

The post Why Tables for Layout Are Unprofessional appeared first on Cheesetoast.

]]>

I was recently asked to write some HTML for a e-mail newsletter and I was forced to recall what it was like to design layout using tables (bleh!). Of course there are still some designers out there who argue that using tables for layout is just fine and that harking on about divs and the semantic web is overreacting. Admittedly, it’s very quick and easy to come up the desired structure using a GUI like Dreamweaver, but it’s just not good practice.

I’m ashamed to admit that when I first started learning HTML I used this method for layout. I remember having to use Dreamweaver to split the code and the design view just so I could locate the correct cell. Now I prefer to write all my code by hand and to see a page that is full of nested <tr>’s and <td>’s just makes me cringe.

A few reasons NOT to use tables for layout:

Spaghetti Code
This is made even worse when the code is poorly presented and the table nestings are all over the place, making it extremely difficult to locate the cell you want. Things get really complicated when you miss a closing tag somewhere. All this mess makes it much harder to maintain the code.
Here is an example of the code required to make a simple table:

<table>
<tr>
<td>Lorum Ipsum</td>
</tr>
</table>

and here is the equivalent without a table:

<div>Lorum Ipsum</div>
Bad for collaboration
Even if you are proficient with tables for layout, and I believe there are many designers who are, most other designers do not work that way. When someone else takes a look at your project they’ll probably want to steer well clear of it.
Increased file size
With all that extra code required to display tables the file size increases, thereby slowing down the loading of the page. It may not seem like a lot at the time but it all adds up.
Bad for SEO
With more code to inspect, search engines take longer to get to the content they are searching for. The higher the ratio of markup to content, the more your ranking will suffer. As demonstrated in the above code snippet, divs generally use less markup than tables. With HTML5 becoming mainstream, it would be wise to take advantage of new elements such as <header> and <article>. This is where the search engines will be looking for relevant content.

The post Why Tables for Layout Are Unprofessional appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/no-tables-for-layout/feed/ 0
Automatically Generate a Table of Contents with JQuery http://www.cheesetoast.co.uk/automatically-generate-table-of-contents-jquery/ http://www.cheesetoast.co.uk/automatically-generate-table-of-contents-jquery/#comments Sat, 03 Jul 2010 22:57:39 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=30 I'm going to walk through a little JQuery script that automatically generates a table of contents at the top of the page. This is useful when you have content arranged under several sub-headers (a typical Wikipedia page is a good example) and want to have quick links to each section. Continue reading

The post Automatically Generate a Table of Contents with JQuery appeared first on Cheesetoast.

]]>
I’m going to walk through a short JQuery script that automatically generates a table of contents at the top of the page. This is useful when you have content arranged under several sub-headers (a typical Wikipedia page is a good example) and want to have quick links to each section.

This script will use JQuery to search through the a page for H2 tags and add an anchor to each one so that the table of contents can jump to it. Then it adds the table of contents in the form of a list at the top of the page, after the main header.

First of all we’re going to set up some variables:

$(“document”).ready(function(){

var header_type = “h2″;
var number_of_headers = 2;
var counter = 0;
var table_of_contents = $(“<ul id=’table_of_contents’>”);

// This is the HTML code that will eventually become our table of contents.

You can change these variables to suit your needs. For example you could change the header type to H3. The number_of_headers variable is the minimum number of headers allowed on the page before the table of contents if generated (after all, you probably don’t want a table of contents when there are only one or two sections).

Next comes the ‘if’ statement:

if($(header_type).size() > number_of_headers) {

This uses the size() function which basically counts to see if there are more than 2 (or whatever you set as ‘number_of_headers’) of the header tags on the page, since a table of contents is not necessary when there’s only one or two headers. One issue with this is that you might have a webpage shell that contains other H2 tags, as menu headers for example. To get around this you could perhaps use a header tag that is isn’t in use OR you could give your H2 tags a class and use that to narrow down the search.

Then we want to use JQuery to select all the H2 tags and iterate through them, like so:

$(header_type).each(function() {

Once these are selected, we perform the following:

$(this).html(“<a name=’bookmark” + counter + “‘></a>” + $(this).html());

table_of_contents.append($(“<li><a href=’#bookmark” + counter++ + “‘> ”
+ $(this).text() + “</a></li>”));

} );    //  Close the bracket for the current function.

First of all we take the HTML code for the H2 tag and place an anchor before it. This anchor marks the spot that the user is taken to when they click on the table of contents. The ‘counter’ variable is used to give the anchor name a unique ID.

The second line appends the HTML code stored in the ‘table_of_contents’ variable (the unordered list code) by adding some list items to it. Inside these list items we place a link to the anchors we just placed in the previous line of code. We also increment the counter so that the next ID is unique. Then we just use the text of the header as the text for the link and close our tags (you don’t need to worry about closing the <ul> tag, since JQuery takes care of this for you).

The final step is to add the ‘table_of_contents’ code we’ve just assembled to the page. For this example we are assuming that we want the table of contents page to come right after the main heading. We can use a selector to place the code after the first H1 tag on the page. Alternatively, you could instead create a div on the page with a ID and tell the JQuery to plonk the code right inside that instead.

$(“h1:first”).after(table_of_contents);

Here is the code all together:

$(“document”).ready(function(){

var header_type = “h2″;
var number_of_headers = 2;
var counter = 0;
var table_of_contents = $(“<ul id=’table_of_contents’>”);

if($(header_type).size() > number_of_headers) {

$(header_type).each(function(){

$(this).html(“<a name=’bookmark” + counter + “‘></a>” + $(this).html());

table_of_contents.append($(“<li><a href=’#bookmark” + counter++ + “‘> ”
+ $(this).text() + “</a></li>”));

});

$(“h1:first”).after(table_of_contents);

}
})

If you have any ideas about how to improve this little script or even just points that you’d like to make about it, please leave a comment.

Update [23rd March, 2012]: I found a great JQuery plugin for table of contents simply called TOC. It’s easy to setup and customize. It also comes with nice smooth scrolling.

The post Automatically Generate a Table of Contents with JQuery appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/automatically-generate-table-of-contents-jquery/feed/ 0
JQuery Tablesorter http://www.cheesetoast.co.uk/jquery-tablesorter/ http://www.cheesetoast.co.uk/jquery-tablesorter/#comments Fri, 02 Jul 2010 22:55:10 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=27 Want to improve the functionality of your HTML tables? Tablesorter is "a JQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes". It is also cross browser friendly, working on IE6+. Continue reading

The post JQuery Tablesorter appeared first on Cheesetoast.

]]>

Want to improve the functionality of your HTML tables? Tablesorter is “a JQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes”. It is also cross browser friendly, working on IE6+.

To set it up you’ll need to download and include the tablesorter js file (along with a link to the JQuery library). Then simply give your table an id tag like so: <table id=”my_table”> and remember to include both THEAD and TBODY tags. Finally, add the javascipt in your page head:

$(document).ready(function(){

$(‘#my_table’).tablesorter();

}

To download tablesorter and to read the documentation on it, visit the tablesorter website.

 

The post JQuery Tablesorter appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/jquery-tablesorter/feed/ 0