Static and Dynamic Websites

Static websites can only really be updated by someone with a knowledge of website development.There are many static websites on the Internet, you won’t be able to tell immediately if it is static, but the chances are, if the site looks basic and is for a smaller company, and simply delivers information without any bells and whistles, it could be a static website.Static websites are the cheapest to develop and host, and many smaller companies still use these to get a web presence.

A static website consists of a series of HTML files, each one representing a physical page of a website. So on static sites, each page is a separate HTML file. When you visit the homepage, you are viewing the actual homepage file. Even if two pages contain a chunk of identical content (like a footer), they both contain two versions. So, if you want to update the footer, you must do so twice, once on each page. This is fairly straightforward and it’s how all websites were built during the early years of the world wide web. With a static website, you simply have the raw HTML that creates your page in a file. A visitor’s web-browser will just directly request that page, and all the server has to do is hand it off as is.

Advantages of static websites
• Quick to develop
• Cheap to develop
• Cheap to host
Disadvantages of static websites
• Requires web development expertise to update site
• Site not as useful for the user
• Content can get stagnant

Dynamic vs Static website
Depending on your needs, either a dynamic website or a static website could do just fine. The best of both worlds would be accomplished by using a cache or caching plugin for your dynamic site, so that frequently accessed dynamic pages can be automatically turned into static pages.
A great example of this flexibility would be using a WordPress cache plugin. These can easily turn your WordPress dynamic website, into a site that still handles dynamic requests, but at the same time saves on resources by still serving up static pages when dynamic ones aren’t needed.
Static websites are popular because they are super efficient, extremely fast and usually free to host. Blogs, resumes, marketing websites, landing pages, and documentation are all good candidates for static websites.

Many sites from the last decade are static, but more and more people are realising the advantages of having a dynamic website. Dynamic websites can make the most of your site and either use it as a tool or create a professional, interesting experience for your visitors. Websites come in a variety of different shapes and sizes but one way they can be divided is between static sites and dynamic sites. The difference is not obvious when you’re just looking at a website in your browser, but it can make a big difference in the function of your website.

Dynamic websites on the other hand can be more expensive to develop initially, but the advantages are numerous. At a basic level, a dynamic website can give the website owner the ability to simply update and add new content to the site. For example, news and events could be posted to the site through a simple browser interface. Dynamic features of a site are only limited by imagination. Some examples of dynamic website features could be: content management system, e-commerce system, bulletin / discussion boards, intranet or extranet facilities, ability for clients or users to upload documents, ability for administrators or users to create content or add information to a site (dynamic publishing).

A dynamic website uses server technologies (such as PHP) to dynamically build a webpage right when a user visits the page. Basically, what happens is the user goes to a certain web address and the server finds a bunch of different pieces of information that it writes into a single cohesive web page, which is what you see. This way of building web pages “on the fly” has several advantages.

Since each part of a web page is separate, it is much simpler to update something across many pages, all at once. For example, if you have a change to your website’s navigation you only have to change it in one place (the file that holds navigation information) and it is updated on all pages that contain that file. If you had a static website, you would have to edit every single page in order to make a change to the site’s navigation. This is tedious, repetitive, and prone to errors.

Are there any disadvantages to a dynamic site?
It really depends on what the purpose of the site you’re building is. Dynamic sites may take longer to initially code and develop than static sites.
However, in most cases any up-front savings you may achieve from a static website will be wiped out multiple times over by the additional time you’ll need for future updates and revisions.
So if the site is simply for a limited-time promotion, only has a page or two, and is going to be taken down when the promo ends, it’s possible that a static site might be the better option. However in the vast majority of website projects, dynamic sites pay off in the end.
If you are trying to speed up your website, it’s important to first know the difference between a dynamic website, and a static website. These are the two types of websites that currently exist on the Internet.
A quick break down would be that dynamic websites require more server resources, but provide more flexibility when it comes to updating them. While static websites are fast in nature, because they don’t ask the server to do extra work, other than just handing off already completed files to the visitor.
Each one has its own advantages and disadvantages, and in this guide I’ll discuss why you might want to use one over the other in your specific case.

Advantages of dynamic websites
• Much more functional website
• Much easier to update
• New content brings people back to the site and helps in the search engines
• Can work as a system to allow staff or users to collaborate
Disadvantages of dynamic websites
• Slower / more expensive to develop
• Hosting costs a little more

Landing Pages and why we use them

In the purest sense, a landing page is any web page that a visitor can arrive at or “land” on. Landing page is a standalone web page distinct from your main website that has been designed for a single focused objective.

Landing pages help increase your conversion rates. The main reason for this is that targeted promotion or product specific. Landing pages are focused on a single objective that matches the intent of the ad that your visitors clicked on to reach your page. You should try to use a landing page for every inbound advertising campaign you operate. The goal of landing pages is to convince the visitor to provide you with his or her information in exchange for a high-value offer. They are the best way to convert a person into a lead. Most small and medium-sized businesses have very few–if any–landing pages on their sites. You will now have the opportunity to email them and nurture them down your sales funnel by continuing to market to them via email, phone calls, or social media to influence them to buy from you. The more landing pages you have, the more opportunities to generate leads and fill your funnel.

The design of your landing page is extremely important and affects the conversion rate of your forms. The look, headline, and text must all be relevant to the offer to obtain a high conversion rate. All of your content on the landing page should be contained above the fold. This means that the visitor should not be required to scroll down to see any of the page content. Effective landing pages will also contain an image that is relevant to the call-to-action button that drove the visitor to the landing page. The text should be very direct and easy to read. A landing page is typically linked to an offer. A landing page needs a form to capture contact data for a website visitor. In most cases, you do not want to include your main navigation bar at the top of the landing page so the visitor’s only option is to complete the form. Not including the navigation bar has been shown to increase conversion rates by as much as 100%. Landing pages let you narrow your focus and remove the clutter from your pages that could distract your visitor from taking the action you want them to take. It allows you greater control to direct them and help them find what they’re looking for much faster. See above the anatomy of a landing page.

If you consider the example of sending traffic to your homepage vs. a standalone landing page, you can understand that your homepage is designed with a more general purpose in mind. It speaks more to your overall brand and corporate values and is typically loaded with links and navigation to other areas of your site. It’s important that the design of your landing page matches the branding and design standards of your website. This is more critical with a click through landing page, as the visitor will transition from one to the other right away – and you need to maintain the consistency. Every link on your page that doesn’t represent your conversion goal is a distraction that will dilute your message and reduce your conversion rate. A fundamental aspect of conversion centered design is message match, which is the ability of your landing page to accurately reflect the messaging presented on the upstream ad. On the left a good sample of a landing page.

Most visitors are very impatient and will leave your site without a few seconds of arrival if you don’t reinforce their mission with a matching headline and purpose (quickly and clearly).

SIX LANDING PAGES THEMES:

 

Adobe Muse

Adobe makes programs like InDesign, Illustrator, and Photoshop, which enable every graphic designer on the planet to create nearly every piece of visual content you’ve ever laid your eyes on. Naturally, their bread and butter is making graphic designers happy. So their newest product, Muse, hopes to make life even easier for designers—specifically ones working in more traditional mediums who are being tapped to take on more web-based projects—as an ultra-simplified, graphically focused tool for making websites.

Anyone familiar with Adobe products like Photoshop will instantly recognize Muse — it shares a similar interface. Looks like Muse was designed to be Photoshop for building websites. So if you’re familiar with Adobe products like Photoshop, Muse might be a good option for you.

Muse’s biggest selling point is that designers don’t have to learn code (or “markup languages”) like HTML, CSS, or Javascript to break through the barrier of designing for the Internet. This is a way for designers to create a website. Because this website builder was developed with the needs of professional designers in mind, it may seem fairly complicated for non-designers. It does require prior experience of graphic design. All in all, Muse looks, performs and feels just like any other Adobe product. So, if you happened to work in InDesign, Illustrator or Photoshop, the interface won’t scare you away, it shares similar interface. Adobe Muse employs the drag-and-drop editing principle which also simplifies the creation process. Using an interface that’s much like Abobe’s InDesign, designers can quickly and easily create websites as a series of dynamic documents which generate the necessary HTML code for them to be published online. Elements like navigation bars and pull-down menus—typically complicated Javascript features—are included as a series of widgets that can be dragged and dropped onto the page. As a technological achievement, it’s incredibly impressive. The complete tutorial and built the tutorial website last about three hours.

It’s easy to see that Muse will allow designers who are skilled at creating beautiful print layouts to easily turn their work into a simple, fully functioning website. Muse provide a shortcut for those designers creating webpages, specially for some design firms, where learning code isn’t a bonus, it’s a requirement. There are no pre-made themes in Muse. Instead you design your website from scratch. Luckily Muse has built in some solid support for design. For example you can make lots of customizations to blocks: set opacity, blur, border radius, border sizes, add drop-shadows, scroll effects and more etc. Muse also has excellent font support. So, Muse allows designers to build a template that can be easily edited for each website page

Adobe Muse CC is a tool for designing websites without writing a line of code. In fact, unlike other tools, it doesn’t even let you code. You get 20GB of cloud storage when you’re a member of Creative Cloud, enabling you to access your website files when you’re away from your computer. You can share design mockups and live site demos with clients and colleagues. You can even let the website owners make changes to content on live sites through a browser (with the ability to retain control and accept or reject those changes).
Within the template-driven software, you can drag and drop to add custom navigation, slide shows, contact forms, scrolling effects and more to your websites. All the interactive widgets are touch-enabled, so you don’t need to do anything extra to make them fit for taping on touchscreen devices.
Overall, the resources for Muse are great and appear to only be getting larger. They range from free to paid, to sharing with other users, to add-on widgets and enhanced functionality, to templates that cater to almost any general type of site you may be designing.

 

 

 

WYSIWYG Website Editors

In computing, a WYSIWYG editor is a system in which content (text and graphics) onscreen during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product, which might be a printed document, web page, or slide presentation.
The somehow cryptic abbreviation WYSIWYG stands for “What You See Is What You Get”. In such editors you edit not directly the source code of your documents, but its presentation as it (hopefully) will appear in the final document. So instead of writing blocks of code manually (as you e.g. would do it in Word or Latex), you manipulate with design components using an editor window. This means that you view something very similar to the end result while the document or image is being created.You can make a strong argument for hand-coding HTML, but the appeal of a What You See Is What You Get editor for beginners is undeniable.  When it comes to coding editors, it’s hard to a get a clear overview of all the benefits and functionalities different editors have to offer. However, in the end everybody needs one, so it’s important to know which editor is best tailored to your personal needs. It would be wrong to recommend you some “best” editors, because the choice always depends on your requirements, primary goals, skills and experience. Many of these editors combine the best of both worlds, allowing you to hand edit your code if you wish and work with the WYSIWYG editor when it’s more convenient.

Dreamweaver is a titan in the WYSIWYG world. Now part of the Adobe portfolio but originally launched by Macromedia, Dreamweaver has offered WYSIWYG editing since 1997 when the web was a maze of tiled backgrounds, electric blue links and blinking GIFs. Dreamweaver offers hybrid editing, you can work completely in WYSIWYG mode without ever seeing a bit of code, you can work directly in the code only switching over to preview your work, or you can work in a dual-pane environment to take advantage of WYSIWYG and hand-coding simultaneously. Dreamweaver is extensible with dozens of free and commercial plugs-ins available for everything from web effects and widgets to shopping carts and image galleries. This tool is one of the commonly used editors which can support developers, improve the workflow and save you a lot of time during coding. While previous versions of Dreamweaver sometimes produced rather quirky source code, the last version is able to generate (mostly) quite clean markup. Dreamweaver also offers numerous helpful tools such as the library of code snippets, ftp management, server debug and an integrated coding development. E.g. you can view CSS information in a single, unified CSS panel that makes it easy to see the styles applied to a specific element, identify where attributes are defined, and edit existing styles without entering Code view

Aloha Editor is most advanced browser HTML5 based WYSIWYG editor giving its users a distinctive and new experience. Aloha Editor is designed to make editing process faster. It makes the work 25% faster by reducing the few time consuming steps such as typing and formatting. Aloha Editor is ready to use when website is loaded, even if users need 20 or 100 inputs areas Aloha Editor only loaded once. Aloha Editor doesn’t need iframes thus the result in saving up 80 percent of loading time compare to other editors. Aloha Editor allows users to edit content such as accordions, sliders, tickers, captions or descriptions of images in slideshows. Aloha Editor is the world’s first full featured editor that allows users to edit the dynamic content live and in place.

iWeb Editors is an editor for non-professionals, newbies and small companies. The “It just works!” design philosophy that permeates Apple offerings is strong with iWeb—the WYSIWYG HTML editor bundled with iLife—and interacting with it is so drag-and-drop and user friendly that even your friends least likely to learn HTML could whip together a functioning web site. Apple provides a number of polished templates and dozens of web site widgets that are all a mouse click away. iWeb’s built-in site manager makes it easy to publish to multiple sites or just keep a close eye on your ever-expanding digital manifesto. iWeb is small, compact and simple. You can switch the theme of any page with the click of your mouse. Mix themes in a site if you wish. You can place Google Maps and Google AdSense ads on your web pages and simplify navigation by dragging your photo albums to a sleek, animated index page. Web widgets, live content from other sites, like video, stock tickers, and headline news can also be added with few clicks.

Expression Web is Microsoft’s current offering in the WYSIWYG arena (the popular but much maligned FrontPage was retired in 2003). For those of you who associate Microsoft with poor web standards compliance, take comfort knowing that Expression Web has a totally separate engine from Internet Explorer and is compliant with a wide range of current web standards. It shares a lot of features with the other WYSIWYG editors featured here, like highlighting code errors and non-compliant code, a built-in CSS editor, and more, it also stands out for features like search engine optimization—offering you tips and ideas to optimize your sites for better crawling and search engine ranking.

Flux is a Mac-based WYSIWYG editor that has received high praise for being a powerful editor with a reasonable price tag. Flux’s interface offers a fine degree of control over editing everything from the margins and padding to over all size of your elements including altering CSS code with simple mouse movements. Flux offers dual-pane editing so you can switch between hand-editing and drag-and-drop editing instantly or just watch the HTML code unfold as you WYSIWYG edit to study what’s going on under the hood. Like Dreamweaver, Flux supports third-party plug-ins which are available for download through the Flux application.

BlueGriffon is a WYSIWYG web editor created by the author of the Nvu (deprecated) web editor software (as well as the bulk of its derivative, KompoZer 0.7.10). Since it uses the modern Firefox web rendering engine, it should be able to handle modern HTML and CSS code correctly unlike the older Nvu and KompoZer 0.7.10 software, allowing you to use such code and see the results displayed accurately in the editor. Besides support for HTML 4, HTML 5, XHTML 1, CSS 3, it also supports SVG, and MathML. The editor has a plug-in architecture so you may also be able to find add-ins that extend the functionality of the program. Languages supported include English, German, French, Czech, Dutch, Finnish, Hebrew, Italian, Japanese, Korean, both Simplified and Traditional Chinese, Spanish, Slovenian, Polish and Swedish (and possibly others). The program runs on Windows, Mac OS X, and Linux. It is open source. You can find a free online BlueGriffon Tutorial on thesitewizard.com. BlueGriffon is an intuitive application that provides Web authors (beginners or more advanced) with a simple User Interface allowing to create attractive Web sites without requiring extensive technical knowledge about Web Standards.

 

Website Design: The Use of Placeholder Images & Text in Wireframes.

The layout of your website can be a deciding factor on whether your visitors will stay on your website or leave with an impatient click. You could think of the layout as a map. If it’s easy for the visitors to “read” the map, they are more likely to stick around and find the content you’re providing. A web designer’s job is to create a layout that keeps the visitor focused on the content while keeping it nice and easy to navigate around the site.

Wireframing is an important part of the design process for both simple and complex projects. If you’re creating a website for a client, a wireframe is a great tool for communicating your ideas visually at an early stage rather than just having a verbal description. If you’re creating a website for yourself, the wireframe helps to clarify what is required on each page of your website. It can be considered an overlap between the planning process and the design process. Creating a simple wireframe ensures that your page designs take into account all of the elements you’ll add to your pages and where they will be positioned. Wireframes are cost-effective because the time spent in the initial stages potentially saves you from losing much more time revising the design at a later stage.

Wireframes can be created in several ways, including pen and paper and computer-based tools. When it comes to computer-based applications for wireframing, there are many options available. Some designers use Photoshop, Illustrator, or even InDesign to put together their wireframes.

You can create a wireframe mockup of the site that outlines the positioning and functionality of page elements devoid of the final site’s graphics and text formatting. When designing websites, you may not have the images you need at first. But you already know the sizes and inserting some placeholders can help you better seeing the layout. By using placeholder text and placeholder image, the designer can get an idea of how to layout a page and get a good idea on how it may appear when real text and image is placed into the placeholders. Placeholder text is a descriptive text displayed inside an input field until the field is filled. As you build out a wireframe site, you can use the Text tool to create text frames and add placeholder (or lorem ipsum) text that you’ll replace later. Or if your client has an existing website, you can copy the text directly from a browser and paste it into the text frames. After creating text elements, you can use the Text panel to apply formatting to the text. The goal of a wireframe is to replicate the bare bones of each page, creating a simulation of the web presentation without the distraction of colors or visual content. Rectangles are used as placeholders to mark the location of images and handwritten or generic fonts are used to display the areas of the page that contain text content. The wireframes show the page layouts for the site and allow you to click through the links to see how the site flows.

After interacting with the wireframes, visit the final live site to compare the wireframes to the completed version. Notice how the placeholder elements in the wireframes were replaced with the graphics for the final version of the site.