I’ve been doing web development the last weeks and I think web development is nice except for the design part. One of the things that is most confusing is screen size.
In Java, and many other languages, if you set an element to a specific position it stays there no matter the screen size.
However I find that in web pages, if I make my CSS and HTML to put something somewhere turns out that it fits into my screen (but only in my screen…) and in other screen sizes the position is off.
I have two <div>, wrap and content, and the look like this in my screen:
|[ [ ] ]|
Checking this in higher screen sizes looks like this:
|[ [ ] ]|
On smaller screen sizes, this happens:
|[ [ | ] ]
Is there like a WYSIWYG editor where we can drag our components and make it fit in any browser and screen size?
I’ve tried:
- Aptana
- Dreamweaver
- Komposer
and still I get the best results coding by hand with notepad++
Please enlighten me with a piece of software, a book or a magic trick.
WYSIWYG = evil, because mostly it’s WYSIMNWYG – what you see is mostly not what you get, also the code of most of these editors is really horrible.
Instead, try a layout framework (like 960 or Twitter Bootstrap– just examples, there are many others) to avoid a lot of trouble. Skeleton might be suited for you too, it’s made to create responsive layouts (the problem you are describing). Alternatively you might want to try LESS or SASS which greatly extend your possibilities of writing css.
I write all my code by hand with N++ too.