Typographic กับการทำ Responsive Web

Posted on by
Reply

เรื่องของการออกแบบเว็บ Responsive ไม่ใช่เรื่องแปลกใหม่อะไรอีกต่อไปแล้ว และก็มีหลายแนวทางของแต่ละคนในหลายๆเว็บไซต์ก็ได้เสนอแนวทางที่ต่างกัน อาจจะยึดแนว Fluid Grid บ้างอะไรบ้าง แต่หลังจากผมได้อ่าน Designing for a Responsive Web Means Starting with Type First ที่เขียนโดย Paul McKeever ผมขอสนับสนุนแนวคิดเขาครับ เพราะผมเคยเห็นเว็บ Responsive ที่เนื้อหาภายในตัวเล็กมากจนอ่านไม่ออก แต่การปรับ layout อื่นๆในเว็บทำได้ดี..
แต่อย่าลืมว่า Content is King

PRINCIPLE: เว็บนั้นถูกสร้างขึ้นมาเพื่อเป็น สื่อกลาง (medium) เพื่อให้สื่อนั้นไปถึง ผู้รับสาร (Receiver) (หรือในเรื่องเว็บนี้ผมขอใช้เป็น ผู้อ่าน (reader) แทนแล้วกัน) ได้ตามจุดประสงค์ของมัน ซึ่งจะทำให้สมบูรณ์ได้ก็ต่อเมื่อผู้รับสารนั้นได้รับสารครบถ้วน ตามหน้าที่ของสื่อที่ควรจะเป็น ต้องทำให้ผู้อ่านนั้นอ่านออก ไม่ว่าจะอยู่ในหน้าจอหรืออุปกรณ์ใดๆก็ตาม “Design for the reader, not the device“

การทำ Responsive Web นั้นไม่ได้หมายถึงแค่การทำ Responsive Images, CSS Media Queries หรือ Flexible Grids แต่อย่าลืมจุดใหญ่ไปครับ เพราะที่สำคัญจริงๆแล้วคือ Readable เราต้องทำให้เนื้อหา (content) ที่อยู่ในเว็บนั้นอ่านออก เพราะฉะนั้นการทำ Responsive Web ควรเริ่มที่ตัวอักษรก่อนครับ (นั้นทำให้เห็นว่าแนว Fluid Grid นั้นไม่ใช่ทั้งหมดของ Responsive Design)

นอกเหนือจากนี้ ผมคิดว่าการออกแบบเว็บแบบนี้เราควรตัดสิ่งที่ไม่สำคัญออกไปจากเว็บให้หมด (Clean) เอาเฉพาะสิ่งที่อยากจะสื่อจริงๆ ให้ความสำคัญกับ Typographic มากขึ้น เพราะส่วนนี้จะสามารถมาแทนหลายๆส่วนอย่างรูปภาพหรือการจัด Layout บางแบบไปได้เลย ยกตัวอย่างในเรื่องของ Brand’s identity เราสามารถใส่สีของตัวอักษร รูปแบบ font ความหนา เอียง ของตัวอักษร มาแทนรูปแบรนด์หรือโลโก้ได้ ซึ่งจะยังให้อารมณ์และความเข้าใจสื่อออกมาเหมือนๆกันได้ “The brand is the type” เราต้องสร้างสิ่งนี้ขึ้นมาครับ

และการทำ Prototype ด้วยตัวอักษรนั้นจะทำให้เราตัดสินใจเรื่องการออกแบบเว็บได้ดีขึ้นและเร็วขึ้นด้วย จากที่เรายึดหลัก Readable ในการออกแบบ เมื่อสื่อยังคงความสามารถในการทำหน้าที่หลักของมันได้ เรื่องการออกแบบอื่นๆก็จะง่ายขึ้นเยอะครับ และ Readable นี้ก็ไม่ใช่เฉพาะสำหรับ Responsive Web เท่านั้นนะครับ แต่ควรยึดเป็นแนวออกแบบสำหรับทุกเว็บครับ เพราะ เว็บคือสื่อกลาง ครับ

How to use backorder in PrestaShop

Posted on by
Reply

How to enable Back Order option for your product
There have 2 ways to enable the option,

  • 1) Set allow to orders for specific product. (Recommended)
  • 2) Set allow to orders in Preferences, that will affect for all of your products. (By default setting)

1. Set up for specific Product

PrestaShop 1.4
Back Office -> Catalog -> Products -> "Product" -> When out of stock: Deny orders/Allow orders/Default: Deny orders as set in Preferences

Set up “Allow orders“

Product out of stock setting for specific product (PrestaShop v.1.4)

Product out of stock setting for specific product (PrestaShop v.1.4)

PrestaShop 1.5
Back Office -> Catalog -> Products -> "Product"
-> Quantities -> When out of stock: Deny orders/Allow orders/Default: Deny orders as set in Preferences

Same thing, set up “Allow orders“

Product out of stock setting for specific product (PrestaShop v.1.5)

Product out of stock setting for specific product (PrestaShop v.1.5)

2. Set up for all products in Preferences

Back Office -> Preferences -> Products -> Allow ordering out-of-stock product: Yes/No

This one, set to “Yes“

Product out of stock setting panel in Preferences (PrestaShop v1.5)

This setting will affect for all product by default. And basicly I don’t recommend using this. Because normally, back order is enable for some product(s) for each e-commerce website

Caution: when you enable back order, your product’s quantity is able to be less than 0 (for example, -1 or -2 or less than that). Maybe you’ll wonder why the product quantity is less than 0, because of back order. And the email notification module (notify when product is available) will doesn’t work for this case. Because enable back order is equal to the product is available.

Understanding PrestaShop Image Sizing

Posted on by
Reply

1. Firstly, go to image preference page in PrestaShop Back Office.
Back Office -> Preferences -> Images

PrestaShop's image prefernce panel

Then you’ll see the list of image sizes and you can edit the size there.

2. **Second, check your image size.

For example, home_default image size is 195x300px
If you want to upload image to fit with home_default‘s size,
Use this method:
2.1) (original height / original width) x new width = new height;
(if width is important *depending on design **mostly)
or
2.2) (original width / original height) x new height = new width;
(if height is important *depending on design)

So original height is 300 and original width is 195,
then the image ratio is 1.53846153846154 (from 300/195).
And multiply with your image width, for example image width is 960.
Therefore (300/195) x 960 = 1,476.9230769230784 (1,477px).
Then, that’s it!! Your new image size is 960x1477px and use this size to upload to PrestaShop.

The easy way to calculate
Use this online tool to calculate image size and aspect ratio at:
http://andrew.hedges.name/experiments/aspect_ratio/

3. After you uploaded image file, you have to regenerate thumbnails to make your images update to the latest size (if you changed image size and you already had image file(s) on the system).

Regenerate Thumbnails

Regenerate Thumbnails

Regenerate Thumbnails

Regenerate Thumbnails

4. Additional, this one is for your image file type and image quality on your website.

Image type and image quality

Image type and image quality

Mostly, e-commerce websites and a lot of websites are using JPEG because of small file size, but JPEG is use a lossy compression encoded. So your image quality will be decrease, however you can edit quality of it. (I recommended, 90 is good enough, if set to 100, image quality is not to much different but it’ll add the time to your website loading time (slower). Conclusion is, just leave it, this is just in case.
And PNG is not fully supported in PrestaShop and some modules of its.

How to sort product on product list page in PrestaShop v.1.4

Posted on by
Reply

1. Go to Back Office -> Preferences -> Products

2. Find this on that page,

ProductListSortingPS148
For this example screenshot, product on product list page will be order in the same way as in Back Office category page and in descending way (bottom-up).

Then you can select order option

2.1) Order by:

  • 1. Product name
  • 2. Product price
  • 3. Product added date
  • 4. Product inside category
  • 5. Manufacturer
  • 6. Product modified date

And

2.2) Order way:

  • 1. Ascending
  • 2. Descending

Just in case for unexpected error from PrestaShop, you can check it out here, at http://www.prestashop.com/forums/topic/51840-problem-changing-product-positions-in-catagory/

How to send message order to customer in PrestaShop 1.5.3

Posted on by
Reply

This post will guide you about sending a message to your customer about her/his order status or custom message.

Firstly we go to look at our order page in admin panel.

PrestaShop 1.5.3 order page

So this example will going to send a message to customer ID 8, H. Pimsuwan. Then we click on it to see the order detail.

PrestaShop 1.5.3 order detail page.

Then you can see the “Message Section” (at green arrow point out). Click at “Click here to add a comment or send a message to the customer” then it’ll show the form like this,

New Message

In this form, you have to click “Yes” before you send a message. Otherwise customers will can’t see your message that to sent them. So after that, when you click Send button. It’ll show alert like this,

SendingNotice

Just click OK

After all, your customer will get this via email,

EmailMessage

That’s all! : )

Have fun! ;D

(Additional: How to change mail color).

How to add product comment on PrestaShop 1.5.3

Posted on by
2

1. Firstly we need to go to install Product Comments module on Modules page.

ProductCommentsModule

2. After you installed the module your product page will look like this,

ProductPage

Its added another tab, comments.

3. Then if user login, they can comment and also can give rating to your product. Guest user also can do that but you have to set allow guest comments in the module settings.

ProductComment

4. After user commented, you need to moderate that in the Product Comments module (configure page of the module).

ProductCommentsoduleSetting

And after you approved, you still can manage it.

ProductCommentManage

5. After all, your product detail page will look like this,

ProductDetailWithProductComment

* Test on PrestaShop 1.5.3.1 with Product Comments module.

Startup Shootout: Which travel sites are quickest to take-off?

Posted on by
Reply

Reblogged from VentureBeat:

Click to visit the original post
  • Click to visit the original post

Editor’s note: Keynote Systems’ Startup Shootout Index provides some insight into the three-screen challenge now facing anyone with a web presence. We’ll be bringing you a fresh set of data from Keynote every month. Check out previous Startup Shootout results.

Welcome back and Happy 2013. May it be a successful one for all our startup entrepreneurs.

We track over 40 sites in our Startup Shootout Monthly Index – collaboration sites, travel,

Read more… 796 more words