DesignM.agWeb Design Resources - Tools for Designers http://designm.ag Articles and Resources for Web Designers Tue, 22 Jul 2014 13:14:01 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.1 Introduction to Responsive HTML Newsletters with Zurb Ink Framework http://designm.ag/resources/responsive-html-newsletters-zurb-ink/ http://designm.ag/resources/responsive-html-newsletters-zurb-ink/#comments Mon, 07 Jul 2014 04:56:48 +0000 http://designm.ag/?p=85240

Advertise here with BSA


The learning process to create an efficacious newsletter is often tiring and difficult. But as you get more comfortable with newsletter design these ideas become simpler and easier. You'll always need a solid understanding of design principles when creating e-mail notices or newsletters. But you also need to know how to code newsletters in a manner that's best suited for most e-mail clients.

zurb ink newsletter framework template

I'd like to introduce Ink by Zurb which is a responsive newsletter framework. The basic template uses standard HTML tags for creating single-column or multi-column layouts which naturally respond to screen size. It's all fairly easy to understand once you've spent a bit of time playing with the code. I'll provide a quick walkthrough of the design process and how to use the framework.


Advertise here with BSA

]]>

Advertise here with BSA


The learning process to create an efficacious newsletter is often tiring and difficult. But as you get more comfortable with newsletter design these ideas become simpler and easier. You’ll always need a solid understanding of design principles when creating e-mail notices or newsletters. But you also need to know how to code newsletters in a manner that’s best suited for most e-mail clients.

zurb ink newsletter framework template

I’d like to introduce Ink by Zurb which is a responsive newsletter framework. The basic template uses standard HTML tags for creating single-column or multi-column layouts which naturally respond to screen size. It’s all fairly easy to understand once you’ve spent a bit of time playing with the code. I’ll provide a quick walkthrough of the design process and how to use the framework.

First Steps

I would always recommend designing a simple mockup of the e-mail in Photoshop or another graphics editor. This will help tremendously when coding into HTML/CSS because you know where all the graphics should be located and how to fit the text accurately. If you don’t have a design try winging it or creating something with bare HTML.

You can download Ink right from their website and this includes everything you would need. The examples are pretty basic yet they give you some idea of how the structure works. But more important is how you setup the code.

Ink uses a grid system with 12 columns along with a fixed 580px centered container. This is naturally responsive down to any smaller screen size. Since everything is created using tables it’s important to follow the same column/row structure. Take a look over the grid documentation to understand a bit more.

By following along with this structure you can ensure the whole layout will be responsive even on tiny screens. Work within these boundaries to craft your layout first, then customize the color scheme afterwards.

Images and Buttons

The purpose of a newsletter is usually to lead visitors onto some part of your website. This could be a specific blog post or even a landing page. Maybe you’re selling some new products and hope to garner a few sales.

Either way you’ll probably want to include a few buttons and/or images within the e-mail. Thankfully Ink has a few default buttons you can use or customize. The colors and hover effects are very simple to ensure full compatibility. But don’t be afraid to change up these color schemes to match whatever you need.

css button designs ink newsletter template

Additionally some designers may prefer using images in place of button links. Since most CSS3 properties will not render in e-mail clients, a glossy gradient button image would be the next best solution. It’s just as easy to setup images within your newsletter but they will need to be hosted on your website or another trusted server. You should add the width & height attributes directly onto the img tag so it will display in a fixed amount of space.

You’ll also be happy to know that retina images can be used in place of regular images. This means you design the image at twice the view size, then setup width/height attributes to accommodate. A 200×200 square image should be designed at 400×400 to achieve the clearest visibility.

Image widths should also be set to match however many columns you need. They will resize for responsive widths but Ink provides a standard column size chart with exact widths based on how many columns the image fits into.

Inline CSS Styles

Inside the Ink .zip file you can find ink.css which is added into the boilerplate using a link tag. But most e-mail readers need inline CSS because they restrict externally-linked resources such as stylesheets. Ink allows you to write CSS in the external file to keep everything separate and easier to code.

However once you have a polished newsletter design you’ll need to incorporate the Ink CSS as inline styles. This is as simple as copying & pasting all CSS into a <style></style> tag and double-checking that it still looks good. Although this may seem like a simple step it is essential if you expect a uniform design supported by most e-mail clients.

zurb ink newsletter css inline application

Ink provides an online webapp called CSS Inliner which can do the work for you. But it requires that you host the CSS externally and this webapp automatically copies the code for you. But I honestly don’t think it’s necessary when all you really need to do is copy/paste all the code and then remove the linked stylesheet.

Design Testing

At this point you should have a newsletter design that’s clean and looks nice. Everything should be naturally responsive and the styles should be inline along with the HTML. Before sending this out with a service like MailChimp or Campaign Monitor you might want to test the design first.

Both of the previous services offer a testing feature which you can utilize. They allow you to input e-mail addresses and send out a few copies just for practice. The big names you should consider are Outlook 2003/2007/2010, Gmail, Hotmail, and Yahoo. It’s not going to be possible to test everything so just try your best.

ink hero newsletter template outlook 2007 litmus

An online service Litmus can provide screenshot previews of your newsletter in many different e-mail clients. You don’t even need to own the software to get a rendered picture. But this does cost money so it’s not a solution for everyone.

Thankfully the Ink framework was developed with the greatest amount of support in mind. If you can test a small handful of the online services along with a couple desktop programs then you should have confidence in the rest. Ink will save you hours of time worrying about rendering issues, and starting with a template is always easier than starting from scratch.


Advertise here with BSA

]]>
http://designm.ag/resources/responsive-html-newsletters-zurb-ink/feed/ 0
30 Elegant Themes for Ghost http://designm.ag/resources/30-elegant-themes-for-ghost/ http://designm.ag/resources/30-elegant-themes-for-ghost/#comments Thu, 12 Jun 2014 14:19:26 +0000 http://designm.ag/?p=80906

Advertise here with BSA


A year ago, finding a blogging platform that focused on blogging was impossible. Even content creation platforms that advertised as having an easy set-up and were specifically for bloggers seemed to focus mostly on the creation of the layout of a blog. For instance, WordPress has some amazing news and magazine themes, but it certainly isn't a quick set-up. Tumblr themes are a bit simpler but still come with some bells and whistles that many found annoying. Bloggers just wanted to be able to quickly set up a simple but professionally designed blog and start publishing. John O'Nolan was one such blogger who became frustrated enough with the situation that he hired Hannah Wolfe as lead developer, received funding through Kickstarter, and created a simple blogging platform called Ghost. With so many supporters due to blogging platform ire already, Ghost quickly received the funding it needed to launch on 14 October 2013. The other good news is that there are themes for more than just writers. Portfolio ghost themes are also emerging. So, if you are a blogger or a designer looking to set up a simple blogging or even portfolio platform, Ghost is one platform that brings content back to the forefront on the web. In fact, below is a list of 30 of our favorite ghost themes so far. All are very elegant and, most importantly, provide a clean layout to help your content shine.

1. Penman


Advertise here with BSA

]]>

Advertise here with BSA


A year ago, finding a blogging platform that focused on blogging was impossible. Even content creation platforms that advertised as having an easy set-up and were specifically for bloggers seemed to focus mostly on the creation of the layout of a blog. For instance, WordPress has some amazing news and magazine themes, but it certainly isn’t a quick set-up. Tumblr themes are a bit simpler but still come with some bells and whistles that many found annoying. Bloggers just wanted to be able to quickly set up a simple but professionally designed blog and start publishing.

John O’Nolan was one such blogger who became frustrated enough with the situation that he hired Hannah Wolfe as lead developer, received funding through Kickstarter, and created a simple blogging platform called Ghost. With so many supporters due to blogging platform ire already, Ghost quickly received the funding it needed to launch on 14 October 2013. The other good news is that there are themes for more than just writers. Portfolio ghost themes are also emerging.

So, if you are a blogger or a designer looking to set up a simple blogging or even portfolio platform, Ghost is one platform that brings content back to the forefront on the web. In fact, below is a list of 30 of our favorite ghost themes so far. All are very elegant and, most importantly, provide a clean layout to help your content shine.

1. Penman

Demo & Download

2. Tasty

Demo & Download

3. Ghost – The Journey

Demo & Download

4. Nonus

Demo & Download

5. Helios

Demo & Download

6. Fixy

Demo & Download

7. Omikron

Demo & Download

8. Ghostwall

Demo & Download

9. Aperture

Demo & Download

10. Demon’strate

Demo & Download

11. Penoolis

Demo & Download

12. Ghex

Demo & Download

13. Ghost Stories

Demo & Download

14. Glampagne

Demo & Download

15. The Classy

Demo & Download

16. Cameraman

Demo & Download

17. Retro

Demo & Download

18. Ghoststrap

Demo & Download

19. Ghostentista

Demo & Download

20. Ghostium

Demo & Download

21. Swayze

Demo & Download

22. GhostScroll

Demo & Download

23. Simply Pure

Demo & Download

24. Magnum

Demo & Download

25. Suave

Demo & Download

26. StoryLane

Demo & Download

27. Banshee

Demo & Download

28. Curri

Demo & Download

29. Chronicle

Demo & Download

30. Writr

Demo & Download


Advertise here with BSA

]]>
http://designm.ag/resources/30-elegant-themes-for-ghost/feed/ 0
Top 15 PSD To HTML Conversion Services http://designm.ag/resources/top-15-psd-to-html-conversion-services/ http://designm.ag/resources/top-15-psd-to-html-conversion-services/#comments Tue, 20 May 2014 12:43:04 +0000 http://designm.ag/?p=84785

Advertise here with BSA


If they could choose, web designers would rather focus on the aesthetics. As well as looking gorgeous, the end result should be compatible across browsers, fast loading and user friendly. It is for this reason that it is a good idea to convert photo shop mockups of designs via a trusted PSD to HTML service, […]

Advertise here with BSA

]]>

Advertise here with BSA


If they could choose, web designers would rather focus on the aesthetics. As well as looking gorgeous, the end result should be compatible across browsers, fast loading and user friendly.

It is for this reason that it is a good idea to convert photo shop mockups of designs via a trusted PSD to HTML service, unless you feel brave enough to do the hand coding on your own. Here are 15 different solutions that are popular in 2014.

CSS Chopper

CSSChopper should really be getting a constant standing ovation. The company is a certified service provider that is providing services in more than 90 different countries around the world. They own an infrastructure that is state-of-the-art, which enables them to render 100% guaranteed satisfaction.

The reason, why it is so good is that, it can cover all of the different aspects of web development and design without any hassle. The team is made up of 200 professionals, all of them have been working on the same platform for five years. They have accomplished the requirements of 9200 customers from a wide range of different business industries at the same time completing 13300 projects.

Customers are also very satisfied with company as it offers technical support across all the different time zones 24 hours a day and seven days a week. It also demands only 10% on the upfront cost in order to get things started and has engagement models that are flexible.

They can also conduct communication via their diverse networks in a seamless way and can understand what the client desires quickly and efficiently. They also offer a 10% special discount for birthdays and these are given to all their present clients. They also offer a 15% discount to those who rely on the company for their second project as well.

PSDgator

The PSDGator comes second in our listing. Designs are exported by professional developers into W3C valid markup that is in HTML 5 and CSS 3. Users can also feel confident that everything will be compatible with all the latest web browsers. This includes Google Chrome, Safari, Opera Mozilla, Firefox and Internet explorer. As well as this, each page that has been coded will have also been tested on browsers for both the Mac and the PC.

This service is charged at $99 and offers a quick turnaround which is usually between two business days. The service will set up new websites and will also recode your existing websites. This service will also offer a money back guarantee and will keep in touch with you via a selection of different networks, including Skype, phone and email, all of which are available 24 hours a day and seven days a week. They also offer discounts depending on how many pages are needed to be coded. They usually go up to 25% and will offer up to 10% on all existing clients for future projects.

Direct Basing

Direct Basing is a PSD to HTML service that provides expert web development solutions and can help clients create SEO friendly code that is compatible across browsers.

This team of web developers always creates websites that have been optimized for search engines and works on a professional level at all times. Clients can also select from options when uploading the design, including fonts and JavaScript script features.

WordPress, Joomla or Magento eCommerce implementation is also possible with Direct Basing. They are also one of the fastest services in this market and can deliver projects within 12 hours. Clients also benefit from an unlimited amount of support, as well as a very good price quality ratio. Many large companies have worked with Direct basing and this includes Volvo Cars, KLM (Royal Dutch Airlines), Media Markt and Rabobank International, just to name a few.

XhtmlWeaver

XhtmlWeaver is an agency based in Sydney that offers great web development services. The company offer HTML 5 and CSS, three based markup as well as very well coded Jquery JavaScript code. They also offer WordPress solutions in CMS format and are very skilled in WooCommerce, Parallax and Responsive Design.

They are also well known for never having missed out on a project that has a short turnaround. They always strive to meet the clients needs and do thorough tests on all the projects that they build using all the latest browsers and operating systems so as to test compatibility.

Webby Monks

One company that has reshaped the PSD to HTML industry is that of Webby Monks. They have done this by adding interactivity and this can be found at the galleries, where they offer over 150 interactive elements that are on offer to clients whenever they choose components for the PSD to HTML conversion jobs.

They’re starting price ranges from $105 per page. They also have a technical competency with bootstrap and other frameworks. They also offer integration with leading CMS and e-commerce websites such as Joomla, WordPress and Magenta to name a few.

HTML Blender

HTML blender has developed a good reputation since it began coding in 2007, and now has a wide range of clients thanks to its great customer service and competitive range of prices. The w3Blender network is complete with professional project managers, SEO technicians, and business analysts working alongside developers each step of the way.

You should reach out to HTML Blender by phone, live chat, or email as soon as possible if you prefer to pair up with a fully fledged web development agency, rather than hire markup programmers.

HTML Panda

With over 1000 clients and successful projects that are reaching towards 2000 number, HTML panda is developing a name for itself in the web development industry. They provide PSD to HTML services and also offer cutting-edge infrastructure and collaborative workflow systems that are interactive and fulfill the clients requirements. The company also ensures 100% satisfaction for its clients.

40 Dollar Markup

psd to html-40dollarmarkup

Offering W3C valid and pixel perfect coding that is cross browser compatible, $40 markup is a popular service. Professionals within the company can convert HTML to PSD manually before they charge reasonably well and give refunds to the client if they’re not happy.

The reason why they are called $40 markup is because this is what you pay for the hand coding the day they present it to you. You also pay $25 for the inner pages and this is a good deal as many other companies charge separately for the use of certain frameworks, such as bootstrap.

XHTMLized

The reason why XHTMLized are good is because they are well trusted and have worked for big companies such as Twitter. They also offer full disclosure and will work with you on a one-to-one basis. They are also very keen to keep your security and your confidentiality intact and have developed an excellent way of charging by the hour. If you are not happy with them, they will fix the price and you can agree or disagree.

PSD 2 HTML

PSD to HTML are a research lab that is heavily funded and is striving to create new technologies through experimentation. They also are involved in training programs that are intensive and of a very high standard. They have built up their services after eight years of development and will immediately refund their client if they are not happy with the services that are provided. They provide SEO friendly coding that is optimized to work with a lot of wide range of webpages with fast loading speeds.

SlicenPress

SlicenPress are focused on developing long-term partnerships with clients and have a team that is focused on doing a consistently good job. They also test every different layout of browsers heavily, including Firefox, Safari and chrome and also focus on devices such as the iPad, the iPhone, The android, as well as Macs and PCs. Their prices are usually fixed according to the requested turnaround and they will offer $449 for a delivery of up to 2 business days. They also offer $349 for a 3 day turnaround and $299 for a 6 day turnaround.

XHTMLJunction

XHTML junction are popular as they offer a very enticing offer. For $59 a client can have their homepage coded with a 50% discount for the inner pages of the website. Many clients choose the responsive package that can be used for tablets and mobile phones. The services on offer range from $99 for a homepage and $48 for inner pages. The team will also check and double-check throughout the code so as to make sure that it is completely perfect and loads well on a wide range of browsers.

PSDCenter

If you need responsive code conversions for designs that are static then PSDcenter is the service to go for. This company is becoming known as an internationally recognized provider and is sitting on the same level as a bigCommerce partner, shut the fire expert and national builder architect.

They are also popular as they offer a turnaround that is very quick and support that is of a very high response. They also offer free quotes and can begin on your risk free project for around $250. Every job that they carry out is also completely transparent and has no extra costs and they also send you an invoice once the work has been completed.

Netlingshq

Nestlings is a company that is keen to help out a wide range of freelancers, as well as entrepreneurs and design firms in the field of web design. A standard homepage costs $80 and an inner page costs $40, but they pride themselves on giving an extremely fast turnaround time. This is usually 16 hours. The price goes up $205 for a homepage and $55 for the inner page when the code is responsive. The deadline for this can be between 16 and 24 hours. However, many clients have said that they deliver before before their scheduled time.

Bloody Hell

The last company on our list is called bloody hell. This team consist of a group of experts from Poland who are offering services that include free support on projects that have already been developed within the last 30 days. Bloody hell offer 100% money back guarantee if the project does not meet the high standards that is promised. A discount of 50% is also offered of the standard price for each inner page that is included. As well as this, the homepage is priced at a respectable hundred $189.


Advertise here with BSA

]]>
http://designm.ag/resources/top-15-psd-to-html-conversion-services/feed/ 0
iStock Promo Codes - DesignM.ag http://designm.ag/resources/istock-promo-codes/ http://designm.ag/resources/istock-promo-codes/#comments Thu, 03 Apr 2014 14:12:33 +0000 http://designm.ag/?p=68308

Advertise here with BSA


We have something a little different for you today. Our friends over at iStock reached out to us to let us know about a promotion they are running and gave us these promo codes to share with our readers for additional savings off any credit pack...

Advertise here with BSA

]]>

Advertise here with BSA


We have something a little different for you today. Our friends over at iStock reached out to us to let us know about a promotion they are running and gave us these promo codes to share with our readers for additional savings off any credit pack. These iStock Promo Codes (or Coupons, Discounts, Vouchers – whatever you call them) will help your money go that extra mile on your next purchase.

iStock Promo Codes – Last Updated April 2014

iStock Promo Code - Save 10%
iStock Promo Code - Save 5%


How to use this iStock promo code:

  1. Click on the button above to unlock your iStock promo code.
  2. Select your desired credit package (the more credits you buy, the bigger your savings)
  3. Enter the promo code at the bottom of the page and click the “Next” button.
  4. Review your order and check out.
  5. For additional iStock promo codes please visit our friends over at Vecteezy.



Why Are They Giving Away Promo Codes?
Many online retailers will argue that promo codes do not add incremental value to a business – only eat away at the margin and taking revenue out of the cart. It would be easy to assume that giving a customer a promo code would cause them to buy the same amount but at a lower price.

However, after discussing this with one of iStock’s marketing managers they tell us their research shows the complete opposite. “People tend to take advantage of the savings by spending even more on their order than they previously would without a coupon” said Blair DeJong, Marketing Manager for Getty Images and iStock.

He continued “Based on our findings, we have established that coupons do add incremental value to the business and are, in fact, necessary to acquire new customers and retain loyal, existing customers.”

That is something we’re excited to hear. We will continue to update this page each month as new codes become available. In the meantime please feel free to leave a comment below and let us know how much you saved.


Advertise here with BSA

]]>
http://designm.ag/resources/istock-promo-codes/feed/ 0