Tag Archives: html

How To Easily Put A Form On Your Website

forms

Contact Forms. Everyone wants them on their website. It seems like quite a standard component that anybody should know about like the back of their hand. But it’s not true. Time and again I run into people who are pulling their hair out trying to get a simple contact form (or any type of form) on their site, or accomplishing it in a very long-winded and inefficient manner. This guide will teach you how to use the best tools to quickly create forms and embed them on your website, whether it’s a plain HTML / PHP website or a WordPress…

The post How To Easily Put A Form On Your Website appeared first on The Daily Egg.

Read more – 

How To Easily Put A Form On Your Website

Documenting Components In Markdown With Shadow DOM

Some people hate writing documentation, and others just hate writing. I happen to love writing; otherwise, you wouldn’t be reading this. It helps that I love writing because, as a design consultant offering professional guidance, writing is a big part of what I do. But I hate, hate, hate word processors.

Documenting Components In Markdown With Shadow DOM

When writing technical web documentation (read: pattern libraries), word processors are not just disobedient, but inappropriate. Ideally, I want a mode of writing that allows me to include the components I’m documenting inline, and this isn’t possible unless the documentation itself is made of HTML, CSS and JavaScript. In this article, I’ll be sharing a method for easily including code demos in Markdown, with the help of shortcodes and shadow DOM encapsulation.

The post Documenting Components In Markdown With Shadow DOM appeared first on Smashing Magazine.

View article:  

Documenting Components In Markdown With Shadow DOM

Introducing Mavo: Create Web Apps Entirely By Writing HTML!

Have you ever wanted to make a website that non-technical folks can edit right in the browser? Or have you ever wanted to make a website that presents an editable collection of items (e.g. your portfolio)? Or simply upload images to a website you made, right from the browser?

Introducing Mavo: Create Web Apps Entirely By Writing HTML!

Well, what if I told you, that you can do these things (and more!), just with HTML and CSS? No programming code to write, no servers to manage. You can make any element editable and saveable just by adding one HTML attribute to it. In fact, you can store your data locally in the browser, on Github, on Dropbox, or any other service just by changing an HTML attribute.

The post Introducing Mavo: Create Web Apps Entirely By Writing HTML! appeared first on Smashing Magazine.

Original post – 

Introducing Mavo: Create Web Apps Entirely By Writing HTML!

What Are the SEO Benefits of XML & HTML Sitemaps?

seo sitemaps

A sitemap is (usually) an XML document, containing a list of pages on your website that you have chosen to tell Google and other search engines to index. Google often uses the sitemap file as a guide to the pages available on your website — even though it may decide not to index every page you list on your sitemap. The sitemap also carries information about each page, including when it was created and last modified, and its importance relative to other pages on your site. This speeds up the process of indexing pages. A sitemap is one of those…

The post What Are the SEO Benefits of XML & HTML Sitemaps? appeared first on The Daily Egg.

Link to article – 

What Are the SEO Benefits of XML & HTML Sitemaps?

An Introduction To Building And Sending HTML Email For Web Developers

HTML email: Two words that, when combined, brings tears to a developer’s eyes. If you’re a web developer, it’s inevitable that coding an email will be a task that gets dropped in your lap at some time in your career, whether you like it or not. Coding HTML email is old school. Think back to 1999, when we called ourselves “webmasters” and used Frontpage, WYSIWYG editors and tables to mark up our websites.

An Introduction To Building And Sending HTML Email For Web Developers

Not much has changed in email design. In fact, it has gotten worse. With the introduction of mobile devices and more and more email clients, we have even more caveats to deal with when building HTML email.

The post An Introduction To Building And Sending HTML Email For Web Developers appeared first on Smashing Magazine.

Excerpt from – 

An Introduction To Building And Sending HTML Email For Web Developers

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends

I’m big on modular design. I’ve long been sold on dividing websites into components, not pages, and amalgamating those components dynamically into interfaces. Flexibility, efficiency and maintainability abound.

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends

But I don’t want my design to look like it’s made out of unrelated things. I’m making an interface, not a surrealist photomontage. As luck would have it, there is already a technology, called CSS, which is designed specifically to solve this problem. Using CSS, I can propagate styles that cross the borders of my HTML components, ensuring a consistent design with minimal effort.

The post CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends appeared first on Smashing Magazine.

See original article: 

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends

Building Social: A Case Study On Progressive Enhancement

We talk a lot about progressive enhancement and how it improves backwards compatibility. But how straightforward is it to apply progressive enhancement concepts to a real-life project? When designing a rich interactive experience, it can be difficult to determine what can be implemented purely using HTML and CSS and what absolutely requires JavaScript.

Building Social: A Case Study On Progressive Enhancement

Through this case study on redesigning the Building Social website, we’ll share some simple yet often overlooked front-end techniques that defer the use of JavaScript as much as possible, while providing some neat JavaScript enhancements, too.

The post Building Social: A Case Study On Progressive Enhancement appeared first on Smashing Magazine.

Visit source:  

Building Social: A Case Study On Progressive Enhancement

Creating A Living Style Guide: A Case Study


Living style guides are an important tool for web development today, especially in large, complex web applications. They help document styles and patterns, keep designers and developers in sync, and greatly help to organize and distill complex interfaces. Indeed, living style guides remain one of the best ways to communicate design standards to an organization.

Creating A Living Style Guide: A Case Study

Recently, our company went through the process of creating a living style guide. This is the story of how we developed our living style guide, the mistakes we made along the way, and why the current landscape of style guide generators did not suit our needs.

The post Creating A Living Style Guide: A Case Study appeared first on Smashing Magazine.

Read More:  

Creating A Living Style Guide: A Case Study

Turn Your AMP Up To 11: Everything You Need To Know About Google’s Accelerated Mobile Pages


In May of 2015, Facebook unveiled its new in-app publishing platform, Instant Articles. A month later, Apple declared that the old Newsstand experience (essentially a fancy folder full of news apps) would be replaced in iOS 9 with a brand-new news aggregation and discovery platform called Apple News.

Turn Your AMP Up To 11: Everything You Need To Know About Google's Accelerated Mobile Pages

Four months later, it was Google’s turn to announce its own, somewhat belated but no less ambitious, plan to revolutionize mobile news consumption with an open-source web-based solution called Accelerated Mobile Pages, or AMP. In just a few months, we’ve seen the relative tranquility of mobile digital publishing erupt into yet another full-scale platform war as Facebook, Apple and now Google compete for both the loyalty of publishers and the attention of readers.

The post Turn Your AMP Up To 11: Everything You Need To Know About Google’s Accelerated Mobile Pages appeared first on Smashing Magazine.

Link: 

Turn Your AMP Up To 11: Everything You Need To Know About Google’s Accelerated Mobile Pages

Reimagining Single-Page Applications With Progressive Enhancement


What is the difference between a web page and a web application? Though we tend to identify documents with reading and applications with interaction, most web-based applications are of the blended variety: Users can consume information and perform tasks in the same place. Regardless, the way we approach building web applications usually dispenses with some of the simple virtues of the readable web.

Reimagining Single-Page Applications

Single-page applications tend to take the form of runtimes, JavaScript executables deployed like popup shops into vacant <body> elements. They’re temporary, makeshift and not cURL-able: Their content is not really there without a script being executed. They’re also brittle and underperforming because, in service of architectural uniformity and convenience, they make all of their navigation, data handling and even the basic display of content the responsibility of one thing: client-side JavaScript.

The post Reimagining Single-Page Applications With Progressive Enhancement appeared first on Smashing Magazine.

View original post here – 

Reimagining Single-Page Applications With Progressive Enhancement