#menu and submenu in html examples

[pintire]

More menu using HTML and CSS

The More menu using HTML and CSS created by Mikael Ainalem. Create a dropdown menu that appears when the user moves the mouse over an element inside a navigation bar See the Pen The more menu by Mikael Ainalem (@ainalem) on CodePen.

[heavenlystrategies]

DROPDOWN NAVIGATION TUTORIAL

This is a tutorial on a dropdown navigation for this Gelato Grotto website. We start off with a basic build of the website which can be downloaded here: link

We’ll begin by writing the HTML needed, including a <header> with a <nav> and a <section> for a hero banner. Inside the <nav>, we’ll put an unordered list with a class of .menu and two nested unordered lists with a class of .submenu. These are the following menu items and submenu items:

Current Flavours About

>> Our Story

>> Farms

>> Collaborators

>> Sustainability

>> FAQs

Shops >> Coolangatta

>> Fortitude Valley

>> Mooloolaba Beach

>> South Brisbane

ContactIn the <nav>, include the <svg> next to the links with nested menus.

In the <section>, make sure that there are two non-semantic child elements. One will be empty, while the other will have the typography. These will be flex items for the desktop view.

Validate and outline your HTML. There shouldn’t be any validation errors as it needs to be a clean code before writing any CSS.

We’ll start the CSS with universal styles (i.e. things that will remain the same regardless of the size of the viewport).

Next, style we’ll style for the mobile view. The <nav> should be vertical and fill the whole screen. For this view, we will hide the <svg> element, since we don’t need to show that there are sub-menus. Scrolling down, the hero banner should be darker and smaller, with all of its contents centred.

Now we’ll style the desktop view. Using a media query, define the flex containers.

Make the <svg> element visible to indicate the sub-menus.

Position and hide the sub-menu items (i.e. the drop-down menu).

When hovering over the list item <li> make the submenu items appear. Add a smooth transition (add transition: all 0.5s ease; to ul.submenu ).

Now, write a media query for the largest view for example (@media screen and (max-width: 1100px) {) . Inside, prevent the flex items within the hero banner from expanding by setting a max-width.

[tonkibasic]

Texmacs plugins

#TEXMACS PLUGINS INSTALL#

#TEXMACS PLUGINS CODE#

#TEXMACS PLUGINS LICENSE#

#TEXMACS PLUGINS DOWNLOAD#

$TEXMACS_HOME_PATH/plugins/ myplugin/styles Type of plug-in only consists of data files, such as a collection of Plug-in is very similar to the subdirectory structure of $TEXMACS_PATH. Notice that the subdirectory structure of a Will be automatically added to the PATH environment Will be automatically recognized by TeXmacs at startup. In addition, you mayĬreate the following subdirectories (when needed):įor language related files, such as dictionaries (not yetĪs a general rule, files which are present in these subdirectories Where to put all your files (recall that $TEXMACS_HOME_PATHĭefaults to $HOME/.TeXmacs). In order to write a plug-in myplugin, you Upgrade a plug-in, just remove the old version in $TEXMACS_PATH/plugins Depending on the plug-in (read the instructions), this is

#TEXMACS PLUGINS CODE#

Then you should first compile the source code before relaunching Is distributed as a source tarball like myplugin- , Your plug-in should again be automatically recognized. Here we recall that $TEXMACS_HOME_PATHĭefaults to $HOME/.TeXmacs. Install TeXmacs yourself, or if you do not have write access to $TEXMACS_PATH, then you may also unpack the tarball in $TEXMACS_HOME_PATH/plugins. Read the documentation which comes with your plug-in in order to learn Tools→ Update→ Plugins and relaunch TeXmacs. The plug-in should be automatically recognized. This will create a myplugin subdirectory in Then you should unpack this tarball in the directory $TEXMACS_PATH/plugins, If you installed TeXmacs yourself in the directory $TEXMACS_PATH, Will usually be distributed on some web-site as a binary tarball with

#TEXMACS PLUGINS INSTALL#

Plug-ins are both easy to install by other users andįrom the user's point of view, a plug-in myplugin Universal mechanism to combine one or several such extensions in a Users may define their own style files, customize the user interface, There are many ways in which TeXmacs can be customized or extended: TeXmacs plug-ins About Learn Contribute 1. ' ), 'add_to_insert_menu', 1 )) 43 end 44 cmd = makeStreeNode ( "scilab-add-to-insert-menu". ' ), 'add_to_insert_menu', 2 )) 40 elseif size (nam, '*' ) 1 then 41 error (msprintf (gettext ( '%s: Wrong size for input argument #%d: A ' +. ' ), 'add_to_insert_menu', 1 )) 37 elseif type (lst ) 10 then 38 error (msprintf (gettext ( '%s: Wrong type for input argument #%d: A ' +. ' ), 'add_to_insert_menu', 2 )) 34 elseif type (nam ) 10 then 35 error (msprintf (gettext ( '%s: Wrong type for input argument #%d: A ' +. 23 // 24 // Examples 25 // add_to_insert_menu ("Sparselib", libraryinfo ("sparselib")) 26 // // Now the menu Scilab -> Insert contains an entry "sparselib" 27 // 28 // Authors 29 // François Poulain 30 31 if argn ( 2 ) ~ = 2 then 32 error (msprintf (gettext ( '%s: Wrong number of input argument(s): %d' +. 19 // 20 // Description 21 // The function add_to_insert_menu populates the Scilab session menu with 22 // code snippets to be inserted. 18 // lst : string column vector: the text of submenu entries. 15 // 16 // Parameters 17 // nam : string, title of the submenu.

#TEXMACS PLUGINS LICENSE#

For details, see the file LICENSE 9 // in the root directory or. 8 // It comes WITHOUT ANY WARRANTY WHATSOEVER.

#TEXMACS PLUGINS DOWNLOAD#

As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) Scilab source code syntax highlighting (style: standard) with prefixed line numbers.Īlternatively you can here view or download the uninterpreted source code file.ġ //***************************************************************************** 2 // MODULE : add_to_insert_menu.sci 3 // DESCRIPTION: Provide Scilab routines to populates the Scilab session menu 4 // with code snippets to be inserted.

[pinertalking]

Qt plain text editor

#Qt plain text editor code#

'Text files (*.txt) HTML files (*.html)') MeshMenu.addAction(self.add_sphere_action) Self.add_sphere_action = QAction('Add Sphere', self) #you can add many items on menu with actions for each item #create the menu with the text File, add the exit action (self.my_OpenDialog)ĮxitAct = QAction(QIcon('exit.png'), '&Exit', self) OpenAct = QAction(QIcon('open.png'), '&Open', self) Self.editor_tHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAsNeeded) Self.editor_tVerticalScrollBarPolicy(QtCore.Qt.ScrollBarAsNeeded) tWindowTitle("parse sensors output - catafest") #you can add new action for File menu and any actions you need #create the action for the exit application with shortcut and icon #create the init UI to draw the application # top left of rectangle becomes top left of window centering it # move rectangle's center point to screen's center point #create the def center to select the center of the screenĬp = QDesktopWidget().availableGeometry().center() Size_tVerticalPolicy(QSizePolicy.Preferred) #init the example class to draw the window application

#Qt plain text editor code#

The source code is simple to understand and is commented for a better understanding.įrom PyQt5.QtWidgets import QMainWindow, QAction, qApp, QApplication, QDesktopWidgetįrom PyQt5.QtWidgets import QMenu, QPlainTextEdit, QSizePolicy The next step was to use QPlainTextEdit so the task was simple: an editor.īecause I created another article about a publisher, see this tutorial, I decided to attach a main menu with submenus and customize it. Installing collected packages: PyQt5-sip, PyQt5 Today I installed Python 3.8.3 and my favorite PyQt5 and started to see how much I forgot from what I knew.ĭownloading PyQt5-5.14.2-5.14.38-none-win_amd64.whl (52.9 MB) If you plan to support only plain texts, then QPlainTextEdit is the right choice.I haven't played python in a long time. Also the way text is formatted is simpler. So the difference is that QPlainTextEdit is optimized for handling plain text, and can be used even with very large plain text files. It also makes for aįast log viewer (see setMaximumBlockCount()). The editor with line wrap enabled in real time. Possible to handle significantly larger documents, and still resize Respectively paragraph-by-paragraph scrolling approach. Replaces a pixel-exact height calculation with a line-by-line The plain textĭocument layout does not support tables nor embedded frames, and Simplified text layout called QPlainTextDocumentLayout on the textĭocument (see QTextDocument::setDocumentLayout()). Its performanceīenefits over QTextEdit stem mostly from using a different and Technology that is behind QTextEdit and QTextDocument. QPlainTextEdit is a thin class, implemented by using most of the Has its own attributes, for example, font and color. ParagraphsĪre separated by hard line breaks. A document consists of zero or more paragraphs. By default when reading plain text, one newline signifies a A paragraph is aįormatted string which is word-wrapped to fit into the width of the QPlainTextEdit works on paragraphs and characters. QTextEdit, but is optimized for plain text handling. QPlainText uses very much the same technology and concepts as Is optimized to handle large documents and to respond quickly to user QPlainTextEdit is an advanced viewer/editor supporting plain text.

[heckenkapelle]

Key Aspects of a Good Website

The first Key Aspect of a Good Website is accessibility. If your website is not easy to read, it will be difficult for your customers to understand your message. Also, if you do not provide contact information, visitors will be frustrated. Your messaging should be as clear as possible. It should reflect the branding of your company. It should reflect the logo and brick and mortar location. It should be easy to navigate and reflect the brand and image of your business.

A website should be user-friendly and functional. The design should be simple, easy to use and make it easy to navigate. You should also ensure that the navigation is easy to use. Most websites have a main menu and several submenus. A good menu is one of the most important parts of a website. It is a good idea to use simple HTML and JavaScript menus. These work well on most browsers, but they are not universally compatible.

It is also important to ensure that the navigation is easy to find and work efficiently. The site should be easy to navigate and easy to read. A broken page can discourage your visitors. A well-structured and optimized website should also be fast and stable. It should also look aesthetically pleasing. It should be user-friendly and work as expected on different devices. Furthermore, it should be consistent from top to bottom.

A good website should adhere to standards and make sure that its elements look good. This includes making the content accessible to everyone. For example, if you write the content in your own field, make sure that you use a font that is easy to read and that you have the correct font size. Another way to improve the user experience is to provide the right error message. Providing the correct error message is a great way to improve usability and user experience.

A good website will be easy to navigate and provide the visitor with something they need. It will be easy to access all sections of a site and make it easy for visitors to navigate. All of these features will be useful to the visitors. Ultimately, a good website will be successful if it can meet the needs of its visitors. It will be able to convert visitors and increase profits. If the site is user-friendly, it will be more successful.

An effective website will provide users with relevant information. Moreover, a good website should be easy to navigate. This means that it should be easy for the user to find and navigate. The website should be user-friendly, easy to use, and have an attractive design. If your visitors can't find what they are looking for, they will not come back. A great website will have the right content. And it should also sell products.

The navigation of a website should be easy to find and use. It should be easy for visitors to navigate and should be clear to the visitor. A good website has a well-organized navigation bar, and it should be easy for the user to locate the most relevant section. The information on a website should be logically structured and not redundant. It should be organized to make it easier to understand. It should be easy for the visitor to get what they need.

An excellent website will be able to convert users into brand ambassadors and engaged customers. The site should be easy to navigate and use the most important keywords. This is the key to making a successful website. But, it's not enough to create a good website. It must be unique in order to stand out from the crowd. And you need to make it easy for people to find and use. If you're selling products or services online, you need to create a website that meets these needs.

A good website is easy to navigate. A good website makes the user want to buy. It uses highly appealing words. The main menu must have a clear purpose and be easy to understand. The navigation bar should be prominent and easy to read. A navigation bar should be easy to find. It should also be user-friendly. Those who have trouble navigating a website will never find what they need. This is an essential part of a good website.

[hydrus]

Version 423

windows

zip

exe

macOS

app

linux

tar.gz

𝕸𝖊𝖗𝖗𝖞 𝕮𝖍𝖗𝖎𝖘𝖙𝖒𝖆𝖘!

I had a good week making some small fixes and improvements to finish up the year. This is the last release of the year. There is a large poll on what 'big thing' to work on next:

poll

Here is the poll on what large work to go for next:

https://www.survey-maker.com/poll3310902xA574481e-102

You can vote on multiple items. Please don't worry about the seriousness of it too much--I have a good idea of what is likely to win already, and if there are obviously jank votes, I'll reserve the right to discount a result--but I am particularly interested to know what is and is not popular further down the list. I'll take the results on the 6th of January.

The end of 2020 has come quick for me. I still have the network updates 'big job' to do, so that's first for 2021 Q1, but after that, I will plan out and hack away at the top item(s) on the poll.

If you were not aware, a team of users is doing great work managing the Github issue tracker for hydrus. There is also a process there for bumping issues with reaction votes, viewable for big jobs like so:

https://github.com/hydrusnetwork/hydrus/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+milestone%3A%22Major+jobs%22

I regret that am doing pretty terribly at consuming my Github work queue, but we'll see how 2021 goes. I'd like to start relying on that more to better prioritise my work.

work is all misc this week

The settings for autocomplete auto-search and character threshold have been moved from options->speed and memory to tags->manage tag display and search. They are also now service-specific! So, you can now set 'all known tags' or 'PTR' to autocomplete after, say, 5 characters but your 'my tags' to always get all results.

I worked on the recently re-activated '*' and 'namespace:*' advanced searches, which were running slow in the new pipeline on larger clients. I have improved some situations, and I think I have reduced the worst case scenario, but some large clients will still have trouble. I am not happy here, nor with other namespace- and subtag- lookup speed across the program, so I have made a plan to make some clever new indices here. As I have simplified and cleaned much of the tag logic over the past year, I now see the next holes that I should fill.

The new siblings and parents tag right-click menu proved a little tall after all, so I have reworked it to group items by all the services that share them. It is denser to look at, but I think it'll highlight unusual exceptions when you are trying to fix application. The 'this is the ideal' line is also removed.

You can now sort a row of pages by name from their right-click menu.

Advanced users: The parser edit UI's test panel now shows more data, and it formats JSON prettily. It isn't anything close to what a browser's developer mode will give you of course, but it is nicer. That panel also detects if you hit a jpeg or something and says so, rather than dumping garbage to the test panel or just throwing an error.

full list

tag autocomplete searches:

the 'fetch results as you type' and 'do-not-autocomplete character threshold' options are moved from _options->speed and memory_ to _tags->manage tag display and search_. they are now service specific!

getting the raw '*' autocomplete is now hugely faster when both file and tag domains are specific (i.e. not 'all known xxx')

getting the raw '*' autocomplete is now hugely faster in 'all known tags' domain. this is likely still bonkers on any decent sized client that syncs with the PTR, but if you have a small client that once synced with the PTR, this is now snappy

the cancelability of 'namespace:*' and 'match namespaces from normal search' searches should be improved

'namespace:*' queries are now much faster in some situations, particularly when searching in a specific tag domain (typically this happens in manage tags dialog) or a small-file client, but is still pretty slow for clients with many files, and I think some scenarios are still bananas. I am not happy here and have started a plan to improve my service domain caches to deal with several ongoing problems with slow namespace and subtag lookup in different situations

fixed an issue with advanced autocomplete result matching where a previously cached 'character:sam' result could match 'char:sam' search text

some misc code cleanup and UI label improvements in autocomplete

.

the rest:

the siblings & parents tag menu, which proved a little tall after all, is now compressed to group siblings, parents, and children by the shared services that hold them. it takes less space, and odd exceptions should be easy to spot

this menu also no longer has the 'this is the ideal tag' line

added 'sort pages by name a-z/z-a' to page right-click menu and tucked the sorts into a submenu

the parsing test panel now shows up to 64KB of what you pulled (previously 1KB)

the parsing test panel now shows json in prettier indented form

when the parsing test panel is told to fetch a URL that is neither HTML or JSON, this is now caught more safely and tested against permitted file types. if it was really a jpeg, it will now say 'looks like a jpeg' and disable parse testing. if the data type could not be figured out, it tries to throw the mess into view and permits parse testing, in case this is some weird javascript or something that you'll want to pre-parse convert

the dreaded null-character is now eliminated in all cases when text is decoded from a site, even if the site has invalid unicode or no encoding can be found (e.g. if it is truly a jpeg or something and we just end up wanting to throw a preview of that mess into UI)

the 'enter example path here' input on import folders' filename tagging options edit panel now uses placeholder text and auto-removes 'file:///' URL prefixes (e.g. if your paste happens to add them)

the 'fix invalid tags' routine now updates the tag row in the local tags cache, so users who found some broken tags were not updating should now be sorted

added --db_cache_size launch parameter, and added some text to the launch_parameters help about it. by default, hydrus permits 200MB per file, which means a megaclient under persistent heavy load might want 800MB. users with megamemory but slow drives might want to play with this, let me know what you find

updated to cloudscraper 1.2.50

next week

I am now on vacation. I have some family Christmas things going on, and otherwise I am looking forward to grinding away at lategame X3 TC with some Wagner. I hope you can have a good break as well. I'll be back to normal in the new year, and 424 should be out on the 6th of January.

[codificandolabs]

Curso HTML5, CSS E JAVASCRIPT (1 - Introdução)  | HTML5, CSS AND JAVASCRIPT course (1 - Introducion)

Olá, pessoal! Tudo bem com vocês?

Neste primeiro post do Tumblr, começarei com um curso de HTML5, CSS e Javascript para iniciantes.

Introdução

Começarei do nível mais básico falando um pouco sobre as linguagens do curso:

O HTML é uma linguagem de marcação (HTML - HyperText Markup Language) usada para densenvolvimento de páginas web. É uma linguagem simples de se aprender, normalmente, os estudantes de programação começam por ela.

O CSS (Cascade Sheet Style)  nada mais é que uma série de regras que definem um estilo. Com o CSS criamos um arquivo ditando as regras: o espaçamento entre um parágrafo; a cor do título; o tamanho da fonte do título.

O Javascript é uma linguagem de programação client-side. Ela é utilizada para controlar o HTML e o CSS para manipular comportamentos na página. Me pergunte agora: ���Como assim comportamento?”. Agora eu respondo: um comportamento comum, por exemplo, é um submenu. Sabe quando você passa o mouse em um ítem do menu, e aparece um submenu com vários outros ítens? Pois é. A obrigação de fazer aparecer esse submenu é do JavaScript. O submenu estava escondido, e quando passamos o mouse no ítem, o submenu aparece. Todo esse comportamento quem vai executar é o JavaScript ¹.

fonte: 

(¹ parte do texto do Javascript veio desse site: http://tableless.github.io/iniciantes/manual/js/)

__

Hello guys! All right with you?

In this first post from Tumblr, I’ll start with an HTML5, Css and Javascript course for beginners.

HTML is a markup language (HTML - HyperText Markup Language) used for the development of web pages. It is a simple language to learn, normally, programming students start with it.

CSS (Cascade Sheet Style) is nothing more than a series of rules that define a style. With CSS we created a file dictating the rules: the spacing between a paragraph; the title color ; the font size of the title.

Javascript is a client-side programming language. It is used to control HTML and CSS to manipulate behaviors on the page. Ask me now, “What do you mean, behavior?” Now I answer: a common behavior, for example, is a submenu. Do you know when you mouse over a menu item, and a submenu appears with several other items? Yeah. The obligation to display this submenu is JavaScript. The submenu was hidden, and when we hover the mouse on the item, the submenu appears. All this behavior who will perform is JavaScript ¹.

Sources:

(¹ part of the text of Javascript came from this site: http://tableless.github.io/iniciantes/manual/js/)

[t-baba]

How To Use the UberMenu Plugin To Create a WooCommerce Mega Menu

The menus that appear on your website are the gateway to your entire website's content. They provide the user with a quick and easy way to find exactly what they are looking for on your website. 

No matter what type of business you are running on your WordPress website, this hassle-free site navigation must be present on your website. Without this, your website viewers will become lost and frustrated and your webpages will have high bounce rates.

WordPress

When to Use (and Not Use) a Mega Menu for Navigation

Rachel McCollin

WordPress

UberMenu and 7 Other Best Mega Menu Plugins

Jane Baker

WordPress

An Easy Way to Code a Mega Menu in WordPress

Rachel McCollin

WordPress

The Best WordPress Menu Plugins: Mega Menus, Sticky Menus, and More

Lorca Lokassa Sa

Unfortunately, the menu customization options in WordPress themes are very limited. Even if you have purchased a dedicated theme for your site, these menus can leave you with only a few basic customization features. By using the UberMenu WordPress plugin, you will have the flexibility to create menus that will suit any of your websites needs. This feature-rich plugin is the most advanced WordPress menu on the market and is a must-have if you require more than just a few basic menu customization options. 

In this article, I am going to show you just how powerful this plugin by creating a nested header menu for an online clothing store. Watch the video below to see how we do it.

  What We Will Be Building

eCommerce stores require stylish and deeply structured menus to categorize all of the companies products in a way that the user can easily navigate the site. Our clothing company is no different. By using the UberMenu plugin, we will be able to create a nested menu structure to fit all our different categories and subcategories of clothing. We will also be styling the menu to fit with the theme of our website. We will begin by setting up the actual menu in the WordPress dashboard and then move on over the plugin’s settings to further customize the menu. Below is an image of what our finished nested and styled menu will look like for our WordPress eCommerce clothing website.

Creating the Mega Menu

First, we are going to start with the creation of the menu. To do this, we first need to install the UberMenu plugin. Once we have installed the plugin, we can then head on over to Appearance > Menus in the WordPress dashboard. We will create a new menu in the menu editor by clicking the create a new menu link on the top of the editor and label it "eCommerce menu." From here, we can start adding in all our pages. For our clothing store menu, we want to make sure we have all the categories of clothing for men and women in a detailed menu so our customers can find the exact article of clothing they are looking for. We are going to add 30 different pages here from the Pages drop-down menu on the left-hand side of the menu editor. These pages include clothing for men and women. We are going to check the boxes of all 30 categories and click the Add to Menu button. This will display all of the pages in the menu structure editor. 

Now it is time to create the nested menu with all our different subcategories. We are going to drag and drop the men and women page at the top. Again, the purpose of creating this customized menu is to ensure that the website is easily navigable. In the Add Menu Items left-hand editor, there is a section called UberMenu Advanced Items. By opening this menu you can see a list of items that you can use can add to structure the menu. For our menu, we would like to create tabs to nest our different categories like in the image below. 

To add these tabs, we are going to check the box next to Tabs Block and click Add to Menu. Repeat this process again as we need two tabs, one for men and one for women.  From there we are going to move each of the tabs blocks to nest right under the men and women pages. Here is what this should look like. 

After we added these tabs, then we are going to structure the clothing categories. First up for the men's category is going to be the activewear page. We will drag and drop this page to nest right under the tab block. Within this men's activewear category, there are also the subcategories athletic jackets, workout shorts, and work shirts. These three types of clothing will be nested under the activewear clothing category. Here is what our menu looks like so far with the nested men's activewear clothing. 

We are now going to repeat this process of nesting specific articles of clothing under their appropriate category for the rest of our pages that we added to the menu editor. We are going to make sure to add the second tabs block that we inserted into the editor under the women's parent category. Once all the pages have been placed in their respective spots, here is what the menu will look like.  

Styling The UberMenu

Now that we have created the menu structure it is time to move onto the styling of the menu so it will fit in seamlessly with our website’s theme. Head on over to Appearance > UberMenu in the WordPress dashboard. This will open up the UberMenu settings. From here, we will start by clicking on the Basic Configuration tab in the menu and set the skin of the menu. From the dropdown menu, we will choose the "Red & Black" skin as this red top-level header and black submenu color will fit nicely with our website’s theme. There are a ton of options to choose from here so browse through them and find the one that works best for your theme. 

If you would like to see what the different skins look like or view any of the changes you have made in the settings, you can always click on the Show All tab and click the View Menu in Sandbox button. This will open up a separate tab on your browser where you can view any menu that you create with UberMenu. 

The next setting we are going to change around is in the Position & Layout tab on the UberMenu settings. Scroll down to Top Level Menu Items > Horizontal Item Alignment. We want the top-level menu items to be aligned to the left so we will click the circle next to Left. 

Lastly, we are going to go to the Style Customizations tab. We are just going to change around the top-level header and column header font sizes so they are easily readable by our website visitors. We will change the Top Level Font Size to 15 and Column Header Font Size to 13.

Now that we have completed structuring and styling the menu, it is time to integrate it into our website. 

Integrating The UberMenu

To integrate the UberMenu into our website, we are going to head on over to the Integration tab. We will checkbox the Primary box in the Automatic Integration Theme Location section. This will enable the menu we just created to be set as the primary menu in our theme. Next, we are going to go to Themes > Customize > Menus in the WordPress dashboard. Under the menus header, choose the eCommerce menu that we created. 

Finally, choose the menu locations tab at the bottom of the menu and choose eCommerce menu. 

There you have it! We created and implemented a nested menu that will work perfectly for our eCommerce website.

To view the menu creation process and integration of the menu, watch the video below. 

  Getting the most out of the plugin

The UberMenu plugin is a very complex plugin that allows you to customize every possible aspect of the menu. With the large list of features available, it can be easy to get lost in all the drop-down menus and text fields in the plugin's settings. Below, I have gathered a list of 3 of the most important features of this powerhouse plugin, so you can apply only the most important features to your menu. 

1. Advanced Menu Items

In the WP Dashboard > Appearance > Menus, you can find the UberMenu Advanced Items drop-down menu that we used to add in the tabs. Not only can you create tabs in your menu as we did in our example, but you can add rows, columns, horizontal dividers, and menu segments to create a unique menu structure. The particular menu item that you choose to add to your menu will depend on you menus specific needs and how you would like it to look, so experimentation with these advanced items is necessary.

2. Adding Images and Icons

Adding images and icons can help bring your menu to life. To accomplish this, head back on over to menus in your WordPress dashboard. To add the icon or image to a specific menu item hover your mouse over the menu item tab and you will see a black uber menu button appear next to its name. Click this button and a menu will pop up with an image and icon section.  

3. Custom Content and Shortcodes

Adding custom content and shortcodes to your menu opens up a whole new set of possibilities. Any shortcode that is available for use in your WordPress website can be inserted into your UberMenu, so think outside the box here and add in helpful shortcodes that will enhance your website visitors' experience. In our example, we could add a map of where our store location is on a separate menu item. Simply click on the Uber button again on your a page we title "Location" and scroll down to the custom content setting and click it. Next, we will add in our store location shortcode, 

[ubermenu-map address="Boston, MA" zoom="15" title="My Store"]

This will add the map to your UberMenu so your website visitors can quickly find where your store is located. 

Any text, HTML, or shortcode can be inserted into this field so experiment with what works best for your website!

Conclusion

If you are running a business or any type of website, it needs to be easy to navigate. Without easy-to-use navigation, your website traffic will undoubtedly decline. Having a complete menu on your website that shows all your website's pages or sections is the key to having a site that can be navigated easily.

By using the WordPress plugin UberMenu you can easily create a customizable menu to allow your website users to browse your website as quickly as possible. To give this plugin a try, head over to CodeCanyon and check out the UberMenu WordPress plugin. And while you're there, check out some of the other great WordPress plugins available from CodeCanyon.

WordPress

When to Use (and Not Use) a Mega Menu for Navigation

Rachel McCollin

WordPress

UberMenu and 7 Other Best Mega Menu Plugins

Jane Baker

WordPress

An Easy Way to Code a Mega Menu in WordPress

Rachel McCollin

WordPress

The Best WordPress Menu Plugins: Mega Menus, Sticky Menus, and More

Lorca Lokassa Sa

by Daniel Strongin via Envato Tuts+ Code https://ift.tt/2OR5lZV

[redballpointpen2-blog]

CityTours - Travel and Hotels Site Template

New Post has been published on https://babesgobananas.com/citytours-travel-and-hotels-site-template/

CityTours - Travel and Hotels Site Template

CityTours is an HTML5 site template suitable for companies/agencies that provide services for tourist: can be used to provide general city attractions information, buy tickets, tours, tour guides, hotels and transfers, travel.

Main features

Valid and clean HTML5/CSS3 code

New Bootstrap 4x stable version: looks nice on all devices

+120 HTML pages

11 Home pages

Home with Revolution Slider (Save $14)

Home with Layer Slider (Save $11)

Home with Single image

Home with Video Background

Home with Search Bar

Home with Search Panel

Home with Tabs

Home with Cookie Bar (EU Law)

Home with Popup advertising (with autoclose delay)

Home with Text Rotator

Home with Search Bar + Video Background

Home with only Tours

7 Headers Styles

7 Footer Styles

Revolution Slider Visual Editor (Save 19$)

Twitter feed plugin

Bootstrap Notify plugin

Shop section

Sticky sidebar

4 color schemes: easy and fast chance primary color

Parallax effect

Working PHP Booking form with autoresponder

Working AJAX Contact form with antispam protection

Working AJAX Newsletter subscription with antispam protection

Site launch pack: counter plus newsletter subscription

Responsive Tour timeline page

Grid Gallery (Final tiles Grid gallery plugin save $16) New!

Fullscreen map page with navigation

Map listing New!

Fixed sidebar Cart New!

2500 Fantastic Icons Fonts with Retina support

Retina ready

Supported By all major Browsers

Google Map with multiple markers and infobox

Google Web Fonts

Jquery Slider Pro

Magnific Popup

Password check strength in register page New

Show hide password for input password

PSD assets included in this item:Banner, Logo, Map pins, Top main header.

Admin section New!

Weather Forecast Widget

Pop Up for alerts and advertise (with autoclose delay) New!

Hotels section

Transfers section

Restaurant sectionNew!

14PSD for the main pages (Save 12$) New! View here what you get

Icon set New!

Wishlist page New!

404 Error page New!

Images are not included. Thanks to AmnesiArt for video used in the demo.

Tags:travel, tours, tour guides, hotels, transfers, tourism, holiday

Maybe you are interested in

Change log

V4.1 14 December 2018

- Removed @import - Fixed an issue for the Revolution Slider files video versions: index_14.html, index_15.html, index_17.html

V4.0 14 August 2018

- Changed css files structure - Updated Ionrange input slider plugin - Updated Owl Carousel plugin - Updated animate.css - Added show password for password inputs (example on Sign in modal) - Updated Bootstrap Library from 3.7 to latest 4.1 - Changed map style - Add Opacity control for parallax header sections - Added Sign in Modal - Added Magnific Popup animation - Improved scroll to top button - Some css minor improvements - RTL version is not longer supported

V3.5 21 November 2017

- Added another Date and time picker - Fixed a menu mobile panel undesired Shadow - Faq smooth scroll version 2 fix incorrect position OK - Updated Parallax plugin - Fixed an issue related the modal search form for Iphone IOS 11 - Footer Reveal Script disabled on Mobiles - Fixed and issue related the filters column collapse on mobiles

V3.4 14 October 2017

- Updated documentation

V3.3 29 May 2017

- Updated the following files: js/bootstrap-notify.js + js/bootstrap-notify.min.js (Issue: incorrect html output)

V3.2 10 May 2017

- Added Bootstrap Notify - Added Revolution Slider Visual Editor - Added 6 New Revolution Sliders - Added New Search - Added transition animation to menu - Added 2 new icon packs - Optimize performance for the mobile aside menu - Added Fixed Reveal Footer - Added one more header version - Fixed an issue related to index_11.html (menu) RTL version - Updated Jquery library - Updated Bootstrap library - Updated Parallax js - Updated Wow js - Updated Magnific Popup js - Updated Slide Pro js - Optmized Google font page load

V3.1 28 Feb 2017

- Fixed an issue related to the Coming soon page

V3.0 6 November 2016

- Added more footer styles - Added more header styles - Added Twitter feed plugin - Added Single hotel page with contact form - Some improvements for the google map listings - Added get directions functionality for google map - Added Ribbon CSS3 - Added Overaly Grid Gallery - Added Shop section - Some minor css improvements - Added switch text on view map button - Updated RTL version

V2.3 26 July 2016

- Updated documentation on how to apply the Google map Api key if the map does not works

V2.2 9 June 2016

- Added 3 more pages (Tours map listing, Hotels map listing, Restaurants map listing) - Cart and search drop down on hover

V2.1 26 May 2016

Added some Seo Improvements: H1 on logo for home pages, removed meta keywords not more necessary on Google, and minor...

V2.0 26 March 2016

The Jquery Weather plugin stop to works. We've Updated the item with another plugin.

V1.9 17 March 2016

- Added Layer Slider home page version - Added Home page version with tabs - Improved the fixed sidebar with another script - Added RTL version - Updated Bootstrap library to 3.3.6

V1.8 19 Dec 2015

- Added a fixed sidebar version for some pages - Added another Faq page with smooth scroll and fixed sidebar - Added a Restaurant section - Added a new font icon set for Restaurant section - Added filter category option for the fullscreen map page - Added 2 grid gallery pages - Added a map color style - Added an input slider range for price in filters column - Updated jquery.sliderPro.js plugin - Added a calendar datepicker function advanced

V1.6 13 Nov 2015

- Added Admin section - Added Jquery Text Rotator - Added Jquery Cookie Bar (EU law requirement) - Added Weather Forecast Widget with translation support - Added Pop Up for alerts and advertise (with autoclose delay)

V1.5 11 June 2015

Fixed an issue regarding the icon fonts added in v.1.2 that affect on Safari browser

V1.4 20 May 2015

- Added index variation with search panel - Added 3rd level menu support - Added Footer version with working ajax newsletter subscription - Bonus content: Responsive Email Template (no support included for bonus content) - Added Faq page - Added Fullscreen Map - Added Gallery 3 columns page - Added Gallery 4 columns page - Added Timeline Tour page - Added pricing/packages tables - Added "Save/offer" ribbon - Added Single Hotel page with working php availability request - Fixed IE9 Issue: submenu disappear when move the cursor to the submenu (only if you did not scroll the page)

V1.3 22 April 2015

- Fixed a small issue for the "plain header" version on page scroll

V1.2 10 April 2015

- New Hotels section - New Transfer section - Collapse map behaviour on mobiles (changed position of the button) - Add Carousel plugin for single hotel page - Add New Icon set - Site launch page wrong jquery version - New map pins

V1.1 26 March 2015

- Fixed Top Login dropdown issue - Some minor improvements - Optimized main titles over the top images for mobile - Added more magnific popup examples in the shortcode page

Tags

accommodations, booking, city restaurants, city tours, hotel, museums, restaurants, tour guide, tour tickets, tourism, tourist, tours, transfers, travel, attractions, travel guide Source

[help-with-coding]

Drop down Menu With Submenus

I’m using this to explain, but all code credit goes to Phil Hoyt!!

The HTML (under <body>)

The <ul> tag is for unordered lists, aka without numbers. The <li> is for each new line of the list.

A standard list code looks like this:

<ul>   <li>ONE</li>   <li>TWO</li>   <li>THREE</li> </ul>

But if you want a submenu, start a new list (with <ul>) between the <li> and </li>

<ul>  <li>ONE</li>  <li>TWO      <ul>            <li>TWO - 1</li>            <li>TWO - 2</li>            <li>TWO - 3</li>      </ul> </li>  <li>THREE</li> </ul>

You can start a submenu to the submenu with the same method. Now, you want to wrap that all in a div. That means, give your list a name and put everything inside it. Let’s call it “navigation” and stick the div before the list and </div> after it to close it off.

<div id="navigation">    LIST  </div>

Now we have a name, but what does it mean? It means you can customize it in CSS! 

The CSS (under <style>

You want your <li> to appear on hover probably, and CSS allows us to do that. It also makes things much prettier. But whatever.

So you wrapped your list in a div, which means you can customize the lists that are in that div separately from any other list you may have in your code.

To do that, you just have to add “ul” after your div (#navigation ul). You don’t want your menu to have bullet points, so list-style:none;

#navigation ul { list-style:none; position:relative; float:left; }

Your menu items are most likely links, so customize what they look like by adding an “a” after the #navigation ul in a completely different div. Here is an example.

#navigation ul a { display:block; color:#333; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif }

Now you customize your li. You also need to customize all your possibilities. This is what Phil Hoyt did.

#navigation ul li { position:relative; float:left; margin:0; padding:0 }

#navigation ul li:hover { background:#f6f6f6 }

#navigation ul ul { display:none; position:absolute; top:100%; left:0; background:#fff; padding:0 }

#navigation ul ul li { float:none; width:200px }

#navigation ul ul a { line-height:120%; padding:10px 15px }

#navigation ul ul ul { top:0; left:100% }

#navigation ul li:hover > ul { display:block }

idk I hope this made sense. I TAKE NO CREDIT I JUST TRIED EXPLAINING ITTTT

[prevajconsultants]

Dena – jQuery Special Tree Menu (Navigation)

Perhaps sometimes it happened to you that you are tired of the busy menu of your site Which has many options and looking for a way to set up your menu. This code can be the best option for your needs.

Tree menus are one of the most popular menu types for use on sites. Often used in store sites for product categorization. Sites that need to categorize the menus.

such as: Product menu, Site Content Menu, Sitemap menu and Etc.

  The Dana tree menu, instead of the standard menu, Deliver you a tree menu. This menu, which has very low code size, will not hurt your site at all.

The items in this menu and the submenus have no limitations and you can have infinite submenus.

The colors used in this menu are all color-coded and widely used. You can easily customize the menu color.

Dana’s tree menu features

Use css html jQuery

Use of flat colors

Responsive

Moving softly

Browser compatibility

Find the active menu and highlight it

Multiple support – Use multiple trees on one page

Easy to use

Animation when opened

Has 3 different layouts

For font icons, it has use “material Design Icons”. The color of the icons and their type is completely editable. If you want to use the other icons font, you must change the “.mdi” class into the class of this font icon. For example, if you use “font awesome” , change the “.mdi” class to “.fa”.

Using this code is very simple.

To use this code, you must first attach the “jquery_specialTreeMenu.js” file to your template. Then write the html code for your menu according to the preview file standard. Then select the theme and attach the corresponding CSS files to your template.

from CodeCanyon new items https://ift.tt/2H522dz via IFTTT https://goo.gl/zxKHwc

[stripedigital]

Insider Tips and Tricks for Restaurant Website Design

What do all people have in common?

They need to eat and most of them love to do it!

But how do you get people to pick your restaurant over any other restaurant? Maybe you have built a website for your business or maybe you’re still in the beginning stages of online marketing. Did you know that there are certain components that are crucial when building a website for your restaurant?

Restaurant website design encompasses everything from SEO to sharing the story about your restaurant’s beginnings. It’s photos, text and HTML that all work together to complete your design and help you gain customers. We’re going to show you the keys to restaurant website design and some restaurants who have incredible websites!

Tell Your Story

Behind every restaurant there’s a story and people want to hear it. It makes you stand out from your competition and shows what makes you unique. Show customers the ideas behind your restaurant and talk about how it got started. Give some history if you have any! This makes your restaurant even more appealing especially if you have a good story.

The example below gives customers a feel for the restaurant before they even walk in the doors. They tell website visitors what is served as well as describe the atmosphere so that patrons will know what they are walking into. It’s nice to know the vibe of a restaurant before you go so that you can dress up or down and fit in with the crowd there.

If you are finding it difficult to eloquently tell your story let the professionals at LYFE craft a tasty description for you!

Style Elements

The font, colors and design of your site can all play into the vibe of your restaurant as well. A fancy font probably means that the restaurant is a bit nicer. You can also give a more casual vibe by dressing down your site or adding elements that give insight to the feel of your restaurant.

Upbeet is a fast casual restaurant with a fun, young atmosphere. Their homepage clearly translates to this. Their logo is casual and laid back and their text is thicker which adds to the casual vibe.  

With a clean, minimalist design it may seem like they haven’t done much to “design” their site. However, this is in line with their brand so it makes sense. When you hover over each option the photo changes and the white text turns pink. This is a nice touch that adds a little something extra to the homepage of the site.

Per Se is a Michelin star restaurant that also uses minimalist design. Their site however is elegant and uses white space to create an upscale vibe. Their use of thin fonts give the site visitor a sense that this restaurant is classy and dignified. The photos also tell the story of a fine dining experience.    

Use white space, fonts and colors on your site that are in line with your restaurant’s vibe. You can create an atmosphere on a web page to mimic your restaurant. This way users have a sense of what they are about to experience before they even walk through your doors. This is a way to get them excited and build up anticipation.

Navigation

Having a navigation or menu bar is obviously a much needed element for every website. There are several options when designing your navigation. You go with a classic top navigation bar with your options listed out. There is also a vertical navigation bar that can either pop out when a button is clicked or stay static on the page.

Arbor restaurant creates a fun vibe with their vertical menu. It makes the site interesting and fun! You can scroll down on the menu portion as well as the story. They also make it easy to exit out of the story bar so that you can view the full photos.  

You can get even more creative with your navigation if you’d like and have the sections advance as you scroll and incorporate other elements like videos or parallax scrolling. Parallax is when the background advances behind other elements on the page. It gives a 3D effect and can spruce up your page often creating a fun design that highlights your photos

This restaurant uses parallax in a creative way. Their site has several blocks that interlock and scroll revealing new photos and information. It’s a fun experience so you can only imagine what the restaurant will be like!

As always with navigation, make sure it is user friendly. Don’t make users work too hard to figure out how to scroll or click. If your site visitors can’t figure out how to get to where they want to go they will often leave your site – which leads to high bounce rates and poor search engine visibility. You definitely don’t want that!

Make sure all of your menus and submenus are linked. Double and triple check this! If your menus are not appropriately linked in your navigation bar this can be another cause for user frustration.

Restaurant Website Design Tip: Have navigation at the bottom of your site as well as the top. It’s helpful for the user when they scroll all the way to the bottom and then want to go on to another page. If you don’t like the idea of bottom navigation consider a sticky header! This type of header will stay as you scroll on the page so that your website visitors have your menu bar wherever they go on the page.

Instagram feed + Photos

People eat with their eyes so of course it’s important to have photos. Linking your Instagram with your website is an easy way to showcase what you are posting. It will automatically populate with your newest photos that you post on the gram. This allows potential customers to get a sneak peak of your food, so be certain that you are always posting quality photos.

If you have a WordPress site there are tons of different plugins you can install that have various styles and sizes. Find one that suits you and your branding. If you don’t have a WordPress site, we highly suggest having one custom designed to your brand. We have a team on staff that can do it for you!

Grub Burger Bar is a casual restaurant that displays their Instagram feed with four photos at a time. Each photo is linked so that the viewer can view that photo on Instagram.

The Iberian Pig restaurant shows their Instagram feed a little differently than Grub. They have also chosen to show Instagram captions when the user hovers over each photo.

In addition to an Instagram feed you need to have high quality, beautiful photos of the food you serve. Imagine having an online clothing store without any photos. How are customers supposed to know what the products look like? The same is true for a restaurant.

This restaurant not only has amazing photos of their food on their website but since they serve unique dishes they also have descriptions when users hover over the photos. This is a restaurant website design technique that can take your site to the next level.

Users are able to view the photos without distraction and then hover over them to read the description of what each dish is. It is especially helpful for potential customers to have throughout descriptions of your food if it is something that is out of the ordinary. It’s not enough for the photos to just look pretty, sometimes you need additional text to explain your dishes.

For restaurant website design, full width header photos can take your homepage to the next level. Photos that stretch the width of your page are inviting and allow site visitors to see detail and invite them to explore further.

Think about which photos you are placing where. You can often lead customers into the rest of your site. The placement of these pasta noodles makes you want to scroll to find out more.

Pro Tip: In restaurant website design photos are of utmost importance, but don’t just focus on the visual aspects. Make sure your site is functional and has great user experience. If your customers can’t navigate and find what they are looking for they may become frustrated and leave your website.

Incorporate Video

Give your site visitors more to admire. Consider using video in your restaurant website design. You can use this in your header to grab the attention of potential customers or to show the inner workings of your restaurant.

Le Laurent, a restaurant in Paris uses video to show off their dining room experience. By moving your mouse around, you can control the video. This is a fun feature that guests may spend some time playing around with on their website. Video can give your customers additional entertainment and hold their attention for longer than a photo can. Be careful when using video in restaurant website design. You don’t want to use so much video that your users become motion sick. Find a balance and use video where it makes sense!

Use graphics

In restaurant website design graphics can help show processes, how to eat certain cuisines, or how food is made. You can also use graphics to enhance the style of your site or menu. If you make all of your dishes from scratch recreate that feeling from a design standpoint by using hand drawn graphics. If your restaurant is a new concept, then graphics can work wonders!

Even if it’s simple, showing people how your restaurant works can put customers at ease. Michi Ramen shows their website visitors a simple graphic on their homepage of how to build their bowl of ramen. This is a stylistic element that adds character and can make your page a little more exciting.

Include menus

How many times have you found a restaurant that you really want to try but they don’t have a menu with prices online? This is frustrating. You don’t want customers to be frustrated before they even walk into your restaurant. Or give them a reason to not even want to walk into your restaurant.

Make sure that your menu looks nice and is designed. Text on a page isn’t appealing, especially if you are a high end restaurant. Simple, clean design is the best type of design for your menu. It shouldn’t be hard to read or busy, but it should have some elements of good restaurant website design.

Use fonts that reflect your branding, graphics or simple drawings. And make sure you are not using a light font on a dark background. Learn more visual graphic design tips here.

Include photos in your online menu. If potential customers can see photos of your food alongside your menu, it can make them even more likely to come in and try out your restaurant.

If you have a seasonal menu or your menu changes every day post it on your social media accounts and direct website visitors to your social pages. That way you don’t have to update your online menu every time it changes and you can engage with users on social media.   

Contact page

This is important for any and every business, but it’s especially important for restaurants to display their information. You should have a contact page complete with your hours, physical address, email address and phone number. Include a way to make reservations if you take them. When you are building your site make a note that it’s important to have all of your information consistent across your websites as well as any and all platforms you are using. This includes social sites as well as sites like Yelp and especially Google My Business.

Your Google My Business tells customers everything they need to know before they visit your restaurant. It tells them when you are open, your address, and it also shows reviews. This can help potential customers decide whether or not they want to visit your restaurant.

Pro Tip: Get your site listed as many places as you can! You can use sites like Yext to get listed in online directories so that users can easily find your business. However, it’s crucial that your restaurant name is the same across all platforms! This can confuse your customers as well as search engines. Pierre’s is a fast casual pizza chain, but they are not consistent with their information. Pierre’s Eatery and Pierre’s Pizza may be in two different places but they are the same restaurant and should have the same name. Google now thinks that these are two different restaurants which can lead customers to think so too.

Blog section

People want to know about the food you are making, where it comes from, your chefs and their skills, as well as your restaurant’s unique attributes. A blog is a great place to tell them about all of these things and more! Your blog design should be clean and easy to digest. Consider having a sidebar with additional blogs that your readers might enjoy.

If you don’t know what to write about you can hire of our expert restaurant bloggers to do the thinking for you! Or consider explaining how you cook and serve your food.

If you own an Italian restaurant and you hand make pasta each day, blog about it! Tell customers about your process and where your ingredients come from. You could even write about the different shapes of pasta or include a recipe. There are so many possibilities to educate people about your restaurant.

A blog is not only helpful to your customers but also helpful for SEO. You can write blogs to rank for specific keywords. Search engines will pick up on this – and if you do it right, you can rank on the first page of search results.

You may think that running a blog and a restaurant at the same time is difficult and you would be correct. Get professional help, take the pressure off, and focus on running your restaurant.

SEO

SEO or search engine optimization is important no matter what your business is. But for a restaurant local seo is what you will want to pay attention to. Most people, when they are looking for a restaurant, want somewhere that is close to their current location which is why focusing on local SEO is a must. Your goal is to show up in the local pack which shows the top three results. These three results are the ones that are receiving the most traffic and probably the most customers.

When planning your restaurant website design you will want to be mindful of front end and back end elements that will affect your SEO. Designing your navigation to be user friendly will help customers stay on your page for longer periods of time.

This is called dwell time. The more dwell time the more legitimate your site will look to search engines which means that they will rank your site higher. Make sure your menu is easy to find, use engaging photos or even a photo gallery or give your site visitors fun graphics to enjoy.

If your site is unappealing it’s likely that you will have high bounce rates. A page bounce is when someone clicks on your site expecting to find a beautifully designed site with great user experience. When users find websites that are a mess, they click the back button creating a bounce which does not look good to search engines like Google.

The good news is you can track your bounce rate with Google Analytics. If it’s high you may want to take a second look at your website. If you need help investigating further let us know!

When you are designing your site for search engines there are a few things you will want to keep in mind. Keywords like “best restaurant” aren’t going to cut it especially if you are a smaller business. You need to go for words that are targeted so keyword research is a must.

You may have great photos of your food but search engines can’t physically see them so make sure that you are writing descriptions (also known as image alt tags) for every single one of your photos.

You’ll also need to write title and meta descriptions for search engines and make sure that you have an H1 tag on every page. You will need to design these to be informative and convincing so that people will want to click on your pages! For more SEO best practices check out these tips and tricks.

Restaurant Website Design for Mobile

How many times have you used your phone to find a restaurant? It’s convenient, quick,and you can do it on the go. Since there are so many potential customers searching on their phones your website needs to be optimized and designed for mobile. This includes menus, navigation and any other elements on your site that might be affected by a smaller screen.

It’s difficult to zoom in and out on a menu when you are trying to read it on a mobile device especially if your menu is in a PDF format. Instead type it out and format it. Add some design elements to give your menu some character and then double check it on every device!

Don’t assume that your site is going to look perfect on tablets, phones and computers. There’s a good chance you may need to do some tweaking.

Bar Mercado has a great mobile site. Their menu is easy to read and compatible with every device it is viewed on. Instead of clicking on a PDF to view, it is a page on their site with text that is easy to read and small designed titles that add character and help tell their brand story. Notice that it’s not overwhelming but still aesthetically pleasing.

A high quality restaurant should have high quality restaurant website design. If your website lacks good photos and design elements it will deter people from coming in to try your food. It doesn’t take long for people to form an opinion. Don’t sacrifice a great restaurant website design. It could hurt your business!

You want your website to be captivating and make your potential customer’s mouths water. Give them a taste of your restaurant’s atmosphere and make crave your food before they even try it.

Designing a website for your restaurant can take a lot of time out of your day and if you lack experience, it can be incredibly difficult to get right.

We offer full service restaurant website design where you will work with our team of professionals to develop a beautiful, custom site that will bring those customers through your doors! What are you waiting for? Contact us today!

The post Insider Tips and Tricks for Restaurant Website Design appeared first on Digital Marketing Blog.

from Digital Marketing Blog https://ift.tt/2D7c006 via IFTTT

[vikihabercom]

  Link: Ürünü Satın AL

  Squaretype. Modern WordPress Theme for Content-Based Blogs & Magazines

Squaretype is a modern and clean WordPress theme for modern content-based blogs and magazines.

9 Beautifully Designed Demos in One Theme

Thanks to our signature feature, the Demo Switcher, you may apply a new demo any time without affecting your content. If you feel bored with one of the demos, simply apply a new one and get a completely different appearance of your blog or magazine.

Hero Section

Display featured posts in multiple layouts and variations on your homepage. Select a matching background and appropriate sidebar content.

Sidebar Options:

Numbered or Simple Post List

Custom HTML Content (Ads or Shortcode)

Any Widget

No Sidebar

Background Options:

Rock-Solid Color

Beautiful Gradient

Engaging Post Preview Image

Heading Size

Small

Medium

Large

Category Filters

Enable sub-categories filter on category pages for content-heavy websites. It will help your visitors navigate between categories and sub-categories and find the post they’ve been looking for.

Multiple Page Header Types

There are three different page header types for your posts and pages. Display your featured posts’ header with an image overlay or a smaller page header.

Smart Colors

When you select a dark background color for your header or footer, the text and links color will automatically change to white. You don’t need to set up a lot of color option, as most of them will work automatically based on your selection.

Customize with Instant Live Preview

All theme options can be configured with the native WordPress customize feature. Forget the outdated settings pages and manually refreshing your page to see the changes. Preview all the changes live while configuring your perfect blog or media.

Multiple Archive Layouts for Homepage and Archive Pages

Choose from different post archive layouts for your homepage and archive pages. Display your posts in grid, list, full, timeline or masonry layouts.

Multiple Page Layouts

Select the matching page layout for your homepage, archives, posts, and pages. Display a sidebar on either the left or right side or use the full-width page layout for your content.

Super-Fast Mega-Menu

Showcase your recent posts with a thumbnail right in the menu dropdown. Don’t worry, the menu will not slow down your website, as the content is requested dynamically, only when a user hovers over the parent menu item.

AMP Support

We have added styles for the AMP pages to match the main styles of your website. Simply activate the official WordPress AMP plugin to enable Google Accelerated Mobile Pages on your website.

Exclude Featured Posts from the Main Archive

Everybody knows, and Google, in particular, that duplicate content is bad. Avoid having duplicate content on your homepage by excluding featured posts from the main archive with a single click.

Google Fonts

Create different styles with 800+ Google Fonts supported. Simply select the desired font from the dropdown and preview it instantly on your website – no more confusing CSS rules or code snippets.

Additional Content

Ever wanted to place an ad spot underneath your header? Or a short description before the featured posts section on your homepage? A subscribe form below post content? With our signature feature you may insert any content into different template parts without changing template files or overriding templates with a child theme.

Smart Sticky Navigation

Increase mobile users’ viewport by displaying the main navigation only when they scroll up. Or force the menu to stay sticky all the time. Or disable the feature completely, it’s up to you! Enable either of the three options in theme settings with a single click.

Sticky Sidebar

Make your widgets sticky when scrolling the page. Select from two options: either stick to the bottom edge of your sidebar or the top edge of the last widget. Increase your ad’s conversion by setting the ad as your last widget and selecting the latter option. Unlike other theme’s sticky sidebars, ours is enabled and doesn’t flicker on tablets or mobiles. By using the native browser’s sticky positioning, we created a sticky sidebar that animates gorgeously not only on desktops but mobiles too.

Smart Multi-Level Menu

It’s you who decides how to structure your content. Our theme supports unlimited levels in your main menu. If there’s not enough space in the viewport to display a dropdown submenu, it will appear on the opposite side instead. And it supports mobile touch devices, too.

Mobile Slide-Out Menu with Widgets

Display the mobile menu upon clicking the hamburger icon on mobile devices. You may also place social links, subscription form, Facebook fan page or any other widget on your mobile menu, just as in a regular sidebar.

Smart Featured Post Sources

The featured post section can have different post sources. You may filter posts by tag or category and order posts by date, post views or even specify the timeframe when the posts were published.

Paginated Posts

Divide your posts into multiple pages and add properly styled pagination at the bottom of your posts.

Guest Authors and Multi-Author Posts with Co-Authors Plus Support

Involve guest authors without creating separate user accounts or add multiple authors per post with the integrated Co-Authors Plus plugin support. All post authors, including contributors and guest authors, can have social accounts and a bio too.

RTL

Built-in support for RTL (right-to-left) languages like Arabic, Hebrew, Persian or any other RTL written language.

Numbered Pagination, Load More, and Infinite Load

The “Load More” button and the Infinite Load feature will encourage your users to stay on your website longer by browsing through your post archives without refreshing the browser page.

We use the new REST API for instantly fetching posts, which is the fastest way to dynamically load posts in WordPress.

Post Views Counter Support

Display number of post views among other post meta with the integrated Post Views Counter support.

Post Reading Time

Easily add post reading time to encourage your users. The reading time is calculated automatically based on the average reading speed of an adult.

Retina-Ready

Your website will look amazing on Retina screens thanks to vector scalable elements, clear Retina-ready images, and typography.

Adaptive Optimized Image Sizes

A small number of generated thumbnails will save your disk storage space on your hosting provider and make the thumbnail regeneration process quick.

We never downscale images and serve them in the original size or close to it, so that users will not download more than they need. Google likes optimized image sizes too.

Ultra Responsive

We tested our theme on multiple physical devices and emulators to make sure we deliver the best quality.

Feature-Rich, yet Simple

Despite a lot of great built-in features, it’s extremely easy to use. All options support live-preview, and you may instantly see all the changes before saving them.

We made sure that all theme options and features are seamlessly blended into the WordPress user interface and feel very natural and intuitive.

Of course, no coding is required to setup up your website.

SEO by Yoast Support including Breadcrumbs Styles

Activate breadcrumbs, a powerful SEO addition to your website, with a single click in SEO using Yoast plugin and it will automatically appear in the right place with the right styles.

Live Search Results

Get instant search results while you type the search request and easily navigate between them with keyboard support.

Built-in Styles for WordPress Galleries

The default WordPress galleries (or the #gallery-0-5 { margin: auto; } #gallery-0-5 .gallery-item { float: left; margin-top: 10px; text-align: center; width: 33%; } #gallery-0-5 img { border: 2px solid #cfcfcf; } #gallery-0-5 .gallery-caption { margin-left: 0; } /* see gallery_shortcode() in wp-includes/media.php */

shortcode) will look nice right out-of-the-box thanks to the integrated gallery styles.

Contributors Page

Display list of all site authors on a single page. Each author is displayed with an avatar, name, bio, and a list of recently published articles.

Related Posts

Increase the page per visit ratio by enabling recent posts beneath your single posts. Related posts will appear automatically, as soon as there’re enough posts in the same category.

Optimized CSS without Dependencies

There’re no dependencies (for example Bootstrap), so no extra bloat or third-party assets. Your users and Google will love the loading time of your website pages.

Coded with WordPress Coding Standards

WordPress Coding Standards help developers maintain a consistent style so that the code is clean and easy to read at a glance. We keep it in mind when writing code for our WordPress themes.

Super-Fast

Enjoy the fast browsing experience with performance optimization. We check our theme with the Query Monitor plugin to avoid excessive requests to your database.

Google Structured Data Support

We make sure that the structured data is correct by adding special classes to elements. It helps Google understand your content better and rank your website higher.

Built with Hooks & Developer Friendly

There’re numerous actions and filters, which enable you to hook into theme functions from a child theme to create awesome custom solutions for your clients and make the website update-safe.

Translation-Ready

There’s a .pot file, included with the theme, that allows you to use POEdit or Loco Translate to easily translate our theme into your native language.

WPML and Polylang compatible

Would you like to have a multilingual website for a broader audience? Our theme supports both WPML and Polylang plugins and allows creating a multilingual website in no time.

Numerous Ads and Banner Spots with built-in AdSense Support

Easily monetize your blog with versatile ads and banner spots available right in the WordPress Customize section. Place your ads or banner snippets in several predefined template locations without ever touching the template code.

One-Click Demo Import and Demo Switcher

Feeling like you need a change of your website design? Apply a different demo anytime, even if you have existing content, without getting numerous duplicate copies of dummy posts and pages.

Of course, you may import the demo posts too, a useful feature when starting a brand new blog.

Made by Elite Author with a Featured Item

Since 2017, when we created Authentic, it has been featured on the homepage of ThemeForest by the Envato stuff, gained more than 3000 sales, and has been mentioned by WordPress’s online publishers. By purchasing a theme from Code Supply Co. you will get timely support and regular theme updates guaranteed.

Powered by Powerkit

Powerkit is our in-house plugin for extending our theme features. You don’t need to search for compatible plugins for all the basic components of your website: share buttons, social links, author and about widgets, newsletter opt-in forms, slider, and tiled galleries, lightbox, lazy load of images and other great features that every blog or magazine needs. Powerkit seamlessly integrates with our themes in terms of features and site appearance. It has a modular design and you may easily disable different modules without slowing down your website.

Share Buttons

Make your content go viral by enabling share buttons on single post pages.

There’re three locations available: before and after post content and in the floating post sidebar for better user engagement.

Choose between 15 social accounts: Facebook, Twitter, Pinterest, Google Plus, LinkedIn, StumbleUpon, Facebook Messenger, WhatsApp, Telegram, VKontakte, and email.

Customize the order of your share buttons: place the higher priority share buttons first, based on your country and content specific traits.

Choose between four color schemes: standard, bold, light background, and bold background.

Enable share buttons in three locations: before post content, after post content, and in the floating post sidebar. Shortcode.

You may also enable counts for Facebook, LinkedIn, and Pinterest share accounts, as well as the total number of shares per post.

The share buttons are ultra-fast and fully support all caching plugins. The count data is fetched dynamically via REST API; thus, it won’t create a bottleneck in your website’s performance.

Social Links

Help your visitors easily find and follow you on your social media with built-in social links with counters.

Easily integrate social accounts into your website header, footer, and sidebar widgets.

Choose between different layouts: inline, horizontal list or columns. Select the color scheme that suits your taste and blog design: clean or bold, with light or bold background.

Enable the counter feature and display number of your followers on different social networks right on your website. Higher numbers will motivate your new visitors to follow you on social media.

Just as the share buttons, the social accounts fully support dynamic fetching of your social media followers count, resulting in a fast performance of your website and compatibility with caching plugins.

You may place social links in your sidebar by using a widget, page content with a shortcode or in the pre-defined theme locations.

Facebook Integration

Easily embed and promote any Facebook fan page on your website by placing it in your sidebar or post content.

Light up the post discussion by replacing WordPress comments with Facebook comments widget or appending the Facebook comments widget to the default WordPress comments.

Pinterest Integration

Let your users pin images from your blog to their Pinterest boards by adding Pin It buttons on all single images and galleries, with captions supported.

Add a special class to an image inside your post content and Pinterest will fetch this particular image when sharing via the Pinterest share button. Super useful for creating Pinterest optimized cover images to gain a lot of social media traffic.

Twitter Integration

Embed your Twitter feed in a widget or post content via a shortcode.

Instagram Integration

Display your Instagram feed in your sidebar with a widget, in post content with a shortcode or site footer. Every image in the Instagram feed also comes with a number of likes and comments for better user engagement.

Opt-in Forms

Integrate subscription forms on your website and grow your subscribers’ list. The MailChimp module supports one-click subscriptions via AJAX and the MailChimp API. Add a caption regarding personal data and make the opt-in form GDPR compatible.

Basic Shortcodes

Extend your post editing experience with 10 additional shortcodes with friendly UI and shortcode generator right in the WordPress editor toolbar: vertical and horizontal tabs and pills, accordions, separators, buttons, progress bars, and others.

Retina Images

Make your website look crisp on Retina screens by enabling the Retina Images module. It will automatically create 2x image sizes for high pixel density screens.

Lazy Load with Low-Quality Image Placeholders

Speed up your website and increase Google PageSpeed Insights score by enabling the Lazy Load module. It will make your images load only when they’re near the user’s viewport.

You may also serve the so-called LQIP (Low-Quality Image Placeholders) before the main images have been loaded. It will add a beautiful blur effect on images while loading.

Lightbox

Enable the option to enlarge your images in post content or post galleries in a sleek lightbox instead of opening them in a new window. The module supports all gallery types and images in post content. And it’s responsive too.

Adobe Fonts (Formerly Typekit)

Enhance your blog or magazine design by adding support for Typekit fonts. Control your fonts right in the WordPress customize section with live preview. No more CSS selectors or custom code for your Typekit fonts.

Custom Fonts

Upload custom fonts right in the WordPress dashboard and add them to the list of supported fonts in the WordPress Customize section. No coding required.

Contributors Widget

Display a list of the website contributors (authors) in your sidebar.

Author Widget

Display author’s information in the sidebar, including author avatar, description, and links to social accounts.

Justified Galleries

Create greater stories with beautiful justified galleries. Creating a justified gallery feels as natural as the default WordPress ones.

Slider Galleries

Insert responsive and Retina-ready slider galleries in your post content with mobile touch and swipe support. Enable slider pagination, bullets or navigation arrows with just a few clicks.

Featured Posts Widget

Display your featured posts in the sidebar. Choose between different layouts: standard, large or numbered. You may filter posts by category, tag or post IDs and order them by post views or date.

Table of Contents

Easily add a table of contents for your longer blog posts, so that your users can easily navigate to the post section they’re interested in.

Numbered Headings

Create popular list articles (listicles) with the built-in numbered headings feature. It’s a well-known fact that posts with lists (“Top 10 Things to See in Rome”) are the easiest way to gain more viral traffic.

Disclaimer

Adobe Fonts (formerly Typekit)

Some demos use Adobe Fonts (formerly Typekit). If Adobe Fonts fonts aren’t available, they will be substituted with default fonts or Google Fonts. See our documentation for more details.

Site Specific Options

While demo content looks as close to our demos as possible, there’re a few site-specific settings, that need manual configuration for your convenience, for example, links to your social accounts, widgets and some others.

Image Credits

The sample images viewed in the live preview are for demo purposes only and are not included with your purchase.

These images have either been purchased by us at Shutterstock or GPL & Creative Commons licensed.

Landing Page

The starting preview is a landing page to promote our product and showcase different demos. It’s not included in the theme.

Page Speed

The page speed score mentioned on the item’s page is for reference only and depends on the selected demo, theme and server configuration and the content itself. Some theme features may negatively impact page speed scores.

Integration with External Service Providers

There’re a few features, that rely on communication with external service providers, for example number of social followers, share counts, Instagram feeds, etc. As these service providers are beyond our control, your purchase decision should not be based solely on these features.

Thanks for checking out Squaretype

Feel free to contact us with any questions or comments you may have via our e-mail.

And, if you love Squaretype as much as we enjoyed developing it, please remember to rate it.

Support

We provide support through our ticket system. We do not generally provide support via e-mail or comments on ThemeForest. Therefore if you would like your issue to be reviewed as soon as possible, please open a ticket at codesupply.co/support.

We try to respond as fast as possible, generally within 24 hours, however on holidays and weekends, it may take up to 48 hours.

Squaretype – Modern Blog WordPress Theme   Link: Ürünü Satın AL   Squaretype. Modern WordPress Theme for Content-Based Blogs & Magazines Squaretype is a modern and clean WordPress theme for modern content-based blogs and magazines.

[takecrack]

Microsoft Office 2016 Crack Product Key

Microsoft Office Crack Product Key is an office suite for Windows users, which was released on January 30, 2016. According to Office 2003’s Forwent, the 2016 version saw a lot of overhauls in this office suite, which is used by millions of users worldwide. With its completely updated software, productivity has recently increased. The ribbon-centric interface allows you to access the different features of Office almost immediately. This is the year 2016. Feature-based software has been widely welcomed by users. Finding endless choices and submenus is now over. Microsoft Office 2016 Free Download For Windows Portable is an option that can be considered from anywhere and can be used on any system without having to install it on the system.

Microsoft Office 2016 Crack Version of the favorite MS office version was used by millions of users for day-to-day office work, creating documents, etc. It is an office suite for Windows users and was released on January 30, 2016. The ribbon-based interface gives you instant access to the different features of Office 2016. Office 2016, as well as standard applications such as Word, PowerPoint, and Excel, and introduces new applications such as Microsoft Groove, a small business for communications. Kit.

About Microsoft Office

Download the latest version of the PC for free at Microsoft Office 2016 Crack. Therefore, this is a complete offline installer 32-bit and 64-bit. In addition, Latest Ms Office 2016 was developed by microsoft. Developers add the latest features to meet your problem. Therefore, many people like this version and use it in their daily life. The MS Office is the best text editor in the world. Office 2016 is so easy to use that you can easily learn how to use it. Therefore, everyone likes its features. Office 2016 Mac Latest Version include Microsoft Word, Microsoft Excel, Powerpoint, and Microsoft Access. Therefore, we will tell you the purpose of all these tools. You may also want to download Office 2016 Programs.

The previous page was stopped by Microsoft’s share-level designer, which can be accessed right away from the Access database. Access is a tool that ensures professional database programmers, so software doesn’t change as much as before. Access can also send e-mail well with Perspective 2016, so the Cracked Report Designer in Microsoft Office Crack Product Key is also visually augmented, and you will build lists and tables in the same way as Excel. There is also an annotation that has been upgraded to several note concepts to organize your notes and information in different categories.

MS Office 2016 Full Version Serial Keys Free Download

Microsoft Office Crack Product Key hides some features until it detects that users need them. For example, the picture and chart formatting tools may not be visible or active until the user highlights an image or a chart. Microsoft Outlook has more features, such as the “To execute” toolbar, which provides users with an instant list of activities. Users can also use SharePoint to send messages to phones, access and modify calendars, store tasks, and contacts. Users can also store HTML files in excel files so that they can be edited using a web browser. With the PowerPoint application, users can make more attractive presentations. Users can access the presentation on the server and update their performance to match the server.

Using Microsoft Office On Mac effectively manages your business, rather than selling any other Office tools in the market. You can easily manage your entire business with Microsoft Office Enterprise 2016. This release includes all user-friendly business software. It also has Microsoft Office Professional Plus 2016. I have Microsoft Office Professional Plus 2016 and it also has Microsoft Office Professional OneNote 2016 in this package

Microsoft Office 2016 Crack Full Version

Microsoft Office 2016 cracked with the key generator is definitely a start to use. The Microsoft activity calculated the types of work procedures used in our daily associations and neighborhood art. This is a very critical office creation and it’s shaped like a processor. The working position of Microsoft is to emit light suitable for regularly transferable equipment, such as drugs, a computer that can be optimized for Home Windows 7 Windows 8.1 and Residential Windows 10. Because all types of document types use the full version of my job title 2016 to record your personal style. Therefore, you must be the appropriate Latest Version Of Office For Mac product key because it starts and finishes the skin.

Ms Office 2016 Full Crack Service Pack 2 includes 600 better fixes and enhancements for Microsoft productivity suites. Therefore, you will need to ensure enough to wait for a 290 MB file to download, this is yours. The Microsoft Office Professional 2016 suite includes the basic programs Word 2016, 2016, and PowerPoint 2016. In addition, it also includes business solutions for all products owned by MICROSOFT such as Outlook 2016, Composer 2016 and Access 2016.its.

Serial Keys: Microsoft Office 2016

GMG3P-FHGXW-VTQ94-4QW8F-VG2HM

KJYPC-VDYR6-82242-PFR9R-688VM

DPK3W-F6FGP-9JDGJ-23VQM-TRHYB

R2WBR-GG6HV-GTPMB-RG9B9-YBJVM

VRGRB-3Y8BW-M2HQX-X3Y22-RJ8VM

DH4M2-48DGQ-DYQ6Q-FHDC4-X6QDY

WCRWK-Y637K-4MRCB-2YQXY-4BGWW

KXRCD-KDMKV-3RFDM-MJT8X-GVWVQ

VBWYT-BBWKV-P86YX-G642C-3C3D3

DQDV2-3TV93-3WW78-2CMV4-86QD3

WP6B2-Y9FR6-WG2R6-KH2Q7-P9T33

H7G9G-HQ46M-BKFG7-MPFF4-TMVYD

F3DFQ-BGD6J-87QWY-TMXCV-8B2HQ

RHMX7-M3T4C-2JF7R-VTDJV-KPBMB

FR6D9-89FTC-87WC6-MM4PB-G6VYB

QK6DQ-6K9HJ-YRVP4-GWVR4-KGQD3

VVRMB-8RQG2-K2K3B-X3P6G-PR9Q3

FWQ4V-XYYWD-V7HB6-G3922-4D4BD

RV29T-JVXGX-968YT-RFC79-RRT33

Features Microsoft Office 2016 crack

Compatible with windows XP, windows server 2003 or windows Vista.

Introduces a toolbar that uses easy-to-differentiate icons to display functions and menus.

The integration of the Office logo retains almost all the commands in previous releases.

The menu navigation bar is based on the screen of item prediction options currently processed in the document.

The “Survey” feature allows users to display topics such as themes and pictures before the application.

Preset style web templates and SmartArt diagrams provide simple customizations for presentations and documents.

Word in Office 2016 allows its users to write sleek, professional files with new option formats.

Excel 2016 Helps Users Create Spreadsheets to Simplify Formulas and Charts

PowerPoint 2016 presentations have greater design and customization capabilities.

In View 2016, the real-time management of tasks is more reliable.

The documents generated by the 2016 program are smaller in data size.

Document recovery prevents record damage.

Compatibility settings are available for previous versions to see the year of the 2016 document.

Fully interactive user interface

Supports XML, PDF, and XPS file formats

Sensitive ribbon

File Sharing SharePoint and Groove Features

Quick styles and themes shared between excel, PowerPoint, word, and Outlook emails.

Advanced Zoom Tool

New speech recognition tool

Upgraded AutoCorrect feature

Easily create graphics with SmartArt tools

Upgraded import and export features

Customizable status bar

Real-time preview function

System Requirements

Display resolution 1024×768

Processor or higher

256 MB RAM or higher

Windows XP SP2, Vista SP1, and win 7

512mb ram recommended or higher Outlook Instant Search, Business Contact Manager

1GHz processor recommended for business contact managers or higher

The post Microsoft Office 2016 Crack Product Key appeared first on Take Crack.

from Take Crack https://ift.tt/2PZa7U7 via IFTTT

[noursweeklynerd]

Why is accessibility so important?

Why do we have to use semantics in our code? Why should we add alt tags to images, aria-labels to almost everything and labels our input fields? The answer is easy: to make it accessible for everyone. “Why?” you may ask. Because 100% of the people who use the web are disabled.

Bram Duvigneau has completely blind since he was born and can only notice light and dark.

He also used to be a developer who now teaches other blind or almost-blind people how to use, for example, a cellphone or a computer and gives talks to non-blind people how much it sucks to use the web when you’re blind.

And I know you’re probably thinking, “Blind people can’t see so how can they use a phone or a laptop?”. The thing is that in our computers and phones there is a submenu in our settings that is called “Accessibility”. And besides that, screen readers and braille keyboards and displays have been around since the early 80s.

During his talk, the biggest pain point is that when a screen reader is going through a web page, 9 out of 10 times the website does not make sense at all. Too many things don’t have labels, some websites have an autoplay video that overpowers the voice of the screen reader, links are labelled as “read more” but nothing specifies about what you’re going to read more about, navigation menus are disordered, headings are not named properly, etc., etc..

As sighted people, we are not bothered by the problems blind people “see” because we don’t experience them. Our daily web is completely different from theirs. The main reason behind that is that ours is visualised by images, colours, grids and animations and for them it’s completely text based (because screen readers will only read text, not colours) and the way it’s read for them depends on how the page is structured and heavily relies on the semantics of the HTML tags used.  

Remember the Pyramid of Emotional Interface Design, where a website has to be functional, then reliable, then usable and if all of those have been achieved it could also be pleasurable? For blind people, the web is barely functional. If a website has a lot of text and almost no headings, or it’s an image page and—at the bare minimum— none of the images have alt tags, then it cannot be functional for them because they can’t find what they need.

But how do we, as sighted developers, make the web functional, or even pleasurable, for blind people? The answer is simple, really: just use semantic HTML-tags and structure the website in a logic way. I know it’s easy to use dirty hacks around frustrating bugs, but we’ve got to stop doing that. Even though we “solved” the annoying bug and we don’t see it anymore, people with screen readers still do and it frustrates them even more.

What we do need to use more is good heading structures, add true alt tags to images, a skip-to-navigation link, accurate hyperlink labels and no more “read more”-links, a logic HTML structure and especially use the right language tag in the <head>. Because even though it might sound fun to have an English website read with a Russian accent, it will only confuse screen reader users.

So let’s just all work together to work towards a better and even a pleasurable web that is not only accessible for us, but also for our blind audience.

[gabrielcollignon]

How to Make Your Content More Readable

How to Make Your Content More Readable

Your team has created, socialized, and measured content in just about every possible way … except for one of the most important metrics: how your audience is engaging with the words.

You want visitors to find information, stay engaged, or complete a task. But once readers’ eyes hit the words on the page, if it takes too much effort, their interaction falls off and you have churn. You know this anecdotally. Yet most don’t measure it scientifically.

Which of the thousands if not millions of words on a website are helping or hurting? What content is too dense or confusing?

Content teams work hard to create compelling content, but they have a natural blind spot. They’re too close to their creations – the blogs, thought leadership, and marketing pieces – to see them through the audience’s eyes.

HANDPICKED RELATED CONTENT: 27 Reasons Why Your Content Sucks

AI tools can benchmark content understanding

Now, with advances in natural language processing and artificial intelligence, a new breed of technology can test content for readability and clarity, which go to the heart of user experience and engagement. It can move organizations from a subjective approach, often fraught with editorial friction, to an objective, metric-based approach.

In this article I look at how to test for readability across your organization. For CMOs and chief content officers who want more engaging content, you now have ways to measure and benchmark clarity across the organization. And these tools can also help individual writers and creators produce better quality content.

HANDPICKED RELATED CONTENT: Scale Your B2B Content With Artificial Intelligence: Ideas and Tools Marketers Can Try

Let’s define readability and clarity

Content clarity is the user experience of how difficult or easy it is to read text. Why is that important? We know from neuroscience that processing words places a far greater cognitive load on the brain than images. Plus, attention spans are shorter, meaning visitors have lower tolerance for confusion.

Processing words places a far greater cognitive load on the brain than images. @FergalMcGovern @VisibleThread. Click To Tweet

Fortunately, there are several widely used measures. The Flesch Reading Ease Index, created by Rudolf Flesch in the 1950s, calculates the average syllable per word and the density of long sentences and assigns a readability score – the higher the number, the easier content is to read.

The Flesch-Kincaid measure, derived from the index, scores readability at grade level, approximating the number of years of education required to easily understand content (though with this tool, a lower score means higher readability). The U.S. Navy developed the Flesch-Kincaid measure in the 1970s to ensure that soldiers under stress in the field could easily understand written instructions in their manuals. While today’s audiences most likely aren’t in combat, they do face the stresses of information overload and too little time.

HANDPICKED RELATED CONTENT: The Ultimate Science-Backed Method for Creating Content That Readers Love

Your readers are checking out and churning

Research shows that the average U.S. citizen reads at a seventh- to eighth-grade level – and it’s not simply a problem of low academic achievement. Some studies show even highly educated people disengage rather than spend the mental energy to unpack dense, complicated prose. Josh Bernoff, author and a contributor to the Harvard Business Review, surveyed 550 businesspeople in 2016. As many as 81% said poorly written content wasted too much of their time.

81% of respondents surveyed said poorly written #content wasted too much of their time via @jbernoff. Click To Tweet

That’s one reason Reader’s Digest and Time magazine are successful. Reader’s Digest has a readability index of about 65 and Time scores about 52. Give people the choice between reading something at that level versus run-on sentences of 40 or 50 words with several competing ideas, it’s clear which they’ll prefer.

What is good readability?

There’s no one size fits all, but the gold standard of readability for business communication is grade eight or lower.

You should limit long sentences and passive voice to 5% or less of the total content. Active voice rather than passive makes it clearer who needs to do what. By shortening sentences and using active voice, you can make even technical subject matter more readable and engaging without any “dumbing down.”  The best writing makes complex topics easy to understand.

Limit long sentences and passive voice to 5% or less of total #content, says @FergalMcGovern @VisibleThread. Click To Tweet

The clarity problem isn’t new; but organizations are now producing vast quantities of content for their audiences. And with that proliferation comes a quality control issue. In 2010, President Barack Obama signed the Plain Language Act to make U.S. government-created content less dense and confusing. Federal agencies must now use “plain language” to communicate more clearly with citizens.

There’s no equivalent plain-language law in the commercial sector, but, given how fiercely brands compete for audience attention, they should be addressing it voluntarily.

One financial organization my team worked with set an internal goal that all consumer-facing content must be of a grade eight to 10 readability level – an ambitious goal. Our organization also worked with government agencies that have similar objectives. For example, the Australian federal government aims for a grade five readability level as part of its digital service standard. All companies that create content for cus

<!–

Edit Post ‹ Content Marketing Institute — WordPress

addLoadEvent = function(func)if(typeof jQuery!=”undefined”)jQuery(document).ready(func);else if(typeof wpOnload!=’function’)wpOnload=func;elsevar oldonload=wpOnload;wpOnload=function()oldonload();func();; var ajaxurl = ‘/wp-admin/admin-ajax.php’, pagenow = ‘post’, typenow = ‘post’, adminpage = ‘post-php’, thousandsSeparator = ‘,’, decimalPoint = ‘.’, isRtl = 0;

img.wp-smiley, img.emoji display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important;

#toplevel_page_sabai-directory .wp-menu-image background:transparent url(http://contentmarketinginstitute.com/wp-content/plugins/sabai-directory/assets/images/icon_dark.png) no-repeat center center !important; #toplevel_page_sabai-directory:hover .wp-menu-image, #toplevel_page_sabai-directory.wp-has-current-submenu .wp-menu-image background-image:url(http://contentmarketinginstitute.com/wp-content/plugins/sabai-directory/assets/images/icon.png) !important;

if ( typeof performance !== ‘undefined’ && performance.navigation && performance.navigation.type === 2 ) document.location.reload( true );

window._wpemojiSettings = “baseUrl”:”https:\/\/s.w.org\/images\/core\/emoji\/2\/72×72\/”,”ext”:”.png”,”svgUrl”:”https:\/\/s.w.org\/images\/core\/emoji\/2\/svg\/”,”svgExt”:”.svg”,”source”:“concatemoji”:”http:\/\/contentmarketinginstitute.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.6.9″; !function(a,b,c)(window,document,window._wpemojiSettings); /* < ![CDATA[ */EnlighterJS_EditorConfig = "languages":"Generic Highlighting":"generic","CSS (Cascading Style Sheets)":"css","HTML (Hypertext Markup Language)":"html","Java":"java","Javascript":"js","JSON":"json","Markdown":"md","PHP":"php","Python":"python","Ruby":"ruby","Shell Script":"shell","SQL":"sql","XML":"xml","C":"c","C++":"cpp","C#":"csharp","RUST":"rust","LUA":"lua","Matlab":"matlab","NSIS":"nsis","Diff":"diff","VHDL":"vhdl","Avr Assembly":"avrasm","Generic Assembly":"asm","Kotlin":"kotlin","Squirrel":"squirrel","Ini\/Conf Syntax":"ini","RAW Code":"raw","No Highlighting":"no-highlight","themes":"WPCustom":"wpcustom","Enlighter":"enlighter","Godzilla":"godzilla","Beyond":"beyond","Classic":"classic","MooTwo":"mootwo","Eclipse":"eclipse","Droide":"droide","Minimal":"minimal","Atomic":"atomic","Rowhammer":"rowhammer","Git":"git","Mocha":"mocha","MooTools":"mootools","Panic":"panic","Tutti":"tutti","Twilight":"twilight","config":"theme":"minimal","language":"generic","linenumbers":true,"indent":2,"tabIndentation":false,"quicktagMode":"html","languageShortcode":true;/* ]]> */ /* < ![CDATA[ */ var the_ajax_script = "ajaxurl":"http:\/\/contentmarketinginstitute.com\/wp-admin\/admin-ajax.php"; /* ]]> */

/* < ![CDATA[ */ var userSettings = "url":"\/","uid":"11402","time":"1520465389","secure":"";var quicktagsL10n = "closeAllOpenTags":"Close all open tags","closeTags":"close tags","enterURL":"Enter the URL","enterImageURL":"Enter the URL of the image","enterImageDescription":"Enter a description of the image","textdirection":"text direction","toggleTextdirection":"Toggle Editor Text Direction","dfw":"Distraction-free writing mode","strong":"Bold","strongClose":"Close bold tag","em":"Italic","emClose":"Close italic tag","link":"Insert link","blockquote":"Blockquote","blockquoteClose":"Close blockquote tag","del":"Deleted text (strikethrough)","delClose":"Close deleted text tag","ins":"Inserted text","insClose":"Close inserted text tag","image":"Insert image","ul":"Bulleted list","ulClose":"Close bulleted list tag","ol":"Numbered list","olClose":"Close numbered list tag","li":"List item","liClose":"Close list item tag","code":"Code","codeClose":"Close code tag","more":"Insert Read More tag";var _wpUtilSettings = "ajax":"url":"\/wp-admin\/admin-ajax.php";var _wpMediaModelsL10n = "settings":"ajaxurl":"\/wp-admin\/admin-ajax.php","post":"id":0;var pluploadL10n = "queue_limit_exceeded":"You have attempted to queue too many files.","file_exceeds_size_limit":"%s exceeds the maximum upload size for this site.","zero_byte_file":"This file is empty. Please try another.","invalid_filetype":"This file type is not allowed. Please try another.","not_an_image":"This file is not an image. Please try another.","image_memory_exceeded":"Memory exceeded. Please try another smaller file.","image_dimensions_exceeded":"This is larger than the maximum size. Please try another.","default_error":"An error occurred in the upload. Please try again later.","missing_upload_url":"There was a configuration error. Please contact the server administrator.","upload_limit_exceeded":"You may only upload 1 file.","http_error":"HTTP error.","upload_failed":"Upload failed.","big_upload_failed":"Please try uploading this file with the %1$sbrowser uploader%2$s.","big_upload_queued":"%s exceeds the maximum upload size for the multi-file uploader when used in your browser.","io_error":"IO error.","security_error":"Security error.","file_cancelled":"File canceled.","upload_stopped":"Upload stopped.","dismiss":"Dismiss","crunching":"Crunching\u2026","deleted":"moved to the trash.","error_uploading":"\u201c%s\u201d has failed to upload."; var _wpPluploadSettings = "defaults":"runtimes":"html5,flash,silverlight,html4","file_data_name":"async-upload","url":"\/wp-admin\/async-upload.php","flash_swf_url":"http:\/\/contentmarketinginstitute.com\/wp-includes\/js\/plupload\/plupload.flash.swf","silverlight_xap_url":"http:\/\/contentmarketinginstitute.com\/wp-includes\/js\/plupload\/plupload.silverlight.xap","filters":"max_file_size":"314572800b","mime_types":["extensions":"jpg,jpeg,jpe,gif,png,bmp,tiff,tif,ico,asf,asx,wmv,wmx,wm,avi,divx,flv,mov,qt,mpeg,mpg,mpe,mp4,m4v,ogv,webm,mkv,3gp,3gpp,3g2,3gp2,txt,asc,c,cc,h,srt,csv,tsv,ics,rtx,css,htm,html,vtt,dfxp,mp3,m4a,m4b,ra,ram,wav,ogg,oga,mid,midi,wma,wax,mka,rtf,js,pdf,class,tar,zip,gz,gzip,rar,7z,psd,xcf,doc,pot,pps,ppt,wri,xla,xls,xlt,xlw,mdb,mpp,docx,docm,dotx,dotm,xlsx,xlsm,xlsb,xltx,xltm,xlam,pptx,pptm,ppsx,ppsm,potx,potm,ppam,sldx,sldm,onetoc,onetoc2,onetmp,onepkg,oxps,xps,odt,odp,ods,odg,odc,odb,odf,wp,wpd,key,numbers,pages"],"multipart_params":"action":"upload-attachment","_wpnonce":"21bfc5a0ae","browser":"mobile":false,"supported":true,"limitExceeded":false;var mejsL10n = "language":"en-US","strings":"Close":"Close","Fullscreen":"Fullscreen","Turn off Fullscreen":"Turn off Fullscreen","Go Fullscreen":"Go Fullscreen","Download File":"Download File","Download Video":"Download Video","Play":"Play","Pause":"Pause","Captions\/Subtitles":"Captions\/Subtitles","None":"None","Time Slider":"Time Slider","Skip back %1 seconds":"Skip back %1 seconds","Video Player":"Video Player","Audio Player":"Audio Player","Volume Slider":"Volume Slider","Mute Toggle":"Mute Toggle","Unmute":"Unmute","Mute":"Mute","Use Up\/Down Arrow keys to increase or decrease volume.":"Use Up\/Down Arrow keys to increase or decrease volume.","Use Left\/Right Arrow keys to advance one second, Up\/Down arrows to advance ten seconds.":"Use Left\/Right Arrow keys to advance one second, Up\/Down arrows to advance ten seconds."; var _wpmejsSettings = "pluginPath":"\/wp-includes\/js\/mediaelement\/";var _wpMediaViewsL10n = "url":"URL","addMedia":"Add Media","search":"Search","select":"Select","cancel":"Cancel","update":"Update","replace":"Replace","remove":"Remove","back":"Back","selected":"%d selected","dragInfo":"Drag and drop to reorder media files.","uploadFilesTitle":"Upload Files","uploadImagesTitle":"Upload Images","mediaLibraryTitle":"Media Library","insertMediaTitle":"Insert Media","createNewGallery":"Create a new gallery","createNewPlaylist":"Create a new playlist","createNewVideoPlaylist":"Create a new video playlist","returnToLibrary":"\u2190 Return to library","allMediaItems":"All media items","allDates":"All dates","noItemsFound":"No items found.","insertIntoPost":"Insert into post","unattached":"Unattached","trash":"Trash","uploadedToThisPost":"Uploaded to this post","warnDelete":"You are about to permanently delete this item.\n 'Cancel' to stop, 'OK' to delete.","warnBulkDelete":"You are about to permanently delete these items.\n 'Cancel' to stop, 'OK' to delete.","warnBulkTrash":"You are about to trash these items.\n 'Cancel' to stop, 'OK' to delete.","bulkSelect":"Bulk Select","cancelSelection":"Cancel Selection","trashSelected":"Trash Selected","untrashSelected":"Untrash Selected","deleteSelected":"Delete Selected","deletePermanently":"Delete Permanently","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchMediaLabel":"Search Media","noMedia":"No media files found.","attachmentDetails":"Attachment Details","insertFromUrlTitle":"Insert from URL","setFeaturedImageTitle":"Featured Image","setFeaturedImage":"Set featured image","createGalleryTitle":"Create Gallery","editGalleryTitle":"Edit Gallery","cancelGalleryTitle":"\u2190 Cancel Gallery","insertGallery":"Insert gallery","updateGallery":"Update gallery","addToGallery":"Add to gallery","addToGalleryTitle":"Add to Gallery","reverseOrder":"Reverse order","imageDetailsTitle":"Image Details","imageReplaceTitle":"Replace Image","imageDetailsCancel":"Cancel Edit","editImage":"Edit Image","chooseImage":"Choose Image","selectAndCrop":"Select and Crop","skipCropping":"Skip Cropping","cropImage":"Crop Image","cropYourImage":"Crop your image","cropping":"Cropping\u2026","suggestedDimensions":"Suggested image dimensions:","cropError":"There has been an error cropping your image.","audioDetailsTitle":"Audio Details","audioReplaceTitle":"Replace Audio","audioAddSourceTitle":"Add Audio Source","audioDetailsCancel":"Cancel Edit","videoDetailsTitle":"Video Details","videoReplaceTitle":"Replace Video","videoAddSourceTitle":"Add Video Source","videoDetailsCancel":"Cancel Edit","videoSelectPosterImageTitle":"Select Poster Image","videoAddTrackTitle":"Add Subtitles","playlistDragInfo":"Drag and drop to reorder tracks.","createPlaylistTitle":"Create Audio Playlist","editPlaylistTitle":"Edit Audio Playlist","cancelPlaylistTitle":"\u2190 Cancel Audio Playlist","insertPlaylist":"Insert audio playlist","updatePlaylist":"Update audio playlist","addToPlaylist":"Add to audio playlist","addToPlaylistTitle":"Add to Audio Playlist","videoPlaylistDragInfo":"Drag and drop to reorder videos.","createVideoPlaylistTitle":"Create Video Playlist","editVideoPlaylistTitle":"Edit Video Playlist","cancelVideoPlaylistTitle":"\u2190 Cancel Video Playlist","insertVideoPlaylist":"Insert video playlist","updateVideoPlaylist":"Update video playlist","addToVideoPlaylist":"Add to video playlist","addToVideoPlaylistTitle":"Add to Video Playlist","settings":"tabs":[],"tabUrl":"http:\/\/contentmarketinginstitute.com\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":"image":"Images","audio":"Audio","video":"Video","captions":true,"nonce":"sendToEditor":"f1bdb133c1","post":"id":78063,"nonce":"2a47de512f","featuredImageId":"78064","defaultProps":"link":"","align":"","size":"","attachmentCounts":"audio":1,"video":1,"embedExts":["mp3","ogg","wma","m4a","wav","mp4","m4v","webm","ogv","wmv","flv"],"embedMimes":"mp3":"audio\/mpeg","ogg":"audio\/ogg","wma":"audio\/x-ms-wma","m4a":"audio\/mpeg","wav":"audio\/wav","mp4":"video\/mp4","m4v":"video\/mp4","webm":"video\/webm","ogv":"video\/ogg","wmv":"video\/x-ms-wmv","flv":"video\/x-flv","contentWidth":null,"months":["year":"2018","month":"3","text":"March 2018","year":"2018","month":"2","text":"February 2018","year":"2018","month":"1","text":"January 2018","year":"2017","month":"12","text":"December 2017","year":"2017","month":"11","text":"November 2017","year":"2017","month":"10","text":"October 2017","year":"2017","month":"9","text":"September 2017","year":"2017","month":"8","text":"August 2017","year":"2017","month":"7","text":"July 2017","year":"2017","month":"6","text":"June 2017","year":"2017","month":"5","text":"May 2017","year":"2017","month":"4","text":"April 2017","year":"2017","month":"3","text":"March 2017","year":"2017","month":"2","text":"February 2017","year":"2017","month":"1","text":"January 2017","year":"2016","month":"12","text":"December 2016","year":"2016","month":"11","text":"November 2016","year":"2016","month":"10","text":"October 2016","year":"2016","month":"9","text":"September 2016","year":"2016","month":"8","text":"August 2016","year":"2016","month":"7","text":"July 2016","year":"2016","month":"6","text":"June 2016","year":"2016","month":"5","text":"May 2016","year":"2016","month":"4","text":"April 2016","year":"2016","month":"3","text":"March 2016","year":"2016","month":"2","text":"February 2016","year":"2016","month":"1","text":"January 2016","year":"2015","month":"12","text":"December 2015","year":"2015","month":"11","text":"November 2015","year":"2015","month":"10","text":"October 2015","year":"2015","month":"9","text":"September 2015","year":"2015","month":"8","text":"August 2015","year":"2015","month":"7","text":"July 2015","year":"2015","month":"6","text":"June 2015","year":"2015","month":"5","text":"May 2015","year":"2015","month":"4","text":"April 2015","year":"2015","month":"3","text":"March 2015","year":"2015","month":"2","text":"February 2015","year":"2015","month":"1","text":"January 2015","year":"2014","month":"12","text":"December 2014","year":"2014","month":"11","text":"November 2014","year":"2014","month":"10","text":"October 2014","year":"2014","month":"9","text":"September 2014","year":"2014","month":"8","text":"August 2014","year":"2014","month":"7","text":"July 2014","year":"2014","month":"6","text":"June 2014","year":"2014","month":"5","text":"May 2014","year":"2014","month":"4","text":"April 2014","year":"2014","month":"3","text":"March 2014","year":"2014","month":"2","text":"February 2014","year":"2014","month":"1","text":"January 2014","year":"2013","month":"12","text":"December 2013","year":"2013","month":"11","text":"November 2013","year":"2013","month":"10","text":"October 2013","year":"2013","month":"9","text":"September 2013","year":"2013","month":"8","text":"August 2013","year":"2013","month":"7","text":"July 2013","year":"2013","month":"6","text":"June 2013","year":"2013","month":"5","text":"May 2013","year":"2013","month":"4","text":"April 2013","year":"2013","month":"3","text":"March 2013","year":"2013","month":"2","text":"February 2013","year":"2013","month":"1","text":"January 2013","year":"2012","month":"12","text":"December 2012","year":"2012","month":"11","text":"November 2012","year":"2012","month":"10","text":"October 2012","year":"2012","month":"9","text":"September 2012","year":"2012","month":"8","text":"August 2012","year":"2012","month":"7","text":"July 2012","year":"2012","month":"6","text":"June 2012","year":"2012","month":"5","text":"May 2012","year":"2012","month":"4","text":"April 2012","year":"2012","month":"3","text":"March 2012","year":"2012","month":"2","text":"February 2012","year":"2012","month":"1","text":"January 2012","year":"2011","month":"12","text":"December 2011","year":"2011","month":"11","text":"November 2011","year":"2011","month":"10","text":"October 2011","year":"2011","month":"9","text":"September 2011","year":"2011","month":"8","text":"August 2011","year":"2011","month":"7","text":"July 2011","year":"2011","month":"6","text":"June 2011","year":"2011","month":"5","text":"May 2011","year":"2011","month":"4","text":"April 2011","year":"2011","month":"3","text":"March 2011","year":"2011","month":"2","text":"February 2011","year":"2011","month":"1","text":"January 2011","year":"2010","month":"12","text":"December 2010","year":"2010","month":"11","text":"November 2010","year":"2010","month":"10","text":"October 2010","year":"2010","month":"9","text":"September 2010","year":"2010","month":"8","text":"August 2010","year":"2010","month":"7","text":"July 2010","year":"2010","month":"6","text":"June 2010","year":"2010","month":"5","text":"May 2010","year":"2010","month":"4","text":"April 2010","year":"2010","month":"3","text":"March 2010"],"mediaTrash":0;var wpColorPickerL10n = "clear":"Clear","defaultString":"Default","pick":"Select Color","current":"Current Color";/* ]]> */

jQuery(document).ready(function(jQuery)jQuery.datepicker.setDefaults(“closeText”:”Close”,”currentText”:”Today”,”monthNames”:[“January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”,”September”,”October”,”November”,”December”],”monthNamesShort”:[“Jan”,”Feb”,”Mar”,”Apr”,”May”,”Jun”,”Jul”,”Aug”,”Sep”,”Oct”,”Nov”,”Dec”],”nextText”:”Next”,”prevText”:”Previous”,”dayNames”:[“Sunday”,”Monday”,”Tuesday”,”Wednesday”,”Thursday”,”Friday”,”Saturday”],”dayNamesShort”:[“Sun”,”Mon”,”Tue”,”Wed”,”Thu”,”Fri”,”Sat”],”dayNamesMin”:[“S”,”M”,”T”,”W”,”T”,”F”,”S”],”dateFormat”:”MM d, yy”,”firstDay”:0,”isRTL”:false););

/* < ![CDATA[ */ var Listly = "PluginURL":"http:\/\/contentmarketinginstitute.com\/wp-content\/plugins\/listly\/","SiteURL":"http:\/\/list.ly\/api\/v2\/","Key":"70f94adc6c27a18b4068","Nounce":"eb8252a91e"; /* ]]> */

/* < ![CDATA[ */ var monsterinsights_admin_common = "ajax":"http:\/\/contentmarketinginstitute.com\/wp-admin\/admin-ajax.php","dismiss_notice_nonce":"d2e499269a"; /* ]]> */

/* < ![CDATA[ */ var Smart_Podcast_Player_Admin = "licensed":"1"; var smart_podcast_player_user_settings = "bg_color":"#e7741b","link_color":"#e7741b","style":"light","url":"","show_name":""; /* ]]> */

/* < ![CDATA[ */ var uiAutocompleteL10n = "noResults":"No search results.","oneResult":"1 result found. Use up and down arrow keys to navigate.","manyResults":"%d results found. Use up and down arrow keys to navigate."; /* ]]> */

/* < ![CDATA[ */ var wpseoAdminL10n = "locale":"en_US","videoTutorial":"Video tutorial","knowledgeBase":"Knowledge base","getSupport":"Get support","algoliaSearcher.loadingPlaceholder":"Loading…","algoliaSearcher.errorMessage":"Something went wrong. Please try again later.","searchBar.headingText":"Search the Yoast knowledge base","searchBar.placeholderText":"Search the knowledge base","searchBar.buttonText":"Search","searchResultDetail.openButton":"View in KB","searchResultDetail.openButtonLabel":"Open the knowledge base article in a new window or read it in the iframe below","searchResultDetail.backButton":"Go back","searchResultDetail.backButtonLabel":"Go back to the search results","searchResultDetail.iframeTitle":"Knowledge base article","searchResult.noResultsText":"No results found.","searchResult.foundResultsText":"Number of results found: resultsCount ","searchResult.searchResultsHeading":"Search results","a11yNotice.opensInNewTab":"(Opens in a new browser tab)","contactSupport.button":"Open support form"; var wpseoSelect2Locale = "en"; var wpseoFeaturedImageL10n = "featured_image_notice":"SEO issue: The featured image should be at least 200 by 200 pixels to be picked up by Facebook and other social media sites."; /* ]]> */

/* < ![CDATA[ */ var AtD_l10n_r0ar = "menu_title_spelling":"Spelling","menu_title_repeated_word":"Repeated Word","menu_title_no_suggestions":"No suggestions","menu_option_explain":"Explain…","menu_option_ignore_once":"Ignore suggestion","menu_option_ignore_always":"Ignore always","menu_option_ignore_all":"Ignore all","menu_option_edit_selection":"Edit Selection…","button_proofread":"proofread","button_edit_text":"edit text","button_proofread_tooltip":"Proofread Writing","message_no_errors_found":"No writing errors were found.","message_server_error":"There was a problem communicating with the Proofreading service. Try again in one minute.","message_server_error_short":"There was an error communicating with the proofreading service.","dialog_replace_selection":"Replace selection with:","dialog_confirm_post_publish":"The proofreader has suggestions for this post. Are you sure you want to publish it?\n\nPress OK to publish your post, or Cancel to view the suggestions and edit your post.","dialog_confirm_post_update":"The proofreader has suggestions for this post. Are you sure you want to update it?\n\nPress OK to update your post, or Cancel to view the suggestions and edit your post."; /* ]]> */

/* < ![CDATA[ */ var fromphp = "jaxfile":"http:\/\/contentmarketinginstitute.com\/wp-admin\/admin-ajax.php"; /* ]]> */

/* < ![CDATA[ */ var cmb2_l10 = "ajax_nonce":"8635e63bc4","ajaxurl":"http:\/\/contentmarketinginstitute.com\/wp-admin\/admin-ajax.php","script_debug":"","up_arrow_class":"dashicons dashicons-arrow-up-alt2","down_arrow_class":"dashicons dashicons-arrow-down-alt2","defaults":"color_picker":false,"date_picker":"changeMonth":true,"changeYear":true,"dateFormat":"mm\/dd\/yy","dayNames":["Sunday"," Monday"," Tuesday"," Wednesday"," Thursday"," Friday"," Saturday"],"dayNamesMin":["Su"," Mo"," Tu"," We"," Th"," Fr"," Sa"],"dayNamesShort":["Sun"," Mon"," Tue"," Wed"," Thu"," Fri"," Sat"],"monthNames":["January"," February"," March"," April"," May"," June"," July"," August"," September"," October"," November"," December"],"monthNamesShort":["Jan"," Feb"," Mar"," Apr"," May"," Jun"," Jul"," Aug"," Sep"," Oct"," Nov"," Dec"],"nextText":"Next","prevText":"Prev","currentText":"Today","closeText":"Done","clearText":"Clear","time_picker":"startTime":"00:00","endTime":"23:59","show24Hours":false,"separator":":","step":30,"strings":"upload_file":"Use this file","remove_image":"Remove Image","remove_file":"Remove","file":"File:","download":"Download","check_toggle":"Select \/ Deselect All"; /* ]]> */

( function ( $ ) $( document ).ready( function () // save dismiss state $( ‘.rl-notice.is-dismissible’ ).on( ‘click’, ‘.notice-dismiss’, function ( e ) e.preventDefault();

$.post( ajaxurl, action: ‘rl-hide-notice’, url: ‘http://contentmarketinginstitute.com/wp-admin/admin-ajax.php’, rl_nonce: ‘cc18b84719’ );

); ); )( jQuery );

jQuery( function($) var wpasTitleCounter = $( ‘#wpas-title-counter’ ), wpasTwitterCheckbox = $( ‘.wpas-submit-twitter’ ).size(), wpasTitle = $(‘#wpas-title’).keyup( function() var length = wpasTitle.val().length; wpasTitleCounter.text( length ); if ( wpasTwitterCheckbox && length > 140 ) wpasTitleCounter.addClass( ‘wpas-twitter-length-limit’ ); else wpasTitleCounter.removeClass( ‘wpas-twitter-length-limit’ ); ), authClick = false;

$(‘#publicize-disconnected-form-show’).click( function() $(‘#publicize-form’).slideDown( ‘fast’ ); $(this).hide(); );

$(‘#publicize-disconnected-form-hide’).click( function() $(‘#publicize-form’).slideUp( ‘fast’ ); $(‘#publicize-disconnected-form-show’).show(); );

$(‘#publicize-form-edit’).click( function() $(‘#publicize-form’).slideDown( ‘fast’, function() wpasTitle.focus(); if ( !wpasTitle.text() ) var url = $(‘#shortlink’).size() ? $(‘#shortlink’).val() : ”;

var defaultMessage = $.trim( ” + $(“#title”).val() + ‘ ‘ );

wpasTitle.append( defaultMessage.replace( /]+>/g,”) );

var selBeg = defaultMessage.indexOf( $(“#title”).val() ); if ( selBeg < 0 ) selBeg = 0; selEnd = 0; else selEnd = selBeg + $("#title").val().length;

var domObj = wpasTitle.get(0); if ( domObj.setSelectionRange ) domObj.setSelectionRange( selBeg, selEnd ); else if ( domObj.createTextRange ) var r = domObj.createTextRange(); r.moveStart( 'character', selBeg ); r.moveEnd( 'character', selEnd ); r.select(); wpasTitle.keyup(); ); $('#publicize-defaults').hide(); $(this).hide(); return false; );

$('#publicize-form-hide').click( function() var newList = $.map( $('#publicize-form').slideUp( 'fast' ).find( ':checked' ), function( el ) return $.trim( $(el).parent( 'label' ).text() ); ); $('#publicize-defaults').html( '‘ + newList.join( ‘, ‘ ) + ‘‘ ).show(); $(‘#publicize-form-edit’).show(); return false; );

$(‘.authorize-link’).click( function() if ( authClick ) return false; authClick = true; $(this).after( ‘‘ ); $.ajaxSetup( async: false );

if ( window.wp && window.wp.autosave ) window.wp.autosave.server.triggerSave(); else autosave();

return true; );

$( ‘.pub-service’ ).click( function() var service = $(this).data( ‘service’ ), fakebox = ”; $( ‘#add-publicize-check’ ).append( fakebox ); );

publicizeConnTestStart = function() $( ‘#pub-connection-tests’ ) .removeClass( ‘below-h2’ ) .removeClass( ‘error’ ) .removeClass( ‘publicize-token-refresh-message’ ) .addClass( ‘test-in-progress’ ) .html( ” ); $.post( ajaxurl, action: ‘test_publicize_conns’ , publicizeConnTestComplete );

publicizeConnRefreshClick = function( event ) event.preventDefault(); var popupURL = event.currentTarget.href; var popupTitle = event.currentTarget.title; // open a popup window // when it is closed, kick off the tests again var popupWin = window.open( popupURL, popupTitle, ” ); var popupWinTimer= window.setInterval( function() if ( popupWin.closed !== false ) window.clearInterval( popupWinTimer ); publicizeConnTestStart(); , 500 );

publicizeConnTestComplete = function( response ) var testsSelector = $( ‘#pub-connection-tests’ ); testsSelector .removeClass( ‘test-in-progress’ ) .removeClass( ‘below-h2’ ) .removeClass( ‘error’ ) .removeClass( ‘publicize-token-refresh-message’ ) .html( ” );

// If any of the tests failed, show some stuff var somethingShownAlready = false; $.each( response.data, function( index, testResult ) // find the li for this connection if ( ! testResult.connectionTestPassed ) if ( ! somethingShownAlready ) testsSelector .addClass( ‘below-h2’ ) .addClass( ‘error’ ) .addClass( ‘publicize-token-refresh-message’ ) .append( “

Before you hit Publish, please refresh the following connection(s) to make sure we can Publicize your post:

” ); somethingShownAlready = true;

if ( testResult.userCanRefresh ) testsSelector.append( ‘

‘ ); $( ‘‘, ‘class’ : ‘pub-refresh-button button’, ‘title’ : testResult.refreshText, ‘href’ : testResult.refreshURL, ‘text’ : testResult.refreshText, ‘target’ : ‘_refresh_’ + testResult.serviceName ) .appendTo( testsSelector.children().last() ) .click( publicizeConnRefreshClick ); );

$( document ).ready( function() // If we have the #pub-connection-tests div present, kick off the connection test if ( $( ‘#pub-connection-tests’ ).length ) publicizeConnTestStart(); );

);

#publicize line-height: 1.5; #publicize ul margin: 4px 0 4px 6px; #publicize li margin: 0; #publicize textarea margin: 4px 0 0; width: 100% #publicize ul.not-connected list-style: square; padding-left: 1em; .post-new-php .authorize-link, .post-php .authorize-link line-height: 1.5em; .post-new-php .authorize-message, .post-php .authorize-message margin-bottom: 0; #poststuff #publicize .updated p margin: .5em 0; .wpas-twitter-length-limit color: red;

#adminmenu #menu-posts-timed_content_rule.menu-icon-post div.wp-menu-image:before font-family: ‘ca-aliencyborg-dashicons’ !important; content: ‘\e601’; #dashboard_right_now li.timed_content_rule-count a:before font-family: ‘ca-aliencyborg-dashicons’ !important; content: ‘\e601’; .mce-i-timed_content:before font: 400 24px/1 ‘ca-aliencyborg-dashicons’ !important; padding: 0; vertical-align: top; margin-left: -2px; padding-right: 2px; content: ‘\e601’;

/* < ![CDATA[ */ var timedContentAdminTinyMCEOptions = "version":"2.6","desc":"Add Timed Content shortcodes","image":""; /* ]]> */

/* “,”prev”:”< Prev","image":"Image","of":"of","close":"Close","noiframes":"This feature requires inline frames. You have iframes disabled or your browser does not support them.","loadingAnimation":"http:\/\/contentmarketinginstitute.com\/wp-includes\/js\/thickbox\/loadingAnimation.gif"}; /* ]]> */

#toplevel_page_sabai-directory .wp-menu-image background:transparent url(http://contentmarketinginstitute.com/wp-content/plugins/sabai-directory/assets/images/icon_dark.png) no-repeat center center !important; #toplevel_page_sabai-directory:hover .wp-menu-image, #toplevel_page_sabai-directory.wp-has-current-submenu .wp-menu-image background-image:url(http://contentmarketinginstitute.com/wp-content/plugins/sabai-directory/assets/images/icon.png) !important;

pippity_globals = function(jQuery) window.$j = jQuery; window.PTY_URL = “//contentmarketinginstitute.com/wp-content/plugins/pippity”; window.PTY_DOM = “contentmarketinginstitute.com”; window.PTY_AJAX = “http://contentmarketinginstitute.com/wp-admin/admin-ajax.php”; window.PTY_ADM = “http://contentmarketinginstitute.com/wp-admin/admin.php?page=”; window.PTY_PAGE = “”; window.PTY_ISPOST = false; window.PTY_KEY = “MDgwNTFjZmM0YWFlNTNhODE4NDFiNzQwNzczYTU1MjNhODYyNGU5Y2U5NDljNDNhY2FjNmY4YWQ1MzE0MWJmZjlmOTZhYjM4OWRkMWY3OTY=”; window.PTY_AFFLINK = “”; window.PTY_AFFTEXT = “”; window.PTY_NEWPOPUP = “false”;

(jQuery)

#search_meter_menu line-height: 1.4em; margin: 5px 0 0 0; padding: 0; border-bottom: 1px solid #aaaaaa; #search_meter_menu li border: 1px solid #cccccc; border-bottom: none; line-height: 1.4em; display: inline-block; margin: 0 10px 0 0; padding: 0; list-style-type: none; list-style-image: none; list-style-position: outside; #search_meter_menu li.sm-current border-color: #aaaaaa; #search_meter_menu li.sm-current span background-color: #ffffff; font-weight: bold; padding: 0 5px 1px 5px; #search_meter_menu li a, #search_meter_menu li a:visited padding: 0 5px; text-decoration: none; #search_meter_menu li a:hover background-color: #eaf2fa; div.sm-stats-table float: left; padding-right: 3em; padding-bottom: 1.5em; div.sm-stats-table th, div.sm-stats-table td padding-right: 0.5em; div.sm-stats-table h3 margin-top: 0; margin-bottom: 0.5em; div.sm-stats-table .sm-text text-align: left; div.sm-stats-table .sm-number text-align: right; div.sm-stats-clear clear: both;

/* Dashboard widget overrides */ #dashboard_search_meter h4 line-height: 1.7em; #dashboard_search_meter div.sm-stats-table float: none; padding-bottom: 0; padding-right: 0; #dashboard_search_meter div.sm-stats-table th color: #8F8F8F; #dashboard_search_meter ul.subsubsub float: none;

.spp-indented-option margin-left: 50px; th.spp-wider-column width: 250px; .mce-container .spp-mce-hr border-top: 1px solid #444;margin-top: 5px;margin-bottom: 5px; .spp-color-picker .wp-picker-container position: relative; top: 4px; left: 2px; .spp-color-picker .wp-picker-container a margin: 0; i.mce-i-stp-icon background: transparent url(“http://contentmarketinginstitute.com/wp-content/plugins/smart-podcast-player/assets/images/stp-icon.png” ) 0 0 no-repeat; background-size: 100%; i.mce-i-spp-icon background: transparent url(“http://contentmarketinginstitute.com/wp-content/plugins/smart-podcast-player/assets/images/spp-icon.png” ) 0 0 no-repeat; background-size: 100%;

#menu-posts-cm_examples .wp-menu-image background: url(http://contentmarketinginstitute.com/wp-content/themes/cmi/imgs/cmex16.png) no-repeat 7px 7px !important;

#icon-edit.icon32-posts-cm_examples background: url(http://contentmarketinginstitute.com/wp-content/themes/cmi/imgs/cmex32.png) no-repeat 0px 0px;

#adminmenu #toplevel_page_edit-post_type-acf a[href=”edit.php?post_type=acf&page=acf-upgrade”] display: none; #adminmenu #toplevel_page_edit-post_type-acf .wp-menu-image background-position: 1px -33px; #adminmenu #toplevel_page_edit-post_type-acf:hover .wp-menu-image, #adminmenu #toplevel_page_edit-post_type-acf.wp-menu-open .wp-menu-image background-position: 1px -1px;

/* < ![CDATA[ */ var wpNotesIsJetpackClient = true; var wpNotesIsJetpackClientV2 = true; var wpNotesLinkAccountsURL = 'http://contentmarketinginstitute.com/wp-admin/admin.php?page=jetpack'; /* ]]> */

jQuery(document).ready(function() $form = jQuery(“#post”); if ( $form.length ) $form.attr( “enctype” : “multipart/form-data”, “encoding” : “multipart/form-data” ); );

if ( window.history.replaceState ) window.history.replaceState( null, null, document.getElementById( ‘wp-admin-canonical’ ).href + window.location.hash ); var _wpColorScheme = “icons”:“base”:”#82878c”,”focus”:”#00a0d2″,”current”:”#fff”;

#wpadminbar display:none;

(function($)

// vars acf.post_id = 78063; acf.nonce = “a1839316fd”; acf.admin_url = “http://contentmarketinginstitute.com/wp-admin/”; acf.ajaxurl = “http://contentmarketinginstitute.com/wp-admin/admin-ajax.php”; acf.wp_version = “4.6.9”;

// new vars acf.o = “post_id”:78063,”nonce”:”a1839316fd”,”admin_url”:”http:\/\/contentmarketinginstitute.com\/wp-admin\/”,”ajaxurl”:”http:\/\/contentmarketinginstitute.com\/wp-admin\/admin-ajax.php”,”wp_version”:”4.6.9″; acf.l10n = “core”:“expand_details”:”Expand Details”,”collapse_details”:”Collapse Details”,”validation”:“error”:”Validation Failed. One or more fields below are required.”,”image”:“select”:”Select Image”,”edit”:”Edit Image”,”update”:”Update Image”,”uploadedTo”:”Uploaded to this post”,”file”:“select”:”Select File”,”edit”:”Edit File”,”update”:”Update File”,”uploadedTo”:”Uploaded to this post”,”relationship”:“max”:”Maximum values reached ( max values )”,”google_map”:“locating”:”Locating”,”browser_support”:”Sorry, this browser does not support geolocation”,”date_picker”:“closeText”:”Done”,”currentText”:”Today”,”monthNames”:[“January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”,”September”,”October”,”November”,”December”],”monthNamesShort”:[“Jan”,”Feb”,”Mar”,”Apr”,”May”,”Jun”,”Jul”,”Aug”,”Sep”,”Oct”,”Nov”,”Dec”],”monthStatus”:”Show a different month”,”dayNames”:[“Sunday”,”Monday”,”Tuesday”,”Wednesday”,”Thursday”,”Friday”,”Saturday”],”dayNamesShort”:[“Sun”,”Mon”,”Tue”,”Wed”,”Thu”,”Fri”,”Sat”],”dayNamesMin”:[“S”,”M”,”T”,”W”,”T”,”F”,”S”],”isRTL”:false; acf.fields.wysiwyg.toolbars = “full”:,timed_content,bctt,wp_adv,spp_button_key,stp_button_key,EnlighterInsert,EnlighterEdit”,”theme_advanced_buttons2″:”styleselect,formatselect,underline,alignjustify,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help,code,separator,CustomLoginPage”,”theme_advanced_buttons3″:””,”theme_advanced_buttons4″:””,”basic”:“theme_advanced_buttons1″:”bold,italic,underline,blockquote,strikethrough,bullist,numlist,alignleft,aligncenter,alignright,undo,redo,link,unlink,fullscreen”;

)(jQuery);

document.body.className = document.body.className.replace(‘no-js’,’js’);

(function() \\s+)(no-)?’+cs+'(\\s+());

Skip to main content Skip to toolbar

Dashboard

Dashboard

Home

Updates 28

Search Meter

Jetpack

Jetpack

Jetpack

Settings

Omnisearch

Site Stats

Posts

Posts

All Posts

Add New

Categories

Tags

Primary Categories

Secondary Categories

Tertiary Categories

Timed Content Rules

Timed Content Rules

Timed Content Rules

Add New

CCO Archive

CCO Archive

All CCO Editions

Add New

Categories

CMI HowTo

CMI HowTo

All HowTo Guides

Add New

Categories

Intel Content Posts

Intel Content Posts

All Intel Content Posts

Add New

Intel Content Categories

Intel Content Tags

Media

Media

Library

Add New

Links

Links

All Links

Add New

Link Categories

Topics

Topics

Topics

Add New

Categories

Retired Content

Retired Content

Retired Content

Add New

Categories

Pages

Pages

All Pages

Add New

CM Examples

CM Examples

All CM Examples

Add New CM Examples

Examples Categories

Examples Tags

Comments 12,566

Comments 12,566

All Comments

Disqus

AdRotate

AdRotate

General Info

AdRotate Pro

Manage Adverts

Manage Groups

Manage Schedules

Manage Media

Settings

FAQs

FAQs

FAQs

Add New

FAQ Categories

Reorder FAQs

Directory

Directory

Listings

Add Listing

Reviews

Photos

Leads

Categories

Settings

Feedback

Genesis

Genesis

Theme Settings

Import/Export

Simple Sidebars

Simple Hooks

Simple Edits

Slider Settings

Appearance

Appearance

Themes

Customize

Widgets

Menus

Header

Background

Duplicate Menu

Header

Background

Editor

A5 Custom Login

A5 Custom Login

Custom Login Page

Custom Login Widget

Custom Login Shortcode

Plugins 25

Plugins 25

Installed Plugins

Add New

Editor

Users

Users

All Users

Add New

Your Profile

User Role Editor

Tools

Tools

Available Tools

Import

Export

Custom Status Settings

Cron Events

Redirection

Export Users

Settings

Settings

General

Writing

Reading

Discussion

Media

Permalinks

SI Captcha Anti-Spam

Absorb Act-on Sync

Duplicate Post

Kapost Byline

Listly

Outbrain Options

Primary Feedburner

Q & A

Responsive Lightbox

Search Meter

SocialBox

User Role Editor

Cron Schedules

Sabai

Sharing

Limit Login Attempts

Dropdown Menu

WordPress Popular Posts

WP Users Exporter

Smart Podcast Player

Custom Fields

Custom Fields

Custom Fields

Export

Add-ons

SEO 22 notifications

SEO 22 notifications

Dashboard

Titles & Metas

Social

XML Sitemaps

Advanced

Tools

Search Console

Premium

Benefactors

Benefactors

All Benefactors

Add New

Silos

Insights

Insights

Dashboard

Settings

Reports

Tools

Addons

AddThis

AddThis

Home

Advanced Settings

Follow Buttons

Share Buttons

Related Posts

Better Click To Tweet

Doc Screen Emails

Huge IT Gallery

Huge IT Gallery

Huge IT Gallery

General Options

Lightbox Options

Licensing

Featured Plugins

Pippity

Pippity

Pippity

Create Popup

Analytics

Upload Themes

Support

Written Settings

Allow PHP in posts

Allow PHP in posts

Allow PHP in posts

Plugin Information

Enlighter

Collapse menu

Menu

About WordPress

About WordPress

WordPress.org

Documentation

Support Forums

Feedback

Content Marketing Institute

Visit Site

2926 Plugin Updates, 3 Theme Updates

12,56612,566 comments awaiting moderation

New

Post

Media

Link

Page

FAQ

Timed Content Rule

Benefactor

CCO Edition

Topic

page

HowTo Guides

Intel Content Post

CM Examples

User

View Post

SEO

Keyword Research

AdWords External

Google Trends

SEO Book

SEO Settings

Dashboard

Titles & Metas

Social

XML Sitemaps

Advanced

Tools

Search Console

Premium

Directory Dashboard

#adminbar-search::-webkit-input-placeholder, #adminbar-search:-moz-placeholder, #adminbar-search::-moz-placeholder, #adminbar-search:-ms-input-placeholder text-shadow: none;

Howdy, Lisa Higgs

Lisa Higgs

Edit My Profile

Log Out

Notifications

Log Out

Customizing This Display

Title and Post Editor

Inserting Media

Publish Settings

Discussion Settings

You can also create posts with the Press This bookmarklet.

For more information:

Documentation on Writing and Editing Posts

Support Forums

The title field and the big Post Editing Area are fixed in place, but you can reposition all the other boxes using drag and drop. You can also minimize or expand them by clicking the title bar of each box. Use the Screen Options tab to unhide more boxes (Excerpt, Send Trackbacks, Custom Fields, Discussion, Slug, Author) or to choose a 1- or 2-column layout for this screen.

Title — Enter a title for your post. After you enter a title, you’ll see the permalink below, which you can edit.

Post editor — Enter the text for your post. There are two modes of editing: Visual and Text. Choose the mode by clicking on the appropriate tab.

Visual mode gives you an editor that is similar to a word processor. Click the Toolbar Toggle button to get a second row of controls.

The Text mode allows you to enter HTML along with your post text. Note that

and tags are converted to line breaks when switching to the Text editor to make it less cluttered. When you type, a single line break can be used instead of typing , and two line breaks instead of paragraph tags. The line breaks are converted back to tags automatically.

You can insert media files by clicking the icons above the post editor and following the directions. You can align or edit images using the inline formatting toolbar available in Visual mode.

You can enable distraction-free writing mode using the icon to the right. This feature is not available for old browsers or devices with small screens, and requires that the full-height editor be enabled in Screen Options.

Keyboard users: When you’re working in the visual editor, you can use Alt + F10 to access the toolbar.

You can upload and insert media (images, audio, documents, etc.) by clicking the Add Media button. You can select from the images and files already uploaded to the Media Library, or upload new media to add to your page or post. To create an image gallery, select the images to add and click the “Create a new gallery” button.

You can also embed media from many popular websites including Twitter, YouTube, Flickr and others by pasting the media URL on its own line into the content of your post/page. Please refer to the Codex to learn more about embeds.

Several boxes on this screen contain settings for how your content will be published, including:

Publish — You can set the terms of publishing your post in the Publish box. For Status, Visibility, and Publish (immediately), click on the Edit link to reveal more options. Visibility includes options for password-protecting a post or making it stay at the top of your blog indefinitely (sticky). The Password protected option allows you to set an arbitrary password for each post. The Private option hides the post from everyone except editors and administrators. Publish (immediately) allows you to set a future or past date and time, so you can schedule a post to be published in the future or backdate a post.

Featured Image — This allows you to associate an image with your post without inserting it. This is usually useful only if your theme makes use of the image as a post thumbnail on the home page, a custom header, etc.

Send Trackbacks — Trackbacks are a way to notify legacy blog systems that you’ve linked to them. Enter the URL(s) you want to send trackbacks. If you link to other WordPress sites they’ll be notified automatically using pingbacks, and this field is unnecessary.

Discussion — You can turn comments and pings on or off, and if there are comments on the post, you can see them here and moderate them.

Boxes

ListlyCategoriesTagsPrimary CategorySecondary CategoriesTertiary CategoriesSponsored Post AdsEmail SignupsSidebar SelectionSecondary NavigationFeatured ImageLayout SettingsYoast SEORevisionsExcerptSend TrackbacksCustom FieldsDiscussionSlugAuthorScriptsAddThis Tools

Layout

1 column

2 columns

Additional settings

Enable full-height editor and distraction-free functionality.

Help

Screen Options

Edit Post Add New

Post updated. View post

Connection lost. Saving has been disabled until you’re reconnected. We’re backing up this post in your browser, just in case.

Enter title here

Permalink: http://contentmarketinginstitute.com/2018/03/how-content-readable/ ‎Edit how-content-readable Get Shortlink

  Add Media

Add gallery

Add Contact Form

Visual Text

<img class=”alignright size-medium wp-image-78064″ src=”http://contentmarketinginstitute.com/wp-content/uploads/2018/03/how-content-more-readable-390×215.png” alt=”how-content-more-readable” width=”390″ height=”215″ /></p><br /> <p>Your team has created, socialized, and measured content in just about every possible way … except for one of the most important metrics: how your audience is engaging with the words.</p><br /> <p>You want visitors to find information, stay engaged, or complete a task. But once readers’ eyes hit the words on the page, if it takes too much effort, their interaction falls off and you have churn. You know this anecdotally. Yet most don’t measure it scientifically.</p><br /> <p>Which of the thousands if not millions of words on a website are helping or hurting? What content is too dense or confusing?<br /><br /> <img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-wp-more=”more” data-wp-more-text=”” class=”wp-more-tag mce-wp-more” alt=”” title=”Read more…” data-mce-resize=”false” data-mce-placeholder=”1″ /></p><br /> <p>Content teams work hard to create compelling content, but they have a natural blind spot. They’re too close to their creations – the blogs, thought leadership, and marketing pieces – to see them through the <a href=”http://contentmarketinginstitute.com/2017/11/ways-focus-on-audience/”>audience’s</a> eyes.</p><br /> <div class=”content-box-gray”><strong>HANDPICKED RELATED CONTENT: <a href=”http://contentmarketinginstitute.com/2018/01/reasons-content-sucks/”>27 Reasons Why Your Content Sucks</a></strong></div><br /> <h2>AI tools can benchmark content understanding</h2><br /> <p>Now, with advances in natural language processing and artificial intelligence, a new breed of technology can test content for readability and clarity, which go to the heart of user experience and engagement. It can move organizations from a subjective approach, often fraught with editorial friction, to an objective, metric-based approach.</p><br /> <p>In this article I look at how to test for readability across your organization. For CMOs and chief content officers who want more engaging content, you now have ways to measure and benchmark clarity across the organization. And these tools can also help individual writers and creators produce better quality content.</p><br /> <div class=”content-box-gray”><strong>HANDPICKED RELATED CONTENT: <a href=”http://contentmarketinginstitute.com/2017/11/b2b-content-artificial-intelligence/”>Scale Your B2B Content With Artificial Intelligence: Ideas and Tools Marketers Can Try</a></strong></div><br /> <h3>Let’s define readability and clarity</h3><br /> <p>Content clarity is the user experience of how difficult or easy it is to read text. Why is that important? We know from neuroscience that processing words places a far greater cognitive load on the brain than images. Plus, attention spans are shorter, meaning visitors have lower tolerance for confusion.</p><br /> <p>

Processing words places a far greater cognitive load on the brain than images. @FergalMcGovern @VisibleThread. Click To Tweet

</p><br /> <p>Fortunately, there are several widely used measures. The <a href=”https://readable.io/text/” target=”_blank”>Flesch Reading Ease Index</a>, created by Rudolf Flesch in the 1950s, calculates the average syllable per word and the density of long sentences and assigns a readability score – the higher the number, the easier content is to read.</p><br /> <p>The Flesch-Kincaid measure, derived from the index, scores readability at grade level, approximating the number of years of education required to easily understand content (though with this tool, a lower score means higher readability). The U.S. Navy developed the Flesch-Kincaid measure in the 1970s to ensure that soldiers under stress in the field could easily understand written instructions in their manuals. While today’s audiences most likely aren’t in combat, they do face the stresses of information overload and too little time.</p><br /> <div class=”content-box-gray”><strong>HANDPICKED RELATED CONTENT: <a href=”http://contentmarketinginstitute.com/2016/01/science-method-creating-content/”>The Ultimate Science-Backed Method for Creating Content That Readers Love</a></strong></div><br /> <h3>Your readers are checking out and churning</h3><br /> <p>Research shows that the average U.S. citizen reads at a seventh- to eighth-grade level – and it’s not simply a problem of low academic achievement. Some studies show even highly educated people disengage rather than spend the mental energy to unpack dense, complicated prose. <a href=”https://withoutbullshit.com/blog/new-research-on-business-writing-infographic-and-report” target=”_blank”>Josh Bernoff</a>, author and a contributor to the Harvard Business Review, surveyed 550 businesspeople in 2016. As many as 81% said poorly written content wasted too much of their time.</p><br /> <p>

81% of respondents surveyed said poorly written #content wasted too much of their time via @jbernoff. Click To Tweet

</p><br /> <p>That’s one reason Reader’s Digest and Time magazine are successful. Reader’s Digest has a readability index of about 65 and Time scores about 52. Give people the choice between reading something at that level versus run-on sentences of 40 or 50 words with several competing ideas, it’s clear which they’ll prefer.</p><br /> <h2>What is good readability?</h2><br /> <p>There’s no one size fits all, but the gold standard of readability for business communication is grade eight or lower.</p><br /> <p>You should limit long sentences and passive voice to 5% or less of the total content. Active voice rather than passive makes it clearer who needs to do what. By shortening sentences and using active voice, you can make even technical subject matter more readable and engaging without any “dumbing down.”  The best writing makes complex topics easy to understand.</p><br /> <p>

Limit long sentences and passive voice to 5% or less of total #content, says @FergalMcGovern @VisibleThread. Click To Tweet

</p><br /> <p>The clarity problem isn’t new; but organizations are now producing vast quantities of content for their audiences. And with that proliferation comes a quality control issue. In 2010, President Barack Obama signed the Plain Language Act to make U.S. government-created content less dense and confusing. Federal agencies must now use “plain language” to communicate more clearly with citizens.</p><br /> <p>There’s no equivalent plain-language law in the commercial sector, but, given how fiercely brands compete for audience attention, they should be addressing it voluntarily.</p><br /> <p>One <a href=”http://contentmarketinginstitute.com/2017/08/financial-services-relationships-content/”>financial organization</a> my team worked with set an internal goal that all consumer-facing content must be of a grade eight to 10 readability level – an ambitious goal. Our organization also worked with government agencies that have similar objectives. For example, the Australian federal government aims for a grade five readability level as part of its digital service standard. All companies that create content for customers and other stakeholders should set similar goals for published content.</p><br /> <div class=”content-box-gray”><strong>HANDPICKED RELATED CONTENT: <a href=”http://contentmarketinginstitute.com/2016/09/checklist-valuable-content/”>Must-Have Checklist to Creating Valuable Content</a></strong></div><br /> <h3>Behavior change is hard, but doable</h3><br /> <p>Getting people to change their writing habits is far from trivial. Large organizations that use numerous agencies, <a href=”http://contentmarketinginstitute.com/2017/08/managing-remote-content-team/”>freelancers</a>, and internal contributors face tremendous challenges with consistency and brand coherence. Simply getting people to test their content can be a big challenge.</p><br /> <p>Leadership should adopt a “people, process, tools” approach. The people element must focus on two factors: awareness and education. Many commercial and government organizations send employees to writing-for-the-web-style training courses to raise awareness of readability. These courses not only cover webpages, but also inward-facing content including letters and product brochures.</p><br /> <p>The <a href=”http://contentmarketinginstitute.com/2018/02/brands-marketing-process/”>process</a> element focuses on mapping the current publication process and identifying which steps can be automated. Unfortunately, many organizations rush to roll out tools without an adequate understanding of what the current or future state of their process will look like. This rarely succeeds.</p><br /> <div class=”content-box-gray”><br /> <p><strong>HANDPICKED RELATED CONTENT:</strong></p><br /> <ul><br /> <li><a href=”http://contentmarketinginstitute.com/2016/07/define-workflow-content-production/”>How to Define a Workflow That Keeps Content Production On Track</a></li><br /> <li><a href=”http://contentmarketinginstitute.com/2017/11/building-content-marketing-team/”>Building Your Content Marketing Team? 14 Skills for New, Growing, and Mature Programs</a></li><br /> </ul><br /> </div><br /> <h2>How to execute content evaluation</h2><br /> <p>With the people and process elements sorted, now you’re ready to consider <a href=”http://contentmarketinginstitute.com/2017/07/tools-smart-content-creators/”>tools</a>.</p><br /> <h3>Choose your tools wisely</h3><br /> <p>One of the biggest benefits of tools is that you can measure readability with objective metrics. You move from subjective opinions to quantitative measurement. These measures ease the editorial friction between content creators and editors/publishers. Companies should consider a two-pronged solution:</p><br /> <ul><br /> <li>Lightweight clarity tools in the hands of writers can help them measure, edit, and revise work to an agreed upon readability metric before submitting.</li><br /> <li><a href=”http://contentmarketinginstitute.com/2018/02/content-audit-hours/”>Audit tools</a> for the content team allow it to control, review, and <a href=”http://contentmarketinginstitute.com/2017/10/competitive-content-marketing-analysis/”>score content</a> across the enterprise. These tools allow editors and content leads to benchmark quality over time, track the readability (and engagement) of writers and their published work, and even test and vet new writers for clarity.</li><br /> </ul><br /> <p>While <a href=”http://contentmarketinginstitute.com/2017/02/performance-google-analytics/”>web analytics</a> can show page views, dwell times, and usage paths, they won’t reveal issues with the content itself. Rather than obsessing over poor content performance on the back end, consider an investment in <a href=”http://contentmarketinginstitute.com/2016/07/technology-smarter-content/”>technology</a> that can improve content on the front end, tailoring words to how your audience’s brains want to process them.</p><br /> <p>

Web analytics won't reveal issues with the #content, says @FergalMcGovern @VisibleThread. Click To Tweet

</p><br /> <div class=”content-box-gray”><br /> <p><strong> HANDPICKED RELATED CONTENT:</strong></p><br /> <ul><br /> <li><a href=”http://contentmarketinginstitute.com/2018/01/how-audit-content/”>How to Audit Your Content: 5 Essential Steps</a></li><br /> <li><a href=”http://contentmarketinginstitute.com/2017/03/analytics-reports-content-marketer/”>4 Google Analytics Reports Every Content Marketer Should Use</a></li><br /> </ul><br /> </div><br /> <h3>Selecting readability tools and technology</h3><br /> <p>As you consider which tools to adopt, ask these questions:</p><br /> <ul><br /> <li>Will it support regular business users as well as subject matter experts? Determine who inside your organization will use the technology and whether it supports their needs.</li><br /> <li>Will it force too much friction or behavior change? For example, some solutions expect a business user to switch from Microsoft Word to edit content directly in a <a href=”http://contentmarketinginstitute.com/2017/08/implement-content-marketing-platform/”>content management system</a>; this approach rarely works.</li><br /> <li>Can it measure improvement of content across possibly hundreds of content creators? Many low-end tools are great for single users but have no dashboards for organization-wide metrics. These are critical to <a href=”http://contentmarketinginstitute.com/2016/11/content-marketing-roi-formula/”>show ROI</a>.</li><br /> <li>Is it suitable for work practices in a larger commercial or government organization? Less expensive and free tools are great for copy-and-paste-style text analysis by individuals but don’t natively support MS Word, PDFs, or direct URL analysis. If you <a href=”http://contentmarketinginstitute.com/2018/02/content-strategy-essentials/”>map your process</a>, you’ll quickly see which tools will work and which won’t.</li><br /> <li>How will you know if people are using the solution? The tool should give you usage dashboards across all content contributors.</li><br /> <li>Will it allow you to audit sections of websites for readability or hundreds of documents? A solution that forces the user to analyze individual URLs or individual documents one at a time will not cut it for whole or partial site and <a href=”http://contentmarketinginstitute.com/2015/08/analytics-content-audits/”>content audits</a>.</li><br /> </ul><br /> <p>Companies are spending huge amounts on content management systems and looking for ways to improve the user journey. But to what end if they continue to overlook half the content problem? <a href=”http://contentmarketinginstitute.com/2017/11/content-creation-robots-examples/”>Automation</a> now lets us measure and find the problems in millions of words. Humans can then focus on editing and fixing those words to make them clearer and easier to read and engage with. Shouldn’t we?</p><br /> <div class=”content-box-gray”><strong>HANDPICKED RELATED CONTENT: <a href=”http://contentmarketinginstitute.com/2017/01/investing-content-technology/”>5 Things to Consider Before Investing in Content Technology</a></strong></div><br /> <p><em>A version of this article originally appeared in the February issue of </em><a href=”http://contentmarketinginstitute.com/chief-content-officer/”> <em>Chief Content Officer</em></a><em>. </em><a href=”http://cmi.media/ccosubscription”><em>Sign up</em></a><em> to receive your free subscription to our bimonthly, print magazine.</em></p><br /> <p><em>Get tips and insight on how to create a better content experience for your audience at the upcoming Intelligent Content Conference March 20-22 in Las Vegas. </em><a href=”http://cmi.media/d4x1″><em>Register today</em></a><em> using code BLOG100 to save $100.</em><em> </em></p><br /> <p><em>Cover image by Joseph Kalinowski/Content Marketing Institute</em></p><br />

The post How to Make Your Content More Readable appeared first on Content Marketing Institute.