Constructing a Responsive Website

Constructing a responsive website

there are many ways in order to make a website responsive. It bottles down to so many factors.

You need to use RWD, which stands for Responsive Web Design.
It means that you can deliver your webpage in a variable size of screen, without having to re-write your html over and over. This is very much a must-do if you had to work with mobile and/or tablet devices.

Use Dynamic Units

One of the most important features of making a webpage responsive is the units you use, so I'll mention that first of all. At the moment, you have 'hard coded' these values by using a (pixel) px unit, which would be seen as a 'static unit'.

Below is a couple of units you may want to consider in the generation of your markup:

The absolute length units are fixed in relation to each other and
anchored to some physical measurement. They are mainly useful when the
output environment is known. The absolute units consist of the
physical units (in, cm, mm, pt, pc) and the px unit ~ w3.org

The above table displays what is known as 'absolute' units, and this is because they do not 'technically' change when you resize your browser or view on a mobile device.

Instead of using such units, you should consider using one of the 'dynamic' units. For example:

• percentage (%)
• viewport-width or viewport-height (vw and vh respectively)

~Image from this article note this is an old article, and support for these has improved a lot since

Using the likes of percentage, for example, means you can set the width and/or height of a div depending on your containing block's size.

For example, resize your screen here:

div {  width: 50%;  background: tomato;  height: 50px;}

<div></div>

How to implement responsive web design and its best practices

Using media queries will adapt a different css for different screen sizes. The way it works is telling the browser: if screenwidth = 700px or smaller/bigger; use mobile css. If screenwidth = 1000px or smaller/bigger; use desktop css. There's no limit to how many media queries you can use.

Using percentages is also a possibility; fluid design. I'd suggest using this together with media queries though.

As for frameworks, there are many out there. Bootstrap is one of the more populair ones. I personally believe working mobile first is the best way to go though. However, there is still heated debate on this subject.

As Pete mentioned in a comment earlier; working with graceful degredation (desktop first) will make the device download as much as the desktop site but not make use of the content downloaded. Wich is a huge drawback for the user. (Bigger pageload times, lots of server requests, more use of MB data etc.) Hence why I think progressive enhancement (mobile first) is the way to go.

Using progressive enhancement, the browser will always download the mobile css first; cutting down pageload times extremely.

For browser support info on responsive design, check this link.

Is there a way to automatically make website responsive?

You can get started with something like bootstrap or skeleton. These are (free :D), light templates and include responsiveness.

Skeleton: http://getskeleton.com/

Bootstrap: http://getbootstrap.com/

You can also use media queries if you want to make your site responsive yourself.

Media queries tutorial: https://css-tricks.com/logic-in-media-queries/

Good luck! :)

How do I build the To add content page of a responsive website

Look, you've come to a programming website, so the most common suggestion you'll get here, and the option I myself recommend is:

MAKE IT YOURSELF!

It really is a fun and very educational experience.

There are many, many ways to do this. In general you'll want to have a front end that communicates with a back end API.

For the front end, there are a lot of options. From templating engines like Jekyll, to MVC frameworks like Laravel, to full fledged high level abstractions like Angular and React, which are admitedly harder to learn but so, so robust, and useful once you've figured them out.

The selection of tools you can use to make the API that supports the website is just as rich. There is ASP.NET for C# (which some people use for the front end as well but I wouldn't), there is Node.JS for JavaScript, with a myriad of libraries and packages to get you started. Flask is a popular option for Python. The list goes on and on.

Oh and dont forget about Ruby on Rails.

As for the interface which your friend will use to add their work, turning all that complicated back end into a simple, easy to use interface is a fundamental part of UX design and, IMHO, quite satisfying once you get it right. Make it sleek and, most of all, intuitive. One shouldn't have to be taught how to use it. It should be apparent from the first time they open the page. You should always ask for their feedback as you are developing it. Some even opt to create mock ups of the interface, in order to get feedback on both its aesthetics and its intuitiveness before a single line of code has been written.

Now, regarding how you'll actually do it, the answer really depends on the tools you opt to use. In general, you'll want to read up on things like the MVC pattern, or React's component architecture. The former is something you'll come across on a wide variety of platforms. The latter is mostly React specific, but in my opinion, understanding how to properly build a website using component architecture means you're in the right mindset, something that will help you no matter how you choose to build it.

All that being said...

Web development is complicated. Creating dynamic websites is a much larger undertaking that designing a static page, or even making an SPA. Though I do wholeheartedly recommend you do it at some point, starting with your friend's website might not be the best idea. Or, you may simply not have the time to sift through all your options, figure out which is best for you, begin the learning process etc.

In that case, there are plenty of publishing frameworks and tool sets to choose from. Wordpress has become very popular in the recent years, and templates and plugins for it are abundant. Alternatives like Medium and Ghost have also gained some traction.

There are plenty of commercial CMS type frameworks. One I have heard good things about is ExpressionEngine. However, I cannot speak for it with certainty.

If you are looking for a website builder, there are also plenty of options out there such as Weebly, Wix, as well as Squarespace. Google sites is a relative newcomer in that department, but seems promising.

So, in summary,

I wholeheartedly recommend building it from scratch. There are many, many languages, frameworks, and tools out there you can choose from, each with its own patterns, best practices and idiosyncrasies. If you lack the time, or simply don't feel like going through that process of building a dynamic website from scratch, you can use one of many tools available. However, that wouldn't be nearly as much fun, and would likely produce an inferior result.

Making a responsive web page

Not sure I have a clue what you're asking, but take a look at this for a more responsive structure:

    <div class="image-one" style="position: relative;display: inline-block;">
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" style=" max-width:100%; ">
        <h2 style="vertical-align:middle;left: 31.5%;top: 50%;position:absolute;color:#ff0000;">Kuta</h2>
    </div>

What is difference between building a responsive website and mobile first web?

In my opinion "mobile first" is more design concern rather than development. To deliver the best UX you should follow mobile first guidelines. If you have layout designed with "mobile first" approach then you can use any framework to acheive responsivness. Framework will make it easier. That's all.
The responsive is simply adaptive layout(media queries) and fluid/liquid layout(percentages grid). It's not complicated. The hard part is the design.

You can read more about "mobile first" design here:
http://www.html5rocks.com/en/mobile/responsivedesign/

**Popular responsive frameworks **

• Twitter Bootstrap
  www.getbootstrap.com

• Foundation
  www.foundation.zurb.com

• Skeleton
  www.getskeleton.com

---

Related Topics