With This Guide Book, you will be able to know how to design and develop a great website stepwise.

1. A Complete
Web Application
S.O.P
A Complete Guide By Amit P Kumar
Founder & CEO - Profshine India

2. What is a S.O.P?
S.O.P stands for Standard Operating Procedure, It’s a step-by-step guide to
complete a particular task or a routine procedure.
S.O.P helps you ensure that you should complete the tasks as per the defined
work scenario by an individual, company or organization. It also helps you to be
precise and upto mark about your work and tasks and It also increases your
productivity level as per the defined time-structure.

3. Introduction
➔ Website Design SOP (V- 1)
➔ Website Development SOP (V-2)
➔ Website Content & Graphics SOP (V-3)
➔ Website Responsiveness SOP (V-4)
➔ Website SEO (On Page) SOP (V-5)
➔ Website Security SOP (v-6)
➔ Website Testing SOP (V-7)

4. Website Design SOP
(Version Code - 1)
Tip
Remember. Website
designing is the
backbone of a website.
Hence it should be
user-friendly and
attractive to the visitors
of a website.

5. Website Design SOP
● Use correct doctype and html syntax.
● Use separate title tag for each individual webpage.
● Use a separate meta tag file (meta.php) for all the meta tags.
● Webpage which require dynamic meta tag should include separate meta
tags in its header.
● Use a separate css.php file to link all the common css files in it.
● Favicon image file should also be included with above common css files.
● Use a separate js.php file to link all the common js files in it.
● Any individual css or js file shouldn’t be included with above common
files. It should be included separately on that particular webpage.
● Use at least one h1 tag on every page.
● Use “alt” attribute in all the images.
● Use tooltip wherever needed.
● Use W3 code validator (https://validator.w3.org/) to validate the code.

6. ● All the css and js files should be included locally (No CDN except
font-awesome or other likewise libraries) and these files should also be in
uncompressed format until the website is under development.
● All the above files will be changed to the CDN or uncompressed before
the project delivery.
● All the main titles of a page should be under heading tag i.e: h1,h2,h3…
● Font family, font color, uppercase, lowercase characters should be used as
per the user experience.
● There should be no broken file link on any page.
● There shouldn’t be any unnecessary css or js file on any page.
● Always use required once or include once to include any php file.
● All common modals should always be included after footer section.
● All the on page js should be after js.php file.

7. ● Ensure legal pages are in place (terms & conditions, privacy & policy).
● Ensure cookies alert is available on every page.
● Ensure Form alert/toasts are working.
● Use ‘font-display’ css property to render the page content faster.

8. Website Development SOP
(Version Code - 2)
Tip
Try to less the code as
much as possible.
And be focused while
designing a database
structure.

9. Website Development SOP
● Ensure all the configure files are on place i.e in the ‘inc’ folder.
● Ensure all the third party plugins are on right place (eg: mailer plugin).
● Ensure all the common table all imported into database.
● Ensure all the database column’s values have been set to null or default.
● Ensure all the general details have been implemented on front pages.
● Ensure all the dynamic meta tags have been implemented on respective
pages.
● Client side form validation and server side form validation.
● Recaptcha on frontend forms (If required).
● Alert/toast on every user action.
● Cross checkout cookies and session validations by deleting history.
● Email integration, Login validation, forgot password in admin panel.
● Add unsubscribe file in case of newsletter subscription.

10. ● Ensure admin profile page is working fine.
● User friendly messages on toast or alert.
● Add a field for “alt” attribute while uploading an image from admin panel.
● Use media folder parallel to inc folder to save all the project files

11. Content & Graphics SOP
(Version Code - 3)
Tip
Content & graphics is
something that makes
first impression in visitors
eyes, so keep it enough
attractive and eye
catchy.

12. Content & Graphics SOP
● Ensure that all the content has been updated on website.
● Ensure that all the grammatical mistakes have been fixed on every page.
● Use proper tags as per the content requirements.
● Make sure that the paragraphs are not too large.
● Use proper capitalization of words, especially in headings.
● Use the targeted SEO keywords in your content.
● Keywords content percentage should be less than 3%.
● Use proper bullet list, table wherever needed.
● Use bold or italic words as per the requirements.
● Ensure there is no lorem ipsum or dummy text on site.
● Check form’s title and input fields placeholder spellings.
● Check all the hyperlinks spellings in header, footer or in page url links.

13. ● Make sure all the images all compressed on the site.
● Ensure that all the images has “alt” attribute in it.
● Use third party videos as much as possible (Youtube or vimeo).
● Don’t use over-sized images.
● Find out broken links and fix them.
● Check contact details and address on header, footer and contact us page.
● Check correct website Google location in Google map.
● Check website emails.

14. Website Responsiveness
SOP
(Version Code - 4)
Tip
Generally, Device screen
size may vary from
300px to 1300px, so
make sure that your web
app is compatible to all
screen size.

15. Responsiveness SOP
● Check the responsiveness on all the screen size device.
● Create a file with name “responsive.css” and put all the common
responsive css here.
● Individual responsive css should be in the header part of the same page.
● Make sure header, header menu, footer, footer menu all are responsive and
working fine on all devices.
● Make sure all the modal are responsive.
● Ensure that all the forms are responsive and It’s placeholder texts are
visible to a normal visibility person.
● Change the title or heading font size as per the device device.
● Make sure all the videos and images all completely responsive and not
shrinked or stretched on different screen sizes.
● Make sure all the css and js files are changed to minimized version.

16. Website SEO (On page) SOP
(Version Code - 5)
Tip
Only a good website is
not a solution, It should
also be a good SEO
optimized site in order to
rank on search engines.

17. On page SEO SOP
● Check complete website responsiveness on all device, especially mobile or
desktop.
● Ensure that all the meta tags are used on every page of site.
● Make sure all the dynamic meta tags are working fine (eg:
Service/product/blog page’s meta tags).
● Check all the broken links and fix them.
● Ensure all the css and js files all minimized
● Ensure that all the js files all included right before closing the body tag.
● Cross check website performance by third party tool or Google webmaster
tool and fix all the issues.
● Make sure that there’s no 404 error on any pages.
● Make sure that all the intra linking are working fine.
● Create sitemap.xml and robots.txt and submit it on the server.

18. ● Make sure all the URLs are SEO friendly.
● Use targeted keywords in Page URLs.
● Use at least one targeted keyword in h1 tag.
● Use meta title maximum 50 characters.
● Use meta description maximum to 160 characters.
● Use meta keywords.
● Include targeted keywords in meta title and descriptions.
● Use LSI (Latent semantic indexing) keywords in your content.
● Website scores more than 75% when checked by Google’s page speed
insights or Google’s webmaster tools?
● Google business listing and Setup google search console (If needed).
● Set up social media pages (If needed).

19. Website Security SOP
(Version Code - 6)
Tip
Only a good website is
not a solution, It should
also be a good SEO
optimized site in order to
rank on search engines.

20. Website Security SOP
● Check all frontend forms and its validations (Both server and clients side).
● Use form recaptcha wherever needed.
● Cross check Mysql injection and validate it for each and every query.
● Ensure that all the Form’s (Especially textarea and password input fields)
data encrypted into a safe format before sending it to SQL query.
● Do complete website penetration testing.
● You can use few open source libraries like OWASP for penetration testing
and Mysql injection.
● Add .htaccess re-direction for error pages.
● Check broken links and fix them with .htacess file.
● Check console part of each web-page and make sure that there is no data
log.

21. Website Testing SOP
(Version Code - 7)
Tip
Start from scratch and
go to the top.
Test every section or
module as a user,
designer, developer and
hacker.

22. Website Testing SOP
● First check if all the modules are completed or not.
● Website design & responsiveness testing.
● Content & Graphics Testing.
● Website development testing.
● Form validation testing.
● User experience testing.
● On page SEO testing.
● Security testing.
● Complete testing on client’s server (if needed).
Note: All the above testing processes have been already explained previously in detail.

23. Free Online tools for Testing
➔ Free formatter website for free website testing tools.
https://www.freeformatter.com/validators.html
➔ Google page speed testing tool:
https://developers.google.com/speed/pagespeed/insights/
➔ W3 website validator : https://validator.w3.org/
➔ W3 link checker to check broken links on a web page:
https://validator.w3.org/checklink
➔ Penetration testing tool website:
https://www.owasp.org/index.php/OWASP_Testing_Project

24. ➔ Image compressor tools.
https://compressor.io/compress
https://tinyjpg.com/
➔ Free SEO Tools Site: https://smallseotools.com/

25. Always remember, Your
comfort zones & excuses are
the biggest enemies of your
dreams.
- Amit P Kumar

26. Amit P Kumar
Founder & CEO at Profshine India
Mail: amitpkumar@profshinetech.com
Favorite Quote:
.When other people are
busy in revolutionizing
the world then There are
two options left, You
could either watch it
happen or be a part of it.