masalah HTML Responsive email

[Print_Screen]

I need to come out with responsive email by using html & CSS. I mostly can figure it out. But how to show the menu 1, 2 & 3 in below position (mobile view)?

Kindly advise.

Sori bahasa omputeh lak

 

[Sniper]

your image seems not loaded here

 

[Hypnosis-Diri]

Den suggest pakai media query.Kalau nak mudah pakai bootstrap 4/foundation 5.

Boleh setup min-width n max width ikut saiz screen.info lanjut: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

 

[Hendadda]

Please show us the whole position of your tasks, only thing I can understand is that you know html and css and that's really it and nothing more. What needs to be shown in mobile view ? I recommend you to turn on that viewport setting you usually use everywhere else.

 

[swamyveera]

Responsive emails are a pain to create. Thats the reason most people choose fixed width emails (510px) so it looks good on mobile as well as desktop. Check your inbox for all promotion emails, they are mostly fixed width.

you SHOULD NOT use bootstrap or any other frameworks if you wish your email to be rendered properly in most email clients. There are some html email frameworks like https://emailframe.work/ for you to get started with responsive mails.

Watch out for outlook 2003, it uses ms-word's old engine and does not render properly a lot of things.


Stick to basics, tables, inline css and you should be fine, think more like HTML 2.0. Tables are your friend when it comes to html emails.

 

[MuslimProgrammer]

untuk email template, biasanya bootstrap takkan berkesan 100%....

biasanya org guna inline css...maksudnya setiap elemen html tu guna attribute "style"...dan masukkan apa2 style di situ...

itu untuk email template lah...

sbb aku sendiri dah pernah buat.....kalau guna <style></style> tag, banyak css properties yg tak dapat baca...sbb tu bootstrap pun banyak yg tak dapat baca...

 

[swamyveera]

Simple rule: You cannot have reference links in html emails. So your "<link href..." will not work.
Hence all your styles should be inline in the style tag. If you want to be even more safer use them inside your tags but you will have a lot of repetitive coding to do.

That's why lot of e-commerce html is mostly images because html coding is painful and there is no 100% guarantee that they will work in all clients like outlook, gmail, hotmail, yahoo etc. Every mail client reads html emails differently.

Check articles on litmus or mailchimp for tips on html templates.

Welcome to the nasty world of html templates

 

[MuslimProgrammer]

Simple rule: You cannot have reference links in html emails. So your "<link href..." will not work.
Hence all your styles should be inline in the style tag. If you want to be even more safer use them inside your tags but you will have a lot of repetitive coding to do.

That's why lot of e-commerce html is mostly images because html coding is painful and there is no 100% guarantee that they will work in all clients like outlook, gmail, hotmail, yahoo etc. Every mail client reads html emails differently.

Check articles on litmus or mailchimp for tips on html templates.

Welcome to the nasty world of html templates

ya...betul boss...

tapi kalau still TAK NAK GUNA IMAGE, dan nak guna HTML jugak...

terpaksa la guna inline css...

kalau rasa malas nak buat sendiri, upah aku pun ok...

 

[kirana]

you can use inline css as simple as that but the only downside is it does not support certain browsers especially the ones.

 

[swamyveera]

Ha ha. Yes, HTML is always the best (small foot print, searchable inside email clients, the code can be reused for similar style) but images are easier. There must be a reason that so many companies use image based emails
It also depends on the design la boss, simple design no problem but if long emails and complex design he better upah u

Original poster pun xde reply, if he does ask him want to upah kat u or not! haha