I realise this may be a common question, or at least, similar questions may be common but I am a bit stuck.
I currently own a copy of Serif WebPlus X4 which I find very easy to use. I am also trying Dreamweaver CS5 trial having bought ‘the missing manual’ book to assist me.
My questions and thoughts are:
I like Serif as it’s easy to use BUT:
Will using serif hinder my site’s search engine ranking? I don’t think the serif program uses CSS in the normal way (not that I would know ‘normal’ from any other way but the code looks different to anything Dreamweaver creates)
I am a little wary of tying myself to one program. The Serif program uses its own single file format and you then export the site when finished.
It seems Dreamweaver is the industry standard but for a complete novice it is so unintuitive. I mean, in serif I can drag and drop elements on the page. In dreamweaver I can’t even edit a template without everything going haywire and moving. My question about DW is, is it worth persevering with it and eventually buying it (can’t really afford it though) or should I stick with Serif’s WebPlus? or do you know of anything better???
I’ve never come across Serif (but then I tend to steer clear of editors and hand-code all pages as far as possible). If you want to try creating a page in Serif and posting a link to it, we can have a look at the output and see whether it is likely to cause you problems for SEO, accessibility or usability.
Just so you know, if you want to “go pro” your best bet is to scrape drag-and-drop what-you-see-is-what-you-get (WYISYG) editors and learn to hand code. It can be tough at first, but no program on the market gives you the level of control that hand coding does.
Maybe you could have a look, especially at the code, and see if Serif produces garbage or is it acceptable. The site design was entirely up to my Father. I just made it to his wishes.
Personally, I hope you will say Serif’s output is perfectly OK as I do find it very easy to use. I do take on board comments that hand coding is the correct way to do things.
On that subject, could someone please explain why it is so important for the code to be a particular way? I mean, if a WYSIWYG app produces a site that looks and works as desired isn’t that OK? I assume a site with overly complex and bloated code may load a little slower but in this broadband age is that still an issue.
If you look at the source, you’ll see a billion <div>s. Each one of these has a style attribute which has a whole bunch of stuff crammed into it. Also, each one of those are absolutely positioned (instead of laid out with regards to the flow of the document).
Those right there are probably 3 of the biggest “bad things” that WYSIWYG editors cause.
The reason the first is bad is because the website tells machines nothing about the page. This is very bad for SEO. Also, the excessive number of divs makes your pages “weight” (have a file size) much larger than they should, which causes it to load slower (which now also affects search results).
The reason the second is bad is because it also makes each page weight a lot. Normally you want to move all of that CSS into a separate document called a style sheet. This style sheet can then be shared throughout your entire website, making it load much faster (since it only has to load once per site, instead of once per page).
The last is generally a problem for a number of reasons. Absolute positioning everything has a number of potential downfalls and can cause all kinds of tricky catches in different browsers. To top it off, absolute positioning everything adds a LOT of CSS, which makes your page heavier again.
Even in this “broadband age” websites being slow is still a serious issue. There are reports out that say a page that takes anywhere from 5 - 8 seconds to load is “too long” and that people will leave the site before they even view it. Additionally, with recent changes in how Google (and possibly other search engines) works, it factors page load speeds into it’s equation when presenting search results. Slower page, lower results. Also, not everyone has broadband. I know a number of people that can’t get high speed internet simply because of where they live. Additionally, in many developing countries (even wealthy ones like the middle east), the internet is still terribly slow.
Thanks samanime for the quick reply. Looks like Serif sucks then
I am not too upset about that as it will encourage me to learn the correct way of doing things. I just hope i can find the time and have the mental capacity to learn it all. I have just looked at your Xazure site and I see that the code is completely different to Serif’s efforts. I will look at your HTML lessons too which I hope will help.
Can you give any advice on how or where to start when learning from scratch? Any books you can recommend?
Do you use something like notetab for the coding? Should I try to learn CSS at this early stage or just standard HTML to get a grounding?
My advice for learning from scratch: practice practice practice. Like I said, I’ve been coding for a long time, and my code is still evolving. I pick up a new tip here and a new trick there, implement some of them and throw others away as useless or overly complicated. There isn’t a magic bullet, it just takes time.
I personally use Dreamweaver 99% of the time. HOWEVER, I only use the code view (never the WYSIWYG “Design” view). I use it because it has really good project management tools and allows me to automatically upload when I save my file. Komodo Edit is my other favorite, which I use in Linux environments (though it’s cross-platform). It’s also free (unlike the paid for “Komodo” by the same company): Komodo Edit is a Free Open Source Editor for Perl, Python, Tcl, PHP, Ruby & Javascript
I would start on CSS soon, but not too soon. You need to understand HTML in order to make use of CSS, but you need CSS in order to make stuff look pretty.
I’d get a good grasp on the following HTML elements, then start with CSS: p, h1 through h6, div, span, strong, em, ul, ol, li, a, img. Those are the most common elements and you can build a reasonably decent site with just those elements (though you should learn to add more semantic ones like blockquote, cite, abbr, etc as you go).
Then you’ll want to focus in on the basic CSS properties: background, color, position, display, width, height, padding, margin, font, line-height, text-decoration. With just those you can build a pretty decent site, and then pick up more and more as you go along.
If you’re looking at my site, I haven’t gotten all of the content ported over from my other site for the “Lessons” section, but it should be there in fairly short order. Also feel free to contact me directly (contact info on my site) if you want more in-depth help (of course, you can always post on Sitepoint as well… it’s why it’s here ;)).
Thank you samanime for your time and kind offer of further assitance. I have just installed Komodo edit. Now I just have to figure out what to actually type.
I will be back on this forum as soon as I get stuck. (Probably about 10 mins).
One is accuracy and consistency. There are, at the last count, about 14 squillion different combinations of browser/operating system/device available. If you’re really diligent, you might check your site in as many as half a dozen of these. Just because your site works as you intended in some browsers, doesn’t mean that it will work as intended in all browsers. Now, there’s pretty much no way to totally guarantee that a site will work in absolutely every possible browser setup, but if you have got valid and well-written code, there’s a better chance that it will work as you want it to.
The other is speed and performance. Yes, most people sat at PCs have broadband and enough computing power to cope with high bandwidth and memory intensive sites. But not every does. There are still people using dial-up connections, or who don’t have a good broadband connection. (At the weekend, I was using a n old laptop and wi-fi on a train, and it was so slow that sites such as Facebook were virtually unusable, because there is so much data being pushed down the line). Plenty more people are browsing the web on their mobile phones, which typically have slower connections, and less processing power. It isn’t just that a site with bloated code takes longer to download, but also that even once the site has loaded, it can make it sluggish when used on slower devices, and that really turns people off.
My advice is to get in to code rather then depending on these software. This will help you in understanding markup and you can easily master any software like DW.
Welcome to the SitePoint Community Forums! I wonder how you found out about this place…? It’s nice to have a new person who’s just starting their adventure in the Web design / development industry. You’re venturing out in to a sector of the IT industry that could possibly be the most exciting thing to happen in the industry, and at just the right time too.
I agree with the others who have posted in this thread, but I’d just like to add a few things of my own as I’m sure it’ll help. The more responses the better, right?
From the looks of the Website code developed through Serif - Yes, it will hinder your Websites search engine ranking. However, it’s important for me to add that your search engine ranking won’t be determined solely from the code developed by using Serif, it will just be a part of a few different factors that will hinder your Websites search engine ranking. The code behind a Website is an important aspect though.
I don’t blame you, I would be too. The beauty of developing a Website using Web standard languages such as HTML and CSS is that you can use them in almost any text editor or Website authoring application, so you don’t need to be tied down to any application. I actually strictly use Windows Notepad because it loads up instantly and I can begin my development immediately (although it doesn’t have some nice features such as syntax highlighting, etc.) and the development of the Website is down to me, without anything getting in the way.
However, I know that I can develop my Website in Expression Web, Adobe Dreamweaver, Komodo Edit, Notepad++, and a whole load of other applications. I just choose to stick with Windows Notepad as a preference, and of course it comes built-in to Microsoft Windows operating systems, so there is no additional cost for me to even begin developing Websites.
It’s funny you should say that as Adobe Dreamweaver is touted as the industry standard…For novice Web designers / developers. Most professional Web developers will not use Dreamweaver and choose instead a pure text editor with additional features to help them. There are professional Web developers that use Dreamweaver because it is their preference, but I wouldn’t agree that it is an industry standard. When I first downloaded Dreamweaver, an illegal copy I admit, I didn’t have a clue what I was doing, I was pressing buttons here and there trying to figure out what it does, but it didn’t help me out. I know how to use Dreamweaver today, but I no longer have a copy of it and I certainly wouldn’t buy a copy for the price tag, nor would I recommend you buy it, although from your experience, I don’t think you will.
Do not feel that you should use or buy a copy of Dreamweaver because you believe or have been told that it is the industry standard. I encourage you to ignore that statement. Instead, go with what you feel will be the best fit for yourself, and for your future in this industry.
Hand coding Websites in a text editor similar to that of Windows Notepad is the best option, although you can use other much more advanced text editors, such as Notepad++ which will be very helpful to you, especially in the beginning.
I personally recommend that, if you’re using a Microsoft Windows OS, you open Windows Notepad and start developing a few plain HTML Web pages. Understand the importance of the markup language and how it works. It’s perfectly acceptable to have plain-jane Web pages as long as the content appears in a manner in which the audience can view and access it. Then open another instance of Windows Notepad and start creating a cascading style sheets file. Link it up in the relevant Web pages and you’ll then be able to understand the power of CSS and how it is just a layer on top of the HTML files.
I’ve been a fan of DW for ages now, I jumped on board when it was v4 ultradev. Its a great editor & from what I have seen, its one of the most developed “lived in” tools on the market. There is a lot too it, but I feel its worth taking the time to learn. The most powerful apps tend to be the ones with a learning curve. It can handle such a wide variety of languages, and I work with a lot including 2 server side languages, coldfusion and php.
My favorite is the find and replace tool. You can do find and replace the whole site all at once if needed. One of the jobs its best suited for incidentally is removing junk code made by the types of editors you mention at the beginning of the post. Removing span tags, depreciated tags. Bulk fixing incorrectly linked files. I have found that to be invaluable on a daily basis.
What happens to a lot of sites that start out on those types of editors is eventually, updating becomes harder. As your site grows to more and more pages, it becomes more apparent why editors have template systems or developers will break menu files apart into separate files (includes).
Its my advice to go with the flow. Get yourself a registered copy and be done with it!
The secret is to try understand how HTML/CSS work and even play a bit with dreamweaver for instance or a free WYSIWYG editor. That’s how I started anyway. The thing is to create something in the editor and then see in the code view how it works. You’ll become more familiar with this and understand what makes a page function. I also recommend using w3schools.com to see and test some of the codes. It’s a steep learning curve in the first weeks, but, once you understand how it all works, you’ll be able to create excellent sites and also know what’s going on there
I forgot all about the Find and Replace tool. It is absolutely invaluable, especially when working on large projects. It’s saved me a lot of time and hassle more than once. =)
You guys still use basic text-editor? What is this 1997? Enjoy elitism, while I use Visual Studio. OP, use a WYSIWYG, it will save time, and time = $$$$$.
WYSIWYG editors like Serif are, by definition – complete and utter crap. Even using DW can teach you ENDLESS HORRIBLE BAD techniques. As a dearly departed friend was fond of saying:
The only thing you can learn from Dreamweaver is how not to code a website, and the ONLY thing about Dreamweaver that can be considered professional grade tools are the people promoting it’s use – Dan Schulz
… and Dreamweaver is one of the BETTER ones.
It goes hand in hand with the IDIOCY – SHEER IDIOCY – OUTRIGHT LUNATIC nonsense of drawing a pretty picture of a site before you even have semantic markup of content in place.
Figure out what’s going on the page for CONTENT. (or just what would be on a typical page) – that’s text and CONTENT images (not presentational images like borders)… and then mark it up in a sensible document order semantically – that’s headings for headings, lists for lists, paragraphs for paragraphs, group the semantic tags by sections if need be with DIV… THEN go in and make the layout using CSS… and only THEN do you start up the goofy paint program to make graphics to hang on the layout – or you use CSS3 meaning you don’t even need that step anymore for many pages.
I just though I would add after Andrew Cooper’s comment:
“It’s funny you should say that as Adobe Dreamweaver is touted as the industry standard…”
Probably the biggest reason for my assumption that DW was THE software all the pros use was that I sometimes buy ‘Web Designer’ magazine, in the hope of learning something. From reading a few issues it gave me the impression that DW, Flash, and Photoshop were essential tools for the professional designer. Anyone would think the mag is sponsored by Adobe
It’s really sad that Adobe has such total mindshare – given Dreamweaver is total garbage JUST as bad as Frontpage, Photoshop wouldn’t know how to save a image optimized for web from the hole in it’s DVD, fireworks slicers are worse than WYSIWYG in most cases… Flash is abused for all sorts of stupid nonsense…
… and that’s before we talk all the “CS” versions basically hijacking the computer they’re installed on even when not in use; I didn’t buy a i7 870 with 16 gigs of RAM to have it behave like a 1ghz P3 with 512k.
Do they actually make a product that doesn’t cause more problems than it solves for web development?
I like my Adobe products, though they are definitely not end-all be-all solutions and you really have to know what you’re doing.
For example, I use Fireworks to optimize all my images because it has a great, easy to use export… however, I never both slicing. I always hand build the images I export.
Photoshop is great for image editing(/photoshopping), but I completely agree that it doesn’t know how to save an image for the web (hence Fireworks).
And I despise all WYSIWYG editors, Dreamweaver being no exception, but it does have features that I like (Project management, automatic uploading on save, etc). Every six months or so I go hunting for an alternative, but I’ve yet to find one that has everything I want.
