Tables versus divs in mobile websites - mobile-phones

I'm totally confused on this matter, some say use tables and others say it's a bad practice to make use of tables and div tags should rather be used. What is the correct way when developing sites for mobile devices .mobi

You should use tables for presenting tabular data, not for layout. Most modern Web browsers on mobile phones (e.g. Mobile Safari on the iPhone) are quite capable of properly rendering websites that use CSS and semantic markup appropriately.

Yes, theory says that you should use tables for presenting tabular data, not for layout. But most of web browsers in the market do not properly render complex layouts with floating divs, advanced CSS, etc.
Things are changing quickly, and as other people have already said, most modern Web browsers on mobile (smart)phones (iPhone, Android...) come with a great HTML/CSS/Javascript support.
If you only have these devices in mind, you can go with DIV/CSS layouts, as it is the right choice from a semantic point of view. But if you want to cover a wide range of devices, use tables as you'll guarantee your pages are going to render properly in more devices.

The important aspect to consider is the difference between data & its actual layout on the screen.
Typically, tabular data should be presented using tables. For example, consider a company balance sheet as an example of tabular data which can be shown using HTML tables.
But, if you need to show normal content (which is not tabular in nature) in rows & columns, there are other alternatives like using DIV & SPAN tags and a bit of CSS to position & style the content to make it look like a tabular layout. A typical example of such a layout could be a news article shown on a newspaper. While the layout is in rows & columns, the news content itself is non-tabular.
There are tons of articles out there which debate why this is a good practice.
Given your case, I would recommend stick to normal DIV-based structure with CSS-based styling to give the desired effect & use TABLEs for tabular data.
HTH.

Related

Classic form to XPAGES

I have a classic lotus notes form with 1800 fields and 7 tab,
Will the performance improvement if i split the form in 7 different form and then bind to the xpages
or
if i directly bind the form to the xpages will there be any performance impact?
thanks
That's a "try that with your RDBMS" type of situation.
Splitting forms will not help you, XPages doesn't care too much about how many data sources are used if the number of bindings is high (and you have a ratio of still > 200 for many forms) --- and you actually don't bind to a form, you bind to a document. The form is only a "design time convenience".
Making some wild guesses I would presume that a lot of the fields are repeating fields (like LineItem_1 LineItem_2 LineItem_3 ) instead of multi-value fields.
Moving forward you need to make a basic choice:
Is your data format fixed since all views, reports, import/export routines etc. rely on them .or. can you refactor the data model (based on your question I would presume the former).
If it is fixed I would look to encapsulate the document into a managed bean that provides collections of data for the repeating sets of fields and repeat controls to show the number of entries you actually need (The classic way would be to have different hide whens in every cell of the table hosting the fields). This way you have much less bindings to look after.
A very basic idea how to have a dynamic table can be found in Excercise 23 of the IBM XPages tutorial
Disclaimer: Tim Clark and I wrote that.
You also might consider using only that parts of the document the specific user needs that moment.
For this kind of situation, As of my concern, You have a form with seven tabs and 1800 fields. But it is too complex. But however we split a form into seven, each form will have 260 fields. now also code will become complex.
But my suggestion is that you can dynamically change the binding data in xpages. If you feel very complex to redesign the form then you follow the above idea. Otherwise change the design and make a nice look-up in xpages.

Any flexible CMS perfect for restaurant website’s back-end?

I’m building a website for a restaurant which consists of several static pages like ‘About us’ and editable menu.
I need a CMS flexible enough to be able to add items individually (by individually, I mean adding items doesn’t equal pasting a HTML list of n products into another static page).
Each item should contain its name, description, price and category. The list of added items should be displayed using templates the way I want them to.
Can you suggest any lightweight CMS which can provide similar conditions?
There are tons of options for simple page creation. Have you considered just using one of the many free website builders out there? Then you don't even have to worry about finding hosting, just make it happen quickly and easily with one of them. For instance, take a look at Weebly (review here) or Wix. Both allow for free pages and both are incredibly easy to use. Squarespace (review here) is another solid option (and one of my favorites) but charges a small fee (which I personally think is worth it).
Weebly allows for some slick drag and drop of page elements into place as does Wix. They are what I would classify as the easiest of the batch while Squarespace provides for an excellent user interface experience.
Other options if you'd prefer something hosted on your own would depend on your experience level. I am a huge fan of Processwire and ImpressPages has come along nicely and is great little CMS too.
These are exceptions to the typical Top Three that everyone tends to recommend I know but I like to spread the word about other projects instead of the usual ones.
Cheers!
Mike
Sounds like a job for Wordpress 3.0 plus Custom Post Types UI + Verve Meta Boxes plugins. Wordpress will handle the static pages, the other two plugins will allow you to make a Menu Item post type with custom fields.
It is not exactly lightweight, but you could do it with Drupal. You can define you own content type "product", use the CCK module to add your fields (price, ...) and use the Views module to display it how you want.
Drupal has a relatively steep learning curve, so it may be overkill for this project. It is definitely flexible enough for this, though.

How does Nike's website do this Flash effect when the user selects a choice

I was wondering how does Nike website make the change you can see when selecting a color or a sole. At first I thought they were only using images and when the user picked a color you just replaced that part, but when I selected a different sole I noticed it didn't changed like an image it looked a bit more as if it was being rendered. Does anybody happens to know how this is made? Or where can I get further info about making this effect :)?
It's hard to know for sure, but my guess would be that they're using a rendering service similar to that provided by Adobe's Scene7.
It's a product that is used to colorize/customize a base product image based on user choices.
If you're interested in using the service, I'd suggest signing up for their weekly webinar. I attended one a while back and was very impressed with their offering. They showed the Converse site (which had functionality almost identical functionality to the Nike site) as a demo.
A lot of these tools are built out in Flash using a variety of techniques:
1) You can use Flash's BitmapData object to directly shift the hues of the pixels in your item. This is probably the simplest technique but often limits you to simple color transformations.
2) You can pre-render transparent PNG's (or photos, I guess) containing the various textures you would want to show on your object (for instance patterns or textures) and have them dynamically added to your stage at runtime. This, I think, offers the highest fidelity but means you need all of your items rendered upfront.
3) You can create 3D collada files and load them via a library like Papervision3D. Then dynamically change the texture at runtime. This is the most memory intensive technique and tends to result in far worse fidelity, but for that you get a full 3D object that you can view in space.
I'm sure there are other techniques but those are the top 3 I can think of. I hope that helps!

Geopraphic Charting controls for Websites

I need to create dash boards showing geographic regions and show sales, hot spots etc on a map.
What have you tried and what do you recommend?
I like the look of both Fusion Charts and Dundas
I will be using asp.net for the site but any control's or library's including flash or javascript are good options.
Most important is the look and feel followed by functionality in South Africa.
After my last post looking for commercial mapping solutions, it looks like they are very expensive and now I am investigating alternatives to full mapping solutions.
thanks
Have a look at http://www.geoext.org/examples.html#examples a JavaScript library based opn top of OpenLayers and ExtJS.
You can limit the bounds of your map to different regions, have several pop-up maps etc.
Have a look at the OpenLayers API on what datasources you can use. GeoJSON or KML are probably easiest if you want to avoid server-side map serving software.

Web Interfaces: What is a good way to display many static fields?

My web applications have pages that display many static fields.
I know that poor layout invariably leads to information overload and poor readability.
My Question:
Are there any best-practices or heuristics for laying out a screen that contains many static fields?
Ordinarily, I would reference Bill Scott and Theresa Neil's excellent book, but I can't seem to find any guidance for this issue.
Here are some guidelines that I'm inclined to follow:
Group related fields.
Position the major (or parent) fields towards the top and the left. Position the minor (or child) fields towards the bottom and right.
Don't feel obliged to fill every pixel. Consider white space if it will improve readability.
Favor progressive disclosure wherever possible.
Consider an accordion control.
Perhaps a Details on Demand approach would work well. Ask yourself which data are absolutely and immediately relevant to the user and group those, while hiding the other data. You can always provide an 'Expand' link or control that would allow a user to view the details if desired.
(It's good to see that you're looking at interface design patterns. They are often overlooked!)
I work on HR software and have faced this problem many times. One thing that we keep seeing in feedback when we introduce collapse controls or any progressive disclosure pattern really is that our users don't like the way those types of "web 2.0" (their words lol) pages don't print out. So just a reminder if your user base still insists on printing large pages of data include a print media stylesheet.
Depending on how large your set of data is I'd seriously consider a some search functionality or a sorting mechanism. Many times when the data set is large different users have different priorities and allowing customization is the only way to satisfy a wide audience.
I think you pretty much answered your own question, especially the grouping of important fields tied to progressive disclosure.

Resources