Responsive Try for mobile devices

4 years 11 months ago - 4 years 11 months ago #131024 by ElMichaJ
Hey guys

i currently work on a responsive Design for the website, so that all devices can access without much traffic.

www.sensiblesoccer.de/community/externals/leagues
www.sensiblesoccer.de/community/externals/tournaments/4101

are examples

i also work on it, that external website can include our data content like tables, results, crosstables alone or alltogether.

i you have some wishes, then tell me

Hey Hey Hey .... El Micha J !!!

Please Log in or Create an account to join the conversation.

4 years 11 months ago - 4 years 11 months ago #131025 by ElMichaJ
try it out with mobile phone and tablets and give me some screenshots

Hey Hey Hey .... El Micha J !!!

Please Log in or Create an account to join the conversation.

More
4 years 11 months ago #131026 by barnettgs
There is a popular framework (theme) that you can use, one design covers all different screen sizes including the laptops and desktops.  Have a look at: getbootstrap.com/

You can see many examples here: getbootstrap.com/getting-started/#examples

Basically, you don't have to worry about compatibility or web technologies issues which are changing constantly, they do it for you anyway...all you need to do is to simply applying ss.de's code/colour/style to the layouts and re-size the browser windows to see how they look like on any sizes.

Just a suggestion  :)

Please Log in or Create an account to join the conversation.

4 years 11 months ago #131028 by ElMichaJ
well .... it looks like that i have to learn a lot to understand it complete ...

i am not sure if i want to invest so much time for that ... but i looks interesting.

I think you can see what i am trying to do.

So if you want to setup an easy example for me on your server or just as zip file for me, that would be a great help


nice idea, but i need a lot help with that, because i am only a backend coder and not a frontender

Hey Hey Hey .... El Micha J !!!

Please Log in or Create an account to join the conversation.

More
4 years 11 months ago #131031 by barnettgs

well .... it looks like that i have to learn a lot to understand it complete ...

i am not sure if i want to invest so much time for that ... but i looks interesting.

I think you can see what i am trying to do.

So if you want to setup an easy example for me on your server or just as zip file for me, that would be a great help


nice idea, but i need a lot help with that, because i am only a backend coder and not a frontender

Perfect, I'm not a coder but frontend is what I do.

It has pre-made CSS styles for buttons, boxes, headers etc...all I have to change the colour/style to suit the SWOS site.  It includes Javascripts as default if you are using any on ss.de.

Have a look at boxes, header etc - getbootstrap.com/examples/theme/

It looks a bit confusing to get the head around but this is a tried & tested design that will save you huge amount of time in the long run, just works on any mobile devices.

Anyway, just e-mail me some codes which would load league table and match results and I will see what I can do with them on bootstrap theme on my server.

Please Log in or Create an account to join the conversation.

4 years 11 months ago #131181 by ElMichaJ
well, i will describe it first.

I want to have at maximum four columns, which should work responsive.

Each column/DIV will have his content like a table or like a cross table or result/news/comment stream

Here some examples:

www.sensiblesoccer.de/community/externals/leagues
www.sensiblesoccer.de/community/externals/tournaments/4101/
www.sensiblesoccer.de/community/externals/tournaments/3889/

it nearly works ... but three columns is a bit strange ...

Also i have small problems with spaces between breakpoints

is it possible to create some examples ? so that i can copy?

Hey Hey Hey .... El Micha J !!!

Please Log in or Create an account to join the conversation.

More
4 years 11 months ago - 4 years 11 months ago #131191 by barnettgs
Have a look at a very basic example: barnettgs.altervista.org/

4 columns at top and 3 columns on bottom.

Using this example: getbootstrap.com/examples/grid/

However, since the soccer leagues are tabular data, they are meant for the tables, not divs. It is far too complicated to use divs as tables, it just doesn't work well. Each has their own purposes. Divs are meant to be used for the layout of the site, not for tabular data such as timetable and so on.

On bootstrap, the total value for width is 12.  So if you have 4 divs columns, divide 12 for 4 = 3 each box. e.g. .col-xs-6 .col-sm-3

If 3 columns - .col-xs-6 .col-sm-4 (3x4 = 12)

Just simply insert league table in each div box.

Please Log in or Create an account to join the conversation.

4 years 11 months ago #131200 by ElMichaJ
nice :) can you send me this as a complete rar or zip ?

i think the menu is a bit strange working, but i have already some.


Hey Hey Hey .... El Micha J !!!

Please Log in or Create an account to join the conversation.

More
4 years 11 months ago - 4 years 11 months ago #131250 by barnettgs
Sure, just send me IM with your e-mail address as it is easier for me to attach files etc. 

Also I have just created a example of table similar to one you have but in table with CSS style applied.

Please Log in or Create an account to join the conversation.

More
4 years 11 months ago - 4 years 11 months ago #131256 by barnettgs
Here is an update with tables: barnettgs.altervista.org/

You can see that the tables are styled completed by CSS alone therefore using much less html markups.

Resize the browser window to narrow to see how the tables laid out.

By the way, just fixed the menu by pointing javascript to correct directory.

Please Log in or Create an account to join the conversation.

Time to create page: 0.181 seconds
Powered by Kunena Forum