Dreamweaver or Muse

Now that I am ready to build my website which computer program do I use? Dreamweaver or Muse?

I always thought that I would use Dreamweaver, as this is the program which I used many years ago, so I am familiar with it. But I have also heard good things about Muse, so I don't want to automatically discount this program altogether.

 

After a a lengthy research into the battle between Dreamweaver and Muse, I will indeed be sticking to Dreamweaver. Basically the argument comes down to, do you like/need/want/have to learn the HTML code or not. For those of us who are not too scared of the HTML code, then Dreamweaver is the preferred option. If I didn't like the code, and I just wanted to "Design" a page using a familiar Adobe interface, then I would have used Muse.

At the end of it all, I am still going to design and build a website.

Links:

Adventures in Site Building: Dreamweaver versus Muse
http://graphicdetailnj.wordpress.com/2013/02/07/adventures-in-site-building-dreamweaver-versus-muse/

Adobe Dreamweaver CS5.5 by Adobe vs Muse by Adobe
http://web-design-software.findthebest.com/compare/32-36/Adobe-Dreamweaver-CS5-5-vs-Muse

Why I love muse an interview with muse power user Chris Kellett.
http://www.musegrid.com/_blog/Blog/post/Why_I_love_muse_an_interview_with_muse_power_user_Chris_Kellett/

What is the Difference Between Muse and Dreamweaver?
http://www.vpclasses.com/2012/10/muse-vs-dreamweaver/

Designing my Website - I am almost ready to build it

I have reached a point where I can now just start to build my website. But before I start building, I want to just  explain the design I have come up with.

After researching a variety of topics, and looking and analysing many creative people's websites, I have narrowed down my design to these areas.

1. It will have 3 web pages.
 - Home
 - Portfolio
 - Contact

2. It will be a clean site. Probably white. Yes, I have been converted, and the more I look at these "new" and "modern" sites, the more I can see how my grungy sites look dated.

3. It will have some sort of image slider / Carousel, probably as a simple JQuery script.

4. The contact page will probably just be my email address with maybe some Social media buttons.

5. The navigation will be a horizontal bar/ribbon along the top.

Contact Me - Form or email ?

A very important feature of a website is to have a way of your end-user being able to contact you.

So how is the best way to create a "contact me" form? Is it using HTML form fields or it as simple as creating a clickable email address on the website.

So there are two options.

Option One: A standard HTML contact form

Option Two: A simple email address

My initial reaction is to create an online form. As it allows for fields (which can be set as mandatory) to allow you to capture the information you need. BUT I can see how this could be a problem on hand-held devices which have smaller screens. I know I have tried to fill out form fields on my iPhone, and it is very problamatic. So maybe an email address is indeed a lot easier and more user friendly.

Sample Online Form:

Source: http://www.tampagov.net/appl_MyTampaGov/features_forms.asp

After some reading, and research, I am definately going for the email address option. It is simple, it is friendlier to the smaller screens of the hand-held devices, and I also think it is a little bit more personal. As if you are giving a friend an email address, rather than the "corporate-esque" style of an onlin form.

My email address is: george@georgegeorgiou.com - now isn't this nicer. :)

Links:

Designing the Dreaded Form

http://tympanus.net/codrops/2012/07/05/designing-the-dreaded-form/

Contact form or mailto: link?
http://ux.stackexchange.com/questions/6959/contact-form-or-mailto-link

Should I Display an Email Address on My Site or Use a Contact Form?
http://www.thesitewizard.com/webdesign/email-address-or-contact-form.shtml

Using Forms on your website
http://www.flyte.biz/resources/articles/9901.php

Step-by-step: implementing online forms
http://www.steptwo.com.au/papers/kmc_onlineforms/index.html

DIVs vs Tables - Page Layout

I am an old school web designer, who has used tables to desgin website layout. Unfortunately (or fortunately) this is method of page layout is no longer being supported, and Div tags are the way to go.

I am aware of DIV tags, but I have never used exclusively to design a whole page layout, I have used them in conjuction with tables.

Here is my oportunity to ditch the tables and learn how to use the DIV tag.

QUOTE:

<div> is the professional way of designing the webpage. It provides flexibility in web designing as you can make any kind of design using CSS. But the problem with CSS is that, its debugging is not easy and people find it hard to learn. That’s why they stick to <table>.<table> is easier to learn and implement as you have to only figure out the layout of rows and cells.

source: http://theprofessionalspoint.blogspot.com.au/2012/04/div-vs-table-tag-which-one-to-use.html

|
source: http://creativedev.in/2013/01/table-layout-using-div-tags/

The two most useful sites for learning and understanding DIV tags are:

W3Schools - http://www.w3schools.com/

and

Youtube - http://www.youtube.com

Both these sites were a fantastic resoruce for learning how to use DIV tags, and the associated CSS styles.

Youtube Video Links:

Learning to use CSS and DIV Tags for Columns in Dreamweaver
http://www.youtube.com/watch?v=vSJT7Wf6A04

HTML div tag Example and Tutorial using CSS
http://www.youtube.com/watch?v=68kiDajh1lg

HTML 101 - The Div Tag
http://www.youtube.com/watch?v=3JvUqqKNh8M

Floating Div Tags :: Dreamweaver Tutorial
http://www.youtube.com/watch?v=B_JLXPDH-jY

Relative and Absolute Positioning of Div Tags, Nesting Tags
http://www.youtube.com/watch?v=YLWLfzx4nq0

Links:

The Professionals Point: DIV vs TABLE tag: Which one to use?
http://theprofessionalspoint.blogspot.com.au/2012/04/div-vs-table-tag-which-one-to-use.html

Adobe Community: Choosing <div> vs <table> layout
http://forums.adobe.com/thread/1183246

HTML Layouts - W3Schools
http://www.w3schools.com/html/html_layout.asp

My 10/10 website

If I knew how to write code, I would be designing websites just like this one:

http://www.numero10.ch/fr/home/

I really like how this site moves. I like the layered effect of the actual movemnt. The style of the graphics definately adds to the experience. The typography used is in keeping with the site, it is all just brilliant.

Note: This is not as impressive as it should be, if you are viewing it via a hand-held device like an iPhone or iPad. For maximum viewing pleasure please view this website on a desktop or laptop computer.

I do absolutely love this website. 10/10

Single Page Websites

From my research I am discovereing that there seems to be a trend to having website, which fit onto a long single continus page. The navigation works as normal, but it simple "jumps" to an anchor point on the same page. I will investigate if this design layout is for me.

Sample Sites using the single page layout:

http://www.witcreative.info/

http://pitch.csspiffle.com/

http://www.indofolio.com/

After investigating this style of website, I found that I wasn't really comfortable designing and building one long HTML webpage. I still like the multipage website layout. So I am not going to be building a single page website for this project. But I think I will want to build one in the future, I just need to find the right sort of web site for this type of design.

Links:

One Page Love
http://onepagelove.com/
Creative Techniques for Single-Page Websites,
http://webdesignledger.com/tips/creative-techniques-for-single-page-websites

21 Inspiring Single Page Websites | Inspiration
http://webdesignledger.com/inspiration/21-inspiring-single-page-websites

50 Creative and Inspirational Single Page Websites
http://www.onextrapixel.com/2012/12/13/50-creative-and-inspirational-single-page-websites/

Best Single Page Websites
http://www.awwwards.com/websites/single-page/

Website Colour - If I want to add some

I had better make a quick post about website colour. I have just mentioned 3 white sites, but if wanted to design with colour in mind. I would definitely use the following two websites for referencing, and inspiration.

I am sure there are more websites out there to help in colour theory, but these two sites would be my first visits.

1. Adobe Kuler: https://kuler.adobe.com/‎

Sample Screen Shot

Source: http://i.imgur.com/ipWtR.png

2. Color Scheme Designer 3: http://colorschemedesigner.com/

Sample Screen Shot

Source: http://0.tqn.com/d/create/1/0/g/3/A/-/Color-Scheme-Designer-3---Google-Chrome-2011-04-12-11-54-15.png

The 3 White Sites

Today I was given 3 URLs form a fellow class-mate. They are websites from 3 Different artists. They all seem to have the same "white" website look. I am naming this blog post the "The 3 White Sites".

Site 1: http://motherbird.com.au/
Site 2: http://afom.com.au/
Site 3: http://olegdou.com/

These sites all function perfectly, and due to their "clutter free" interface, they definately place emphasis on the content within the site, which is good thing.

I am beginning to accpet the fact the designing trend for websites in 2013. I'm still not LOVING it, but I am accpeting it.

Shopping Cart - I need one for my website

It is obvious, that if I need to sell things from my website, that I need a shopping cart. The shopping cart I need for my website needs to handle digital content, and deliver them to the customer in an instant manner. I am not interested in emailing them myself, at a time after the customer has purchased them. I would like the customer to be "instantly gratified" with an automatic download, upon successful completion of the transaction.

But how do I add a shopping cart to my website?

After some research, I think I will be using e-Junkie as my shopping cart. The reason is, that e-Junkie has no setup fees, no transaction fees, and no bandwidth fees, they are also compatible with Paypal, which I am huge fan of.

I would also like to host my digital content on the shopping carts web servers, just as a form of security. I am a little fearful of being "hacked" and having customer details and my content stolen. I would rather use a more secure server than what I would be using to host my site.

Note: I am assuming that the shopping cart site would have very high security. Hmm..maybe I shouldn't make this assumption.

Here are just some of e-Junkie's features, which I really like (you can find out more features on e-Junkies website):

• No pop-ups! Works "inside" your own page.
• No scripts to install! Just paste our simple HTML button code.
• Supports discount/coupon codes.
• Works on all browsers and on iPhone.

 

http://www.e-junkie.com/

 Links:

Shopping Cart Software Review 2013
http://shopping-cart-review.toptenreviews.com/

Shopping cart —PayPal
https://www.paypal.com/us/webapps/mpp/shopping-cart

18 Great Shopping Carts to Power Your Online Store
http://www.sitepoint.com/shopping-cart-solutions/

35+ Online Shopping Cart Solutions for Your Business
http://mashable.com/2008/10/08/shopping-cart-solutions/

Basic Ready-to-Use CSS Styles

Here is just another quick little link I found today, which want to include in my blog.


Basic Ready-to-Use CSS Styles: http://tympanus.net/Tutorials/BasicReadyToUseCSSStyles/

CSS Trickery - Actually just some cool CSS

In my recent research phase into Image sliders, I uncovered a world of CSS tips and tricks. I want to document these CSS tricks/tips, for my reference just in case I want to use them in my website.

Links to the CSS trickery that I like

http://tympanus.net/Tutorials/TypographyEffects/index5.html

http://tympanus.net/Tutorials/ElasticSlideshow/index.html - I might be able to use this as my navigation.

http://tympanus.net/Tutorials/AnimatedButtons/index4.html - Nice navigation buttons

http://tympanus.net/Tutorials/OriginalHoverEffects/index10.html - I'm liking this one.

http://tympanus.net/Tutorials/BlurMenu/index5.html - Oh I REALLY like this one. - Blur Menu.

http://tympanus.net/Tutorials/ResponsiveImageGallery/ - Thumbnail Carousel

http://tympanus.net/Development/SlidingBackgroundImageMenu/example2.html - Sliding image background menu

Image Sliders

Today I am looking at image sliders.

Some use Javascript, others use CSS only.

The CSS only image sliders, initially appear to be the easiest to use and I have looked into this a little more.

The major problem, that I have found with the CSS code for the slider, is that the back-button on the browser does not instantly go back to the previous page, but instead goes back to the previous image of the image slide. This is not a good thing, especially if you have viewed many images, and the the back button then appears not to work.

A few solutions to this, is to "navigate" away from this page using a navigation system, rather than the back button.

Some Image Sliders - CSS Only

http://tympanus.net/Tutorials/CSS3Lightbox/index.html

http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index4.html - A CSS-only slideshow for background images

http://tympanus.net/Tutorials/CircleNavigationEffect/ - Nice. I can see myself using this one.

Some Image Sliders - JScript etc

http://tympanus.net/Tutorials/ItemBlur/  - uses CSS and JQuery. I like this for a navigation system.

This is my Style of website - Is it dated?

I am looking at the new trend of websites, and I am not feeling the love. I am also looking at websites where I do feel the love, but they seem to be dated.

Here are some images of the websites I like. They seem to grungy and/or quirky

Note: The links may be broken, as these websites maybe out of date.

Note: Here is a link to an online tutorial to the kind of website style i like: http://psd-files.com/blog/how-to-create-a-vintage-photoshop-file/

Here are some images of the websites which are more modern - 2013 style. Not liking these very much.

Hmm...I think I need to compromise.

This might be a compromise:

Creative Mass” a Stunning One-Paged Website Template (PSD)
http://inspiredcore.com/freebie-creative-mass-a-stunning-one-paged-website-template-psd

This is a template, but I do like the look of it. It definately is not grungy like the "older" websites I like. I am a little bit unsure which way to go. I may even decide to just go with the current trend and simply accept the fact that this is how websites are being designed these days.

Note: http://inspiredcore.com/ - The actual Inspired Core website is kind of cool too. It is white though.

Links:

10 Web Design Trends for 2013
http://www.awwwards.com/10-web-design-trends-for-2013.html

35 Modern Metro Style Designs For Inspiration
http://www.101webdesigns.com/2013/03/metro-style-designs/
Colour trends in web design for 2013

15 Web Design Trends for 2013
http://www.slideshare.net/davidleeking/15-web-design-trends-for-2013

UI DESIGN GUIDELINES FOR RESPONSIVE DESIGN

UI DESIGN GUIDELINES FOR RESPONSIVE DESIGN

http://tympanus.net/codrops/2013/01/21/ui-design-guidelines-for-responsive-design/

Things I had to learn - Adaptive Design

While doing my research into creating a website, I kept reading about "Adaptive Design". I had never really heard of this until now, and so I had to investigate it a little further.

What I discovered was that websites need to be accessible on various devices other than the standard desktop or laptop screen. This is simply because the usage of handheld devices like iPhones and iPads, are being used to access to the internet and view websites.

Image source: www.ovenbits.com/services

I found the following statement very interesting, and if I had more time to spend on this project, I would have certainly adopted it:

Golden Rule: Start design and engineering with the smallest version (320px wide). It forces you to make the hard decisions from the very beginning. (source: http://mashable.com/2012/12/04/future-of-media/)

From doing further research into this Adaptive design, I discovered that there is also "responsive Design", this is a little different to Adaptive Design.

Responsive Web Design, uses CSS media queries to modify the appearance of a website based on the size of the device being used.

Links:

The Two Flavours of a ‘One Web’ Approach: Responsive vs. Adaptive : http://www.webmonkey.com/2013/05/the-two-flavors-of-a-one-web-approach-responsive-vs-adaptive/

Building a Responsive, Future-Friendly Web for Everyone
http://www.webmonkey.com/2012/01/building-a-responsive-future-friendly-web-for-everyone/