Smashing Magazine

There's numerous reasons why this is a bad idea.

There's a difference between a fixed width layout and an absolute positioned layout - the fixed width layout can adapt.

The biggest issue with absolute positioned layouts (as with design for print) is they can only scale, but not adapt to the various resolutions and pixel densities we encounter on clients viewing websites.

Web design is first most the design of a pattern of design in order to achieve consistency via reuse. If everything has fixed dimensions; it wouldn't be very reusable.

On the topic of using JavaScript to perform the layout:

1. JavaScript performance in newer browsers are pretty good, but ranging from extremely to pretty bad on older browsers (don't forget the mobiles!)

2. You'll have to resort to using CSS anyway for specific layouts (ex. keeping an element always visible) as repositioning an element on streaming events using JavaScript tends to be really slow.

3. The amount of reuse you'll get from even writing a decent interface for layout functions will be pretty low.

4. Behavior of CSS using a reset is more consistent than JavaScript implementations. You'll probably need to normalize between different browser versions - that means using something like jQuery, Moo Tools etc. which adds a hefty payload.

5. Waiting for your JavaScript to be downloaded and interpreted to reposition elements (after the DOM has already rendered) will be an ugly sight.

You should invest time in pre-processors such as…

Thanks Chris, it's great to see people (pre-)launch. I think you deserve some honest feedback.

You absolutely must learn to code. If you're running a start-up out the back of your bedroom, you need to push down costs -- and push them down hard. That means cracking open a jar of coffee and doing everything yourself -- including the coding.

Thankfully, at this point you only need a professional(-ish) looking front-end. As it's a hardware product there's no obvious/pressing/necessary need for interactivity. So you need to learn the basics of HTML, CSS and JS. This isn't as difficult as it may first seem/appear -- a good week/fortnight should get you up to speed on the basics. Or, even a productive night.

Then you should deploy and customize a pre-existing framework, i.e., Bootstrap. There's a tonne of interesting content hanging around about how to adapt Bootstrap to your needs.[1] These days there are many tools for novices to get to grips with contemporary trends quickly and easily.

Why do you need to do this? One, because at the moment no-one will take you seriously -- at all. And I mean that in the nicest way possible. There's no use getting on the phone/networking/reaching out if your product is effectively pre-Internet. A non-website sets off serious, serious alarm bells. You're wasting your time. Second, as no-one will take you seriously, you're funneling your ad revenue down the drain.

It's time get your head down, learn and crack on. Don't hesitate to reach…

From Addy @ - http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/ ::

I want something flexible which offers a minimalist solution to separating concerns in my application. It should support a persistence layer and RESTful sync, models, views (with controllers), event-driven communication, templating and routing. It should be imperative, allowing one to update the View when a model changes. I’d like some decisions about the architecture left up to me. Ideally, many large companies have used the solution to build non-trivial applications. As I may be building something complex, I’d like there to be an active extension community around the framework that have already tried addressing larger problems (Marionette, Chaplin, Aura, Thorax). Ideally, there are also scaffolding tools (grunt-bbb, brunch) available for the solution. Use Backbone.js.

I want something declarative that uses the View to derive behavior. It focuses on achieving this through custom HTML tags and components that specify your application intentions. It should support being easily testable, URL management (routing) and a separation of concerns through a variation of MVC. It takes a different approach to most frameworks, providing a HTML compiler for creating your own DSL in HTML. It may be inspired by upcoming Web platform features such as Web Components and also has its own scaffolding tools available (angular-seed). Use AngularJS.

The reasons for this are a couple I can think of:

1. Large web applications will eventually demand this of you to break the large solution into smaller chunks (components/modules).

See this methodology: http://coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/

SASS will help you follow whatever standard/methodology your team may be following.

2. And having multiple files will ease development on a large team. Having multiple frontend developers checking in code, it helps to organize, and alleviate one developer stepping on another when checking in SASS files into source control. No conflicts, if developer A is working on the footer, and developer B is working on the header, which are separate SASS files.

I don't agree that it slows down refactoring, and would argue it speeds it up. In the end, the multiple SASS files will probably (depending on how you do it, and your situation), compile down into one file. SASS also has options that allow you to say what the output looks like too (nested, expanded, compressed).

A separate font file is required for every style and weight of a typeface that you want to use. For example, to use four unique styles of a typeface on a site (say Regular, Italic, Bold, and Bold Italic), you would need to import four font files (ClearSans-Regular, ClearSans-Italic, ClearSans-Bold, ClearSans-BoldItalic).

If you give a chunk of type a style or weight that you haven't loaded the appropriate font file for, browsers will add weight to or slant the text themselves. ("faux-bold", "faux-italic"). This gives you ugly, rough, less readable text that counteracts the primary reasons to use a web font in the first place. Default CSS styles (H1 automatically adding font-weight: bold;) can also cause this in some cases. [See link]

There's two main (maybe three) approaches to implementing them correctly, Laura Franz does a good job of describing them here: http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/

>Regardless of whether you use bootstrap or not you are always going to be specifying CSS classes which describe the presentation of elements, not sure how else it can be done?

http://coding.smashingmagazine.com/2012/06/19/classes-where-were-going-we-dont-need-classes/

>Screen reader software will generally ignore anything that it doesn't understand or deem irrelevant.

Yes, that's the problem. Putting useful information in places where software has no way to understand it.

>Whenever I have tried screen readers they will say "ok, there's 3 divs with content here. Let's read them out one at a time or just read the headings and wait for the user to select one".

And if you had the appropriate tag instead of a meaningless div, it would know what to do. That's the point. Google for semantic html.