i have quite a few questions. my current site is really setup for standard computer use, it is very cumbersome for use with a phone or tablet so i am wanting to redo my site. 1. can a single site and url have coding within it for the browser to know if the application is for a tablet, phone or computer? how complex is this coding? 2. are tables still used today to create a site and can you use tables to create the site in the different formats or is it worthwhile to learn css to do it? I am very familar with tables and it is the easiest way for me to create a site, however; know that they are being faded out. any suggestions would be awesome!
1. Yes. Not too complex. There are basic tutorials available online. 2. Don't use tables. Learn CSS. It's worth it. Tables are almost obsolete now.
If you're using the latest version then yes, it's good enough to use for building a site. Of course make sure you're taking into account the fact that you need to make it suitable for both mobile and web users...
Creating a mobile friendly site is not an easy task especially if you don't know CSS and scripting languages to handle things for different user agents. Tables should be used only for displaying tabular data, not to define the structure of a web page. So, the best thing for you would be to start learning CSS.
You can use responsive CSS to make your site working as per the device, these days responsive design demand is growing day by day, because its best and easy option.
No offense to the rest of you, but people are DUMBER for having seen some of these responses. We've got one dumbass pointing at Dreamweaver as if it has anything to do with designing for multiple targets (unless you restrict yourself to code view in which case you just dropped a bunch of money on a over-glorified notepad replacement), people calling it "not easy", someone else pointing at the code train wreck known as bootstrap as if tripling the code size and using presentational classes somehow makes it easier... What you are asking about is now called 'responsive layout' -- and it's not just about mobile, it's about going back to the original purpose of HTML, device neutral delivery of content. Which is why the FIRST thing one should do for any page is create the content (or at least a reasonable facsimile), mark it up semantically, use CSS bend that markup to your will for all your layoutS (yes, PLURAL) for each of the different media types you want to customize, and then at the end create any extra goofy graphics you want to hang on the layout... this of course is why the idiots sitting around spanking it on the screen in photoshop before they even have HTML are increasingly left behind; they'd have gone the way of the dodo ages ago if people were more concerned with functionality than flashy graphical nonsense that just gets in the way... Also why the true success stories of the Internet like google, amazon, ebay, facebook, twitter -- NOT exactly a visual tour de force. Now you might be thinking "what is semantic markup?" -- it's using the HTML tags to say what things ARE, NOT WHAT THEY LOOK LIKE!!! -- this is where 99% of people starting out screw up, and where even a lot of seasoned developers need to do the world a favor, back the **** away from the keyboard, until they have the knowledge and understanding to be writing HTML in the first place. As I've said a million times, if you are choosing your tags based on their default appearance, you're choosing the wrong tags for the wrong reasons. An example of this is heading tags... numbered headings are SIMPLE, so naturally nobody seems to know how to use them properly, picks their 'level' almost at random, because some SEO voodoo dipshit told them to use them wrong, or they just want the text bigger. NONE of which is correct. A H1 should be the heading under which all other headings on the page mark the start of a subsection... That's why usually the most correct candidate to be the H1 is the site title and logo. An H2 indicates the start of a subsection of the H1 -- which is why the ignorant twits who use a H2 for a tagline don't know enough HTML to be opening their mouth on the subject... H3's are the start of subsections of the H2, and so on and so forth... This is why skipping over levels (like a H5 before the H1, H4 with no H3 between it and the H2 above it) is improper/broken... As tools like the web developer extension for FF will nicely inform you under "information -> document outline" and as will crop up as nagivational errors in browsers that actually give a flying purple fish about accessibility and bothered implementing heading navigation (like Opera)... Of course heading navigation is why HTML 5's 'NAV' tag is pointless idiotic bloat... or would be if browser makers finished implementing HTML 4 properly...... and when a heading is unwanted/undesired but you have a topic change? That's HR's job... as in print a horizontal rule indicates a change in topic. Which is another key of semantics some people miss -- some of the 'presentational' tags like HR, B and I have semantic meanings indicating what the element would be without having the need for another 90+ tags... like a book title, company name, etc... In any case (rant off), once you have that semantic markup, you go in and add semantically neutral wrappers as hooks to apply presentation, without saying WHAT that presentation is -- though whenever possible you should style the semantic tags BEFORE throwing in any extra DIV or SPAN... the same should be done with any classes and ID's you use, saying what things ARE, NOT WHAT THEY LOOK LIKE! -- I CANNOT overemphasize that saying what things look like has NO BUSINESS in your HTML!!! Once that's done, I usually use the CSS to make my desktop semi-fluid layout. I use semi-fluid and fluid design elements so the content can be auto-adjusted to the target device. Semi-fluid means having a maximum width set so that lines don't get too long to use... From there, you use media queries to either enhance or degrade the page (you can go either way!) ... you can do media queries in the markup as part of your MEDIA target, in theory preventing unused style from being sent to systems that won't use it: <link type="text/css" rel="stylesheet" href="/theme/smallScreen.css" media="screen and (max-width:751px)" /> Code (markup): or you can inline them in the CSS file if you're not using too many of them or too much code: @media (max-width:751px) { #sidebar { float:none; } } Code (markup): When the width is less than that max-width value, the 'special' CSS is applied. You can use it to pull presentational images that just don't work on smaller displays, change two column layouts into one column when it's small or even expand it to three columns on larger displays... and because you used semantic markup and didn't say in the markup what anything should look like, pretty much EVERY aspect of the page can be customized for each of the different targets, be it screen, screen at certain resolutions, print, handheld... etc, etc.. For anyone who's done fluid layouts with semantic markup, the entire concept of "Responsive layout" is just the next logical step and really simple... But, if all you've ever done is crappy little stripe fixed widths based on what some PSD jocked pulled out of their backside and had the cojones to call a web design, using presentational outdated late '90's style HTML 3.2 with a 4 tranny on it, use idiotic bull like HTML/CSS 'frameworks' or are under the nutjob delusion that you should be using a WYSIWYG to build a website -- then I might as well be talking an alien language. Just to show what I mean, let's use two of my sites as an example -- both of which are based on the same "poor man's" content management under the hood and pretty much share the same markup. http://www.ewiusb.com/ http://www.deathshadow.com/ Semi-fluid design with a maximum width, the fonts are dynamic (em) instead of fixed (px) so it automatically adjusts to the users preferences without having to dive for the zoom. That maximum width is based on the font-size so that when the fonts are larger the layout adjusts. Because it's fluid if you zoom it is unlikely you would ever need to scroll sideways until you hit REALLY large settings... and that's BEFORE we even talk the media queries for mobile. To see what it does for mobile, just make your window narrower -- and poof, it goes from a two column layout to a one column layout. You look under the hood, it's semantic markup, separation of presentation from content, a few semantically neutral tags to let me adjust the content as needed... The approach used to build it also means it degrades gracefully should things like images, CSS or scripting be unavailable, because I did semantic markup FIRST as functional (though very plain) websites, then progressively enhanced them.