Best way to design a web site?

[patseguin Global Moderator]

This may be a very general topic, but I have no experience with web design. I have Adobe CC 2015 with Dreamweaver so I can use that. I have messed with it and I am really not very good with it yet. Is there better software for beginners? I want to design a very simple web site for my business that just has basic information pages and a price sheet.

I am very versed in Illustrator. Is it feasible for me to create web page designs in Illustrator and then just extract the elements and place them in the web design software to recreate it?

[patseguin Global Moderator]

Those that take the time to do things right get better results. Use shortcuts after you learn how to fix things when the shortcuts don't work.

Same with anything in life really.

You can use a WYSIWYG editor, but at the end of the day you will wish you hadn't.

I want to at least get a basic site site set up with a couple of menus using bootstrap but I am having trouble wrapping my head around it.

[adrynalyne]

I want to at least get a basic site site set up with a couple of menus using bootstrap but I am having trouble wrapping my head around it.

i know, I have been there.

It will click at some point. You just have to be patient. I/we would hate to see you hit the pitfalls many do. That's why the advice is being given this way.

[DevTech]

Here is kind of what I am wondering. Why in 2015 do I have to use a text editor and type in code to make a good website?

You will recall that I said you need to turn off the "why" part of your brain. It will just give you headaches. All this webby stuff was designed by alien spider monkeys blind drunk out of their minds drinking tropical martinis with little umbrellas laced with Timothy Leary amounts of LSD and listening to Sgt Pepper's Lonely Hearts Club Band and then thinking to themselves "what if we took this crazy system and changed it even faster so those silly humans could never ever understand completely how any of this works"

If you can imagine that picture every time you encounter a way of doing something that defies any common sense, you might be able to handle things. The Hipster developers in San Francisco have it easier. They just endlessly copy each other without feeling any need for it to make sense because as long as all of then are doing it together, it must be the right way...

That was the long technical explanation. The short answer Moving Target.

Any visual designer is like a frozen moment in time and has to use actual code designed with the the tools available at the time. So an editor released in 2010 will make a website that looks 2009ish and when it comes time to update the tool, by golly, freakin Everything Has Changed. In 2015, I'm not even sure you could get any payback on the cost of making a visual tool that handles all the devices and all the responsive and adaptive code and present it in a visual coherent form. I would be fascinated to see one and kind of half-expect someone might post a link...but Unicorns maybe...

 

[koppit]

Oh man, there are so many places to start... my experience is to be smart about it, don't re-invent the wheel if you are just looking for a basic site at this point.

If you want to start off with bootstrap, and you want to be able to edit content easily, grab a free WordPress theme and try that out - chances are you will find one that you like that appeals to you and your audience.

https://colorlib.com/wp/free-bootstrap-wordpress-themes/

WordPress gives you a WYSIWYG editor, thousands of pre-built themes, thousands of plugins off the shelf to do EVERYTHING, and best of all it has the biggest community on the planet to help out. Try it, you literally have nothing to lose.

[adrynalyne]

Oh man, there are so many places to start... my experience is to be smart about it, don't re-invent the wheel if you are just looking for a basic site at this point.

If you want to start off with bootstrap, and you want to be able to edit content easily, grab a free WordPress theme and try that out - chances are you will find one that you like that appeals to you and your audience.

https://colorlib.com/wp/free-bootstrap-wordpress-themes/

WordPress gives you a WYSIWYG editor, thousands of pre-built themes, thousands of plugins off the shelf to do EVERYTHING, and best of all it has the biggest community on the planet to help out. Try it, you literally have nothing to lose.

Nothing to lose if you don't mind the cms most targeted by hackers/script kiddies. Wordpress is the Windows of CMSes.

[koppit]

Nothing to lose if you don't mind the cms most targeted by hackers/script kiddies. Wordpress is the Windows of CMSes.

It sure is - I actually said something almost identical in a blog post not too long ago. It's the biggest player in the CMS world, so is also the most targeted. Take daily backups, install Wordfence and/or Sucuri, and make sure you always have everything up to date and you'll generally be fine. Having cPanel access doesn't hurt, as you can set up a block on the login page too, and many other measures. The host plays a big part - GoDaddy being one of the worst at stopping any kind of hacking attempts (in my experience with any CMS, really). 

[DevTech]

If he just wants to "kick the tires" on seeing an instant out of the box Bootstrap enabled website, what about Ghost?

[DevTech]

I want to at least get a basic site site set up with a couple of menus using bootstrap but I am having trouble wrapping my head around it.

Various people are making suggestions about various real world options and it might help them if you could provide some basic additional information:

1. What is your development computer, Windows or Mac

2. What type of web hosting do you currently use - shared, VPS or your own server?

3. How full featured do you want to end up - eCommerce etc...

4. Do you have thoughts of making web development a serious hobby or career or is it a case of personal well crafted attention to your own business?

 

[remixedcat]

my main site http://remixedcat.com is a wordpress site and It also has a mobile site hosted by dudamobile... it was very easy to make both.

[DevTech]

my main site http://remixedcat.com is a wordpress site and It also has a mobile site hosted by dudamobile... it was very easy to make both.

 

I'll guess around 2011 on that one. Oh let me add a year to that - it's a (early era) responsive design - 2012

(we have a minor thing going to date mentioned sites by their style)

Edited October 28, 2015 by DevTech
noiticed responsive

[remixedcat]

The template I use's 'responsiveness' has issues on 3 mobile browsers. That's why.

 

Also azure's prices make me have to offset the mobile traffic. I'm in the process of migrating

[adrynalyne]

my main site http://remixedcat.com is a wordpress site and It also has a mobile site hosted by dudamobile... it was very easy to make both.

My God.

 

Tables....and that font.

/backs away slowly

[adrynalyne]

The template I use's 'responsiveness' has issues on 3 mobile browsers. That's why.

 

Also azure's prices make me have to offset the mobile traffic. I'm in the process of migrating

DIY.

This highlights an additional pitfall. If your template is broken, you are at its mercy unless you know how to fix it.

[patseguin Global Moderator]

 

Various people are making suggestions about various real world options and it might help them if you could provide some basic additional information:

1. What is your development computer, Windows or Mac

2. What type of web hosting do you currently use - shared, VPS or your own server?

3. How full featured do you want to end up - eCommerce etc...

4. Do you have thoughts of making web development a serious hobby or career or is it a case of personal well crafted attention to your own business?

 

1. Primarily Mac

2. Dreamhost

3. Just basic to get a more modern site going and eventually e-commerce. To show you just how bad my site is, take a look at http://www.coveredwagonpromotions.com. My brother paid someone several hundred dollars for that mess.

4. Kind of everything you mention. It started out wanting to craft a much better business website but if I get good at it, I could definitely see myself making a nice little side job out of it.

I still haven't tackled bootstrap yet but here is a very basic page I set up just to see if I can get it looking more 2015:

 

If I understand correctly, when I use bootstrap I have to type everything into a text editor? So how do I place all the graphics and everything if I am doing it in a text editor?

[Andre S. Veteran]

If I understand correctly, when I use bootstrap I have to type everything into a text editor? So how do I place all the graphics and everything if I am doing it in a text editor?

The same way Dreamweaver does it, i.e. by writing the appropriate HTML, CSS and Javascript. A website is a text description of its contents, layouts and behaviors. Seriously, if you want to have complete control over the way your site works and use custom control libraries, you need to learn HTML, CSS and Javascript.

[DevTech]

1. Primarily Mac

2. Dreamhost

3. Just basic to get a more modern site going and eventually e-commerce. To show you just how bad my site is, take a look at http://www.coveredwagonpromotions.com. My brother paid someone several hundred dollars for that mess.

4. Kind of everything you mention. It started out wanting to craft a much better business website but if I get good at it, I could definitely see myself making a nice little side job out of it.

I still haven't tackled bootstrap yet but here is a very basic page I set up just to see if I can get it looking more 2015:

 

 

If I understand correctly, when I use bootstrap I have to type everything into a text editor? So how do I place all the graphics and everything if I am doing it in a text editor?

Thanks for the background info. It will help people to try to fit their answers into your situation perhaps.

Point 3: Your hundred dollar mess is typical - top design firms would charge somewhere around 50K-100K and a small decent firm 2K-5K perhaps so anything measured in hundreds is asking for that kind of thing...

Point 4: The advice you are getting here to start with basics is vital for a career, semi-vital for a chance at a well crafted one-off. (depending on how we define well crafted)

--------------------------

And layout...

If you followed my explanation for why we don't have great visual editors (and I guess you didn't - nobody's fault -probably needs a book length treatment) then you just can't think of "placing" anything really in that old fashioned static kind of way.

The modern site will flow and morph and transform like a fluid and a lot of thought goes into what shows where and in what manner depending on pixel area, pixels per inch and device type. So this can all be described (with some blood sweat and tears) in text and visual editors will always lag any advance by years most likely.

It is all so hard actually that there is a lot of "cheating" going on. By restricting the available palette of possible design styles to just the types of designs that work well with "the new web" a lot of issues can be easier to work with. This leads to stuff you have probably seen lately everywhere:

1. Lots of white space

2. Heavy use of Typography

3. Almost all graphic elements are vector because it resizes, so go out of your way to avoid images or stuff them in a gallery...

4. Removal of left-nav area

5. Removal often of top nav replaced by huge buttons, vertical scrolling and hamburgers

6. Removal of any vertical separation on the page in favor of horizontal areas as you scroll vertically

7. Use of parallax to bring back some life to the page

8. Use of top area video backgrounds for same reason to replace the 2012 to 2014 flipview/carosel type top element

9. whatever i missed here off the top of my head...

Of course all the layout and design restrictions can make it hard to look different but the further you deviate from things that will "fluidate" easily, the more of a design effort you have.

And it doesn't matter. Your website visitors who know less than zero about web design will instinctively know in a glance if your website looks "modern" because "fashion" is wired into our society in the last hundred years. We are all hyper-sensitive to the "fashion of the new" and instinctively subconsciously suck in conclusions about a product from the "look" so you don't need to look different, just up to date!

Some schools of thought will claim the above features are "good design" but I think that's just circular thinking - it is just "Design that works on a range of stuff" until people think of something better...

------------

Short answer: don't use images...

 

 

 

[DevTech]

As a minor note, it's a bit pointless to develop a great website and then shoot yourself in the foot with this:

"To request some free samples or for more information on

becoming a Covered Wagon customer, please use our Contact page"

Hint: giant clickable buttons etc "gimme a sample now dude" "sign me up, I'm excited" etc - reduce all possible friction to the customer getting what they want - ideally they never need to talk to a human - think Amazon

-------------------------------------------------

Some of it is old fashioned web design - figure out essence of main message and distill it and concentrate it until it has impact that hits you in the gut.

 "best quality contract embroidery, all work is done in house, latest Barudan computerized embroidery machines,highest quality supplies such as Robison Anton threads, Schmetz needles, H&V backings,All goods are hand finished with steaming and bagging of each garment"

Translates to good old Yankee craftmanship or modern efficient urban micro-factory or whatever so pick one and go with it

so picking a craft shop for example, you might arrange a photo shoot of the giant machine in your sample page set in a workshop with tools and people lovingly engrossed with the shop. (might require some photoshop) so that you end up with a picture so heartbreakingly beautiful that people would want to dive into your web page. perhaps apply a slight blur and make it your background. or if you're lucky you actually have something that would make a 15 second video background.

Then float your content on top of that untied to any page edge but with relative positioning to give a sense of layout and use typography and white space as area separation

Just throwing out a more specific idea so you can get the "static magazine page look" out of your head.

(and warning the whole picture background thing looks really cheesy until you tweak it and tweak it and suddenly, it's not cheesy anymore)

 

[DevTech]

Agree bootstrap is the best css framework.

Bootstrap is the most "popular' but "best" is subjective.

Also, in the Hipster webby crowd, there is a movement toward "no frameworks" as part of the whole "less is more" stupidity --- then they load on the Google Adwords and a 1 meg Google payload after writing articles on trimming 10K of "useless framework" - now that was worth all the trouble...

 

[DevTech]

To design your own web design you must need basic knowledge about Photoshop and it's new version cs6. And if you not able to study then download any template according to your Website.

That sentence is incoherent at best and mostly crazy to the extent that it can be understood...

[adrynalyne]

Bootstrap is the most "popular' but "best" is subjective.

Also, in the Hipster webby crowd, there is a movement toward "no frameworks" as part of the whole "less is more" stupidity --- then they load on the Google Adwords and a 1 meg Google payload after writing articles on trimming 10K of "useless framework" - now that was worth all the trouble...

 

Most of what I use bootstrap for is provided by Skeleton. It also weighs in at 6k less lines of css ?

[DevTech]

Most of what I use bootstrap for is provided by Skeleton. It also weighs in at 6k less lines of css ?

I was just musing aloud in the context of nothing at all that there are these crazy Hipster trends that come along particularly frequently in the web dev field that catch on like social wildfire without anyone ever examining the sensibility of it as long as the idea/procedure/technique has a well written plausible blog post from some influential member of the Hipster community.

So my pet peeve of the week is the idea of humans spending time crafting a custom lean and mean delivery package to save a few millisecs which is completely swamped in orders of magnitude by the typical Google payload. The whole idea is usually supported by the meme (that they also manufactured) that users will depart your site in droves if the page load exceeds <insert arbitrary meme number here> millisecs. All these times are measured (when they are in fact measured) without the Google overhead as if that is some magical load time that users don't mind...

I'm sure next week I will find another Hipster idea even more annoying...

[x.iso]

When I first needed to make a website from designer's viewpoint (in 2003 or so), I've turned to Adobe flash and made a basic site entirely on it. I wouldn't understand how to implement what I designed in code, so I had to cope with blurry font rendering and manual content updates (which often required modifying many pages at once). In 2005 I needed to make another site yet again and by then I figured there was a thing called "engine" (or framework, or CMS), but had no idea how to make one or find any worthwhile CMS so this time I used Dreamwork. It was a PITA and I didn't like how it generated a messy code, but I managed to make some simple manually managed site with no actual framework. After a while I decided to rebrand the netlabel I made and gone completely minimalistic with ASCII style single page with all the info and updates, white font with a bit of style on black background. Then our release list started to get long, so I finally decided to try CMS option. Tried Joomla, found it terrible to use and hard to modify templates into anything acceptable (mostly because I couldn't find a decent template as starting point). Then tried Drupal and settled with it, installed a bunch of plugins and suddenly my site got some features aside usual info (design wasn't exactly great though, couldn't figure out how to edit CSS seeing immediate results and on a CMS to boot). Occasionally site got injected with malware crap so I had to clean it manually or use backups, but one day it got so bad, that I couldn't feasibly restore it entirely, so it was time to start from scratch. By that time (2012) Wordpress became quite strong and flexible CMS much as it is now today, so I've installed it on the free domain and started messing with it online (I've decided to skip local installation entirely, because I hate messing with SQL and also need to see actual results on actual hosting), picking a template as starting point, then sculpting it to my needs (I finally discovered Developer tools in browsers to myself as CSS WYSIWYG editing tool) and adding some plugins here and there. Then I had to redo about 124 posts with my friend and co-founder, and finally got my first adequately made site (link in profile if interested). Oh, and I never had to deal with malware ever again, as I update Wordpress regularly and have some additional security tweaks installed.

Long story short, it was much easier to use Wordpress as starting point and modify template to my needs, also use that F12 Developer tools to modify the template to your liking and then apply these changes in CSS file. Additional advice - you should prefer templates (as starting point) with adaptive design that would change layout depending on window size at least 1 level (basically one size for desktop and additional for tablets and phones).

[DevTech]

So what you prefer for a web design?

I am trying to consolidate my info in a new topic specific to modern approaches:

https://www.neowin.net/forum/topic/1277588-making-some-helpful-information-to-do-modern-web-development-using-best-of-2015-tech/

 

[adrynalyne]

1 hour ago, olbond said:

I pesonally used a pre-designed template supplied by Templatemonster to build my first Sush Bar website.  You know, I've never even thought it would be so easy to create my own site by myself.

If you used a template, it wasn't created by yourself. Just sayin. 

[LFALiam]

For me, It's WordPress and Sublime Text.