Sunday, February 28, 2016

Web Design and Development Tricks Using PHP in Sri Lanka

The Web Design Process




When a business needs a new website or they want to replace their existing one, they usually pass the project into the hands of a recommended web design and development agency. A sensible move. After all, most companies don’t have the in house expertise to tackle such a complicated project and one where the final result is critical in attracting new leads and generating product sales.
The creation of every website follows a clear web design process. A client who understands the basics of this process will appreciate what happens at each stage, will be clear about when the process can easily change direction and can communicate more knowledgeably with the web agency. Also, the more they know, the more the information provided by the web design team in their updates will make sense and prove more useful.
As such, we’ve created an infographic to display our vision of the web design process. It covers each step from the project brief and understanding the client’s needs to launching the final version and providing maintenance. Read on if you want to understand more about the process, if you want a stress-free relationship with your designers and developers and if you want to achieve a website that matches your needs and expectations.

Why does web development take so long?

A new website won’t happen overnight. When a web development company estimates the timeline to create a new website, some clients may be incredulous.
“I just want a few pretty looking pages with nice photos, and some internal clicks here and there. Oh and a ‘Sign Up for our Newsletter’ button, and the ‘Contact Us form’. But they’re easy to do, aren’t they? Surely that won’t take more than a week. Oh – did I mention the custom shopping cart and online payment system I need?”
If you’re hoping to get a new all-singing, all-dancing website, here’s why it may easily take 3 months before your customers will get to see it:

Step 1: Brief

brief-1brief-2brief-3brief-4brief-5brief-6brief-7brief-8
From the web design agency’s point of view, the brief is typically their first contact with the project or even with the client itself. It is also usually the most important step for both parties since everything discussed here will influence the end result. This is why the client must make sure to provide the clearest and most detailed brief possible.
The purpose of the brief is to convey an accurate project definition to the web agency. The client needs to explain their business, their target audience and the goals of the website – is it to wow a young visitor with exciting imagery and modern videos? Or is its function to allow no-nonsense online shopping for an average parent?
With the help of the agency, they need to define technical specifications – should the website be optimized for a certain resolution or browser? What kind of mobile version do they need? Would responsive design suffice?
Also during the brief, the client can present the content and resources that will be available to the agency during the rest of the process. Resources can include fonts, images, while content can include anything from product descriptions to articles, videos and so on.
Based on all this information, the web company can come to a conclusion regarding the project timeline, including any milestones and deadlines, and the estimated budget required to implement all the client’s needs.
We emphasize again that this is a critical step as it forms the foundation on which all the subsequent design and development work is based on. A poor or incomplete brief can lead to an unsatisfactory result, which will in turn lead to further web design costs and delays.

Step 2: Planning

planning-1planning-2planning-3planning-4planning-5planning-6
Armed with the information in the brief, the web development company can move on to the planning phase of the project.
During this step, through research and brainstorming sessions, the team will outline the first ideas and concepts for the website that would fit the client’s specifications.
An important part of this is usually the information architecture, which basically defines how the content will be structured throughout the website and how a visitor will access it. This also depends a lot on the brief data – does the client favor the infinite scroll (think Pinterest) or a web design with minimal content below the fold? The agency needs to find the way to smoothly move the visitor through the website to take the desired action – the so-called funnel approach.
Once a hierarchy of page organization is created, the layout of content on each page must be given consideration. Together with mapping out the location and operation of any functionalities – such as the online booking form and the online payment system – will ensure a proper usability for the site’s users.
The web development company must take responsibility for clearly explaining the logic behind the proposed navigation and layout to the client. On the other hand, the client must take responsibility for reviewing the proposed concepts carefully. If communications are weak at this point, the whole web development process will set off down the wrong path. If alterations are required, they can be easily made at this stage, but if they are required further down the line, far more time will be required and costs will increase.
With everything completed in this step, the first wireframes and mock-ups can be created which will further aid the design and development process.

Step 3: Design

design-1design-2design-3design-4design-5design-6design-7design-8design-9
This is the step where the website starts to take shape. The web designer will now have all the data needed to start working on the actual look of this project.
Among the first design tasks is choosing a proper color scheme. The color palette is all important because it sends an immediate message to the website visitor – vivid multicolored designs work well for kids’ organizations but financial institutions should opt for more subtle colors if they wish to instill trust in their audience.
The combination of logo and color scheme forms the basis of the company’s visual identity and influence how the visitors perceive the brand. Also, whether images appear in headers, sliders or as backgrounds, the best web designs use carefully chosen artwork imagery to help reinforce the company’s main messages.
Visual elements such as buttons, information boxes and menu boxes need to be designed to complement the tone of voice of the website – from formal, sharp edged boxes with traditional fonts best suited to the mature audience, to urban-style distressed boxes containing funky fonts to appeal to teens.
An increasing popular feature in web designs is the presence of videos and other rich media – the simplest way for a visitor to learn more about the company or its products and services without having to read reams of text. Rich media can also refer to animations, dynamic color-swatches, 3D spin models for products and many other visuals.
Throughout this process, the designer must ensure that the layout offers the best user experience so that the pages are not only easy on the eye but allow the visitor to quickly find what they need. This also extends to cross-device compatibility such as their template proposals can be adapted to suit a variety of devices from smart phones to desk tops.
Finally, a variety of prototype template variations fulfilling the criteria above must be prepared and analyzed together with the client to define the best option to move forward with.

Step 4: Development

development-1development-2development-3development-4development-5development-6development-7development-8
This is where we go behind the scenes to provide the actual website “feel”. The web development company now has to develop a website to meet all the requirements identified in the planning phase.
One of the main concerns of the development team is to ensure the website will be built to comply with all relevant accessibility and web standards such as the standards for HTML, CSS, XML and XSL. In Ontario it is also essential that all websites comply with AODA (Accessibility for Ontarians with Disabilities Act) which allows a website to be accessible by everyone.
The basis for developing the website is choosing the right framework. Frameworks are similar to pre-built templates that are used to create customized websites by writing additional code to get the final look and functionality. They are available in a variety of computer languages including PHP and JavaScript.
The alternative is to use a Content Management System (CMS) which is best when little customization is required. A CMS is a more advanced type of framework that offers a user interface. Examples include WordPress, which great for presentation websites, and PrestaShop or Magento for e-commerce businesses.
Whichever the choice, the developer will then focus on configuring the database. This forms the backbone of the website and it is built in line with the content and structure requirements.
The next step is to ensure the website functions properly – making sure all the buttons, sliders, filters, shopping carts etc. work and enable the visitor to move between pages and make online purchases. Following that, the client’s content will then be integrated into the website. This covers services information, category and product titles, descriptions and features, articles, videos and other types of content.
The development team will also constantly keep in mind the site’s performance. Depending on the number of features and their complexity, they can sometimes lead to a negative impact on speed and performance, and thus on potential leads or sales, which has to be mitigated.
Another important factor the development process is security. The website’s private data such as passwords, user information and private content must be made secure. This is done by ensuring the underlying code doesn’t allow any vulnerabilities or weaknesses such as XSS.
One of the final tasks for the developers is to add certain markup to the website’s pages. This usually doesn’t affect the user directly, but it is important for search engine optimization (SEO), such as using schema.org structured data, or for Social Media purposes, such as Facebook link share description and image tags.

Step 5: Launch

launch-1launch-2launch-3launch-4launch-5launch-6
The website has entered its final stages of testing, which basically means it’s almost ready to go live. Final tests usually focus on functionality, performance and security, as the web company gets ready to deliver the final product.
Once this has been done, the agency will transfer the project on to the client’s live server, where the website will be accessed by using the client’s domain name.
The launch phase is also where the client has a very important job – to help the web design company in the quality assurance testing of the website and to see what kind of user experience it offers. Often clients ask their staff to use the website and see if they find missing or incorrect content, broken links (links which head nowhere) and to check that online forms end up in the right email inbox.
Once the website is live, the client will usually provide the necessary code snippets used to integrate their web analytics services, such as Google Analytics or Webmaster Tools. In most cases this can be only done on the live server in order to associate the services with the domain and make the necessary check-ups.
With everything up and running, the web design company will provide the client with all the deliverables agreed at the beginning of the project. This usually refers to source code files for the website, the logo and other materials used in the planning, design and development stages.
Depending on the complexity of the project, the client will also receive training and documentation for properly using certain features of the site, such as an admin panel, customer management, and so forth.

Step 6: Maintenance

maintenance-1maintenance-2maintenance-3maintenance-4maintenance-5
The last step of the web design process is not one familiar to everyone. Unfortunately, a lot of clients believe that launching the website should end the collaboration with their web agency. The truth is, if you are truly invested in your online presence, then the web design process is never over.
So what happens in the maintenance phase? First and foremost, the web agency will provide support and troubleshoot any issue that you or any of your users encounter during their visits in order to maintain a happy audience.
The technical support also extends to periodic performance and security tests, updates or add-on installations, in the case of CMSes.
Second, while the website is indeed live and perhaps it even exceeded all your expectations, that doesn’t mean there’s no more room for optimizations. This is even more true as time passes and new trends emerge. The agency will usually use A/B testing to determine what changes best influence metrics such as click-through rates and conversions in order to maximize your website’s value.
And who can implement the resulting modifications or any other updates, whether they are related to design, functionality or just content, other than the team that put your site together in the first place? Using a different agency to modify your website most frequently results in higher costs and longer implementation times, even for very small changes.

Conclusion

After reading this article, if any client remains incredulous as to why web design and development is no overnight job, we will eat our hats!
It is clear that the numerous steps in the web design process all take time when done properly, though strong client-agency communication often helps to reduce it.
Hopefully this short overview will enable you to better understand the process. And armed with this information, not only will they understand the web design process, but they will be better equipped to communicate with and to assist the design and development team to create a website that both parties are truly proud of.






Infographic is a great way to turn the most boring data into the most comforting graphic, which is much easier for reader to digest. As web designers have to deal with pixels and code almost everyday, it would be overwhelming to look at more data and references which are filled with hypnotic words and numbers.

We understand how your eyes feel when they are suffering from sleep induction, and this leads us to compile 43 informative infographics that are relevant to web designers. While some of them are data like current state of the internet or social media, others contain useful knowledge which can also be used as a great reference sheet. So come take a glimpse, enjoy them and grab them! Digesting data and knowledge has never been so fun with infographics!


As the scientific community recognizes four new elements on the scientific periodic table, it seemed fitting for revenue-focused B2B marketers to join the club with our own chart. The Periodic Table of Marketing Attribution displays the key components necessary for a fully functional, data-driven attribution strategy.



While chemists in the scientific community anxiously await the final completion of the seventh row on the periodic chart, data scientists and revenue-focused marketers can show off their exclusive periodic table of 63 elements — signed, sealed, and delivered to you personally by your resident attribution experts.
The following infographic takes each section of elements and explains how they  apply to the process of B2B marketing attribution tactics.
image: http://cdn.business2community.com/wp-content/uploads/2016/01/Periodic-Table-Attribution-Infographic-545.png.png
Periodic-Table-Attribution-Infographic-545.png
(click to view larger)

SECTION #1: ATTRIBUTION MODELING

Attribution is the process of attributing revenue to specific marketing activities that contributed to the conversion of those customers. It can track keywords, campaigns, content, display ads, events (and more) and follow a customer through their interactions with all of those marketing touches. After they become a customer, an attribution model will assign revenue credit to those touches in a specific manner, depending on the model.
Single-touch models only assign credit to one source. Multi-touch models assign revenue credit to multiple touchpoints along the marketing funnel. And, full-path B2B marketing attribution models assign credit to all influential touchpoints from the beginning to the end of a customer’s journey.

SECTION #2: MARKETING CHANNELS

The marketing channels included in the periodic table are those that can specifically be tracked through a B2B marketing attribution program —
  • Website
  • Direct traffic
  • Blog
  • Offer download
  • Syndication
  • Social Media
  • Twitter
  • Linkedin
  • Facebook
  • Organic Search
  • AdWords
  • Google display network
  • Bing Ads
  • Retargeting
  • Email
  • Newsletter
  • Outbound calling
  • Live chat
  • Partners
  • Referral traffic
All of these sources of leads, opportunities, and customers can be specifically tracked directly to revenue in order to see which channels (or which activities within the channels) are generating the most revenue. B2B marketing attribution strategy is gearing up to be one of the most influential components of a martech stack — because it measures the effectiveness of the entire strategy on a granular level.

SECTION #3: MARKETING ACTIVITIES

The activity elements listed in this portion of the periodic table refer to marketing initiatives that can directly create touchpoints within an attribution program. Each one can serve as a conversion point within the marketing and sales funnel, and each one can be assigned revenue credit in order to gauge how well the respective initiative contributes to the bottom line. From email nurturing and online content, to events and webinars, B2B marketing attribution measures all types of marketing activities, whether they’re online or offline.
Recommended for YouWebcast: Agile Marketing: Pour Gas on Your Growth Fire

SECTION #4: CHANNEL MAPPING

How does an attribution program actually map each touchpoint to its respective channel? How does a conversion point get assigned revenue credit? These elements display the different components used to map touchpoints to their channels and organize them in a way that can be easily sorted through and reported on by a B2B marketer.
The most common ways this is done is through API integrations, cookies, and UTM parameters, which collectively work together to gather tracking data and push that information into the CRM. After that occurs, an attribution program will take it the rest of the way and sort, organize, and process that data into neat dashboards and spiffy reports that allow marketers to easily understand the effectiveness of their marketing.

SECTION #5: ATTRIBUTION METRICS

These elements are a short list of the types of advanced and specialized attribution metrics that a B2B attribution software program can generate. These types of metrics aren’t available through any other type of martech program, because they rely on highly granular and incredibly accurate data. Metrics such as leads by websource, opportunities by channel, and revenue by keyword will help marketers know which channels are making them the most money and how to optimize in order to generate a greater level of ROI.

Read more at http://www.business2community.com/infographics/periodic-table-elements-b2b-marketing-attribution-infographic-01420296#uc6p4q8WqrjQ5rei.99


MSc BIT BSc HND Edxcel PHP Web Application Projects Assignments Guidance.
London A/L O/L ICT Class
Individual / Group / Online classes in English / Sinhala / Tamil. Sample PHP Projects/Assignments Exam Papers, Tutorials, Notes and Answers will be provided. Call +94 777 33 7279 | eMail itclasssl@gmail.com | Skype ITClassSL