Ok, A Mobile Friendly Website should be very short and focus on the task, so it wont need to show the headers as in Desktop Website.
Here is What I want to design.
When user open mydomain.com in Mobile devices like Smartphone or Tablet. They Will see
Email: Pass: Login Registration Explanation About
When they CLick Login they will go to a page that lists all the products, the Page Should has "Home" link the Back button
Home Back Product 1 , some other info Product 2 , some other info Product 3 , some other info ......
When user clicks on a product, it will show the details of the products
Home Back This is Product 1 Detail info of product 1..
If user hits "Back" button then it will go back to the previous page (ie, the list of products page).
Note that: in the home page, we also have "Registration", "Explanation" & "About" Buttons, but we will never show these buttons in any other pages except the home page.
So, my question is:
Is there any Gwt Layout panel that can help me to achieve that Simple Design for Mobile Friendly Website?
The only 1 I can see is the TabLayoutPanel, but the headers are always appear in all pages.
What about "StackLayoutPanel"? How it look like? & is it good for Mobile Website?
None of the widgets included with GWT are primary thought for mobile, so I recommend that you use another library like m-gwt, gwt-mobile, or touchkit.
Anyway there is a very simple mobile web example application in the GWT trunk which you can use as reference. They use DeckLayoutPanel since you can add multiple views and let it to animate between them. You can try this live demo from a mobile device (you can append formfactor=mobile/tablet/desktop to switch view implementations). The demo is very old, without using modern CSS3, but helpful.
So, if your application is very simple use DeckLayoutPanel, but if it's going to getting bigger, it's better to consider a mobile specific library.