Building a simple responsive site from scratch

HI from freezing and wet York UK…

Ok so I’m teetering on the edge of building a basic responsive site from code. In the past I’ve bought templates but found them stuffed with code bloat.

I’m not a coder but with the right tutorial i can slowly get the job done.

Is there a good sitepoint tutorial I could follow to create a simple website?

Thanks in advance,
David

Hi there Nightwing,

this should be your starting point…

  1. It is content that dictates markup.
  2. Content plus markup plus device dictates layout.
  3. Until you have meaningful content, you should
    not be applying any markup or style.

…and when ready your starting document would look like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

<script src="some.js"></script>

</body>
</html>

coothead

3 Likes

Bearing in mind what @coothead says, a fun thing to try.
First make your page with content and HTML mark up without any styling.
Then see how responsive the page is before you apply any CSS.
With the possible exception of large images and tables (if any exist), it may be an eye-opener to those who still believe responsive design is a near impossible task for any but the seasoned pro.

6 Likes

There is a secret that few non-professionals are aware of that most professionals consider important.

Start by defining requirements. You do not need to be experienced as a programmer to do that; in fact it would be better to forget everything you know about programming when defining requirements.

Only after you have done that should you begin to figure out how to do it. And the best way to get help is to be specific about what you need help with. When you know what the requirements are you will be better able to be specific.

2 Likes

Agree i’ll put pen to paper first :grinning:

Requirements checklist, anyone know of a good website requirements / checklist document i could work through?

1 Like

I think the idea was to state your own requirements, specific to this project, in order to get specific help relevant to those requirements.

It is the content of the site and its requirements that will define the challenges you face.
For example, does the site require complex, multi-level menus, image galleries/viewers, tabular data, product galleries, illustrated articles, video embeds, etc.
A lot of things can be quite easy to keep responsive, like text based content. Images are not too hard to make responsive, until you get into “fancy” layouts or very specific requirements.
But some things can be more difficult to present on mobile, like deep menus or wide tables.
It’s no good someone spending time offering solutions to things, if they are not a requirement.

2 Likes

During development I have a footer with links to HTML and CSS w3.org free validation tools, also the following free Google Mobile Friendly validation site:

https://search.google.com/test/mobile-friendly

Search the forum for dynamic validation footer that may be included on every page.

Or you can use the Web Developer Toolbar, which provides links to the validators and more, and avoids the need to remember to remove those things from the footer before the site goes live. smile

2 Likes

Thanks Sam,

Yes I see your point but for the amateur which I am, you might struggle when asked, “What’s your website’s requirements?” I remember years ago when working for a conferencing organisation, on our first meeting with the web designer he asked, “What’s your websites requirements” we all shrugged and whilst we had it in our heads we couldn’t articulate it, there must be a shopping list of stock questions a web designer asks to define a sites requirements to a prospective customer.

I found the below link which goes some way to help put together the questions you need to ask:

https://www.usability.gov/how-to-and-tools/methods/requirements.html

Hi there Nightwing,

If you have not completed steps 1 - 3 of post #2
then you don’t have any actual requirements.
What you have is an empty document. :rofl:

coothead

Then it is very important for you to do it. It is not difficult at all; it should not be, by definition of what requirements definition is. It is easy; the hard part is understanding what we are saying.

First, I emphasize that a requirements definition is non-technical. It should be understandable by the (potential) user.

Here is a useful shopping list. When you get responses to your questions it is useful to research the response. Using that I found the following.

Not everything described in those are necessary for simple personal projects. One goal is to focus what you need to do. Another goal is to be able to be specific about what you need help with.

2 Likes

Thank you so much for this reply, what a resource for me to begin following a process as apposed to throwing ideas like cow pats on a wall and watching them slide to the floor in a great big pile of !@i#

A post was split to a new topic: Help customising a theme