As mentioned on the title, Iv'e just finished making a static website, using - CSS/JQUERY/SLICK/JQUERY/BOOTSTRAP.
And I have no idea what to do or where to start in order to make it responsive, tried google but still feeling confused not sure about where to start...
As for now minimizing the page seems to do nothing but cutting the area been minimized.
Changing the view to phone-view on chrome devtool causing the website to look the same, just extremely small which means you can't really read text or anything without zooming in.
any ideas or guidelines of how to start?... feeling lost which is weird cuz am feeling pretty comfortable with the method mentioned above.
Thanks alot for reading!
Thinking the mobile site after doing the standard one is not a good idea. But you are already at the end of that road and there is no going back now.
Responsiveness mostly works on the CSS side. You cambine media queries to specify which CSS should be used for each screen size, but it also has to do with your content structure. As mentioned in the comments, using rows and columns when designing your site helps doing the mobile site a lot.
I suggest you start reading this if you haven't: http://www.w3schools.com/css/css_rwd_intro.asp
And go through each section under the Responsive Web Design section. It should give you a good introduction to help you get started.
Related
Someone asked me to create a website for his sportsclub, I decided it try and make this webpage in ReactJs.
https://complexbjj-2a19b.firebaseapp.com/ this is the outcome, looks pretty and
works well on desktop.
It's pretty responsive layout wise.
So I was pretty happy untill I decided to build and deploy for production.
Sadly I found out that the webpage wasn't optimised for phones at all, leaving random blank spaces.
I tried allot of things, changing to PureComponents, Using React.memo.., etc etc.
Nothing seems to help, so now I'm here after hours & hours of trying to find a solution with my hands in my hair.
Does anyone know what could be causing this problem?
If you have the Google Chrome browser installed on your machine, you can try auditing your app in the inspector Audits tab (here is the doc). That could help you spot possible improvements.
First of all I would like to thank everyone on this forum, as you have made some of my friends greatest projects successful and I was hoping one of these projects can be done without them.
Now I want to expand to other services. I want to make an app in WinForms or WPF (But im still learning XAML so if you can it would help to answer for winforms) that constantly updates data and displays pictures or video in a row/rows. Like almost Moviebox for iPhone or Showbox for android. How movies are updated constantly without updating the app. (Im not promting piracy, its just the best example I could think of). And when you click on the movie(Which is a picture) it gives a description and picture and even a youtube video.
It kinda would work like a blog reader.... I think?
I think I will need a server and I will probably need a database. But sadly , i'm still a beginner, but willing to learn. Thanks and if you need any more info, please just ask. :)
http://msdn.microsoft.com/en-us/library/windows/apps/br211380.aspx?cs-save-lang=1&cs-lang=vb#code-snippet-2 The answer! I think? Any helpers?
http://msdn.microsoft.com/en-us/library/windows/apps/br211380.aspx?cs-save-lang=1&cs-lang=vb#code-snippet-2 This MSDN example explained everything I needed in full!
I'm a Ui/Ux designer, and I've been asked to give some advice on the architecture of an iPhone app, the said app implies a section called 'Help and guides' for the users to know how to properly enter their data in the app. While analyzing the app, I was going to recommand that it may be interesting to put that part in the settings, and I was challenged about the reason I would do that. All I could come up with was that it was kind of a habit to put it there. But indeed, why would we put the help in the settings?
While doing some research, it appears that the help and the FAQs are often placed in the settings of the apps, and I was wondering why. Even though it seems obvisous to me that this has evolve into a known pattern to the user, I was wondering if there was a proper justification for this practice. Any ideas or clues?
From my research into this as I am currently designing Android and IOS Apps. The reason to group both these items under the one menu is to keep the screen as clutter less as possible. Due to the screen size of a mobile phone, the need for space is high so removing the buttons by grouping them under the one menu helps greatly.
I would suggest possibly making a Menu button with the options to access help & settings as subheadings personally.
Hopefully someone may know what I mean and where I may find such a thing.
I'm creating a new website and as part of it i'll be offering mobile web design. What I need if possible, is something that, should a user click on one of my examples, it load up a mobile browser (not the mobile site on a normal web browser). More like an emulator that will allow them to see working examples of potential sites.
Is there anything out there that will do this, or am I looking at opening a new window to a set size and displaying the site within it?
Please Note --- Whilst writing this out, I may have stumbled across a potential floor, as this may expose code.
I'm thinking I should perhaps consider putting JPEGs or PNGs that they can scroll through so not to expose the code behind the mobile site itself?!
If there is such an emulator or the likes that is available (and doesn't show code in the background) i'd be more than happy to be pointed in the right direction!!
Thanks
Paul
Please correct me if I misunderstood your question, but it sounds like you want to let users preview a responsive design at different screen sizes while denying them access to the source code.
If that's the case, rendering the design as a flat image file for previewing purposes is your best bet, even though it would sacrifice any interactive aspects of your design. It's a rough trade-off.
I assume you have a legitimate reason for hiding the code. But if haven't already, you might want to ask yourself what's motivating you to conceal your source code in the first place. The web is built on open standards and accessibility; you'll have to go through a lot of contortions to hide static assets like HTML, CSS, and javascript from a browser. I understand if you're concerned about a sketchy client using your work without payment, but that's more of a contracts/legal issue than a technical one.
That said, you can always place the mobile site's main content (or an image of the content if you must hide the code) within a div of a specified width and height to visually emulate a phone. Wrap it with some phone graphics, control the overflow with overflow-y: scroll; and overflow-x: hidden; and there you have it.
Web Design Weekly is a nice example of this concept in action.
EDIT: it occurred to me that another option you could feasibly explore is video instead of static images. Always an option if you need to wow a client. Typeform.com is a good example of what I'm talking about.
i am new to drupal and it is irritating me. i have mastered wordpress and SMF forum software to a near expert level. but drupal as well as joomla have made the admin interfaces so totally confusing i wish there was an answer available for me to use and drop them altogether.
i cant get the slide show to show up on the front page or any other page. i cant find in there a sufficient means of manipulating the content blocks and logging and nav blocks. i am not new to computers and programming, and if this was a programming problem, i probably would have fixed it by now, but the interface is so confusing i cant get the site to do anything im wanting it to do.
i have looked at several tutorials that dont help at all. i found out about a part time job my company is offering and i know for fact i can do it if i can get past the fact that the admin interface is a maze of confusion.
theme demo - http://adaptivethemes.com/demos/atcommerce/
my test - http://tse.myfewclicks.com/drupal/
i beg anyone willing to help. i need to have something presentable, at least a good taste by monday. i could have already been done with it with SMF or wordpress, but they are the wrong type of software for the job.
please help someone.
It would appear that you may have solved your problem. I followed your link and the image rotator was working.
About the only difference was that on the AT demo site I was able to click the dots at the lower right hand corner to select the image I wanted whereas on your test site I was unable to do so.